@gjermundgaraba-designs/pixel-paper 0.12.0 → 0.14.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"sortable.d.ts","sourceRoot":"","sources":["../../../src/sortable/sortable.ts"],"names":[],"mappings":"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"}

package/dist/src/sortable/sortable.js

@@ -0,0 +1,504 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { DragAndDrop as UiDragAndDrop } from "@foldkit/ui";
+import { Array, Effect, Match, Option, Schema, Stream, pipe } from "effect";
+import * as Command from "foldkit/command";
+import { defineMessageUnion } from "foldkit/message";
+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";
+import * as Announcer from "../announcer/announcer.js";
+import * as Button from "../button/button.js";
+import { LEFT_BUTTON, activatedKeyboardDrag, cancelledDrag, escapeKeys, innerControls, insertionIndex, isCarrying, markDragging, measureLift, movedPointer, phaseOf, pressedDraggable, releasedPointer, } from "../drag/drag.js";
+import * as Glyph from "../glyph/glyph.js";
+import * as IconButton from "../iconButton/iconButton.js";
+import { LOCALE } from "../locale/locale.js";
+import { prefixKeys } from "../subscription/prefixKeys.js";
+// MODEL
+/** 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 });
+/** 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. Arrow keys move it one place, space drops it, escape cancels.",
+    pickedUp: "Picked up {item}.",
+    pickedUpByKeyboard: "Picked up {item}, {position} of {total}. Arrow keys move it one place, space drops it, escape cancels.",
+    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.Number,
+    clientX: Schema.Number,
+    clientY: Schema.Number,
+});
+/** 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),
+    maybePress: Schema.Option(Press),
+});
+/** Schema for a sortable: the `@foldkit/ui` DragAndDrop it moves items with, whether items may
+ *  move, and what it keeps while an item is held. The items are the parent's. */
+export const Model = Schema.Struct({
+    dragAndDrop: UiDragAndDrop.Model,
+    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,
+        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),
+    },
+    ReleasedPointer: {
+        screenX: Schema.Number,
+        screenY: Schema.Number,
+        clientX: Schema.Number,
+        clientY: Schema.Number,
+        maybeIndex: Schema.Option(Schema.Number),
+    },
+    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
+ *  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. */
+export const OutMessage = defineMessageUnion({
+    Moved: {
+        itemId: Schema.String,
+        fromIndex: Schema.Number,
+        toIndex: Schema.Number,
+        maybeAfterItemId: Schema.Option(Schema.String),
+        maybeBeforeItemId: Schema.Option(Schema.String),
+    },
+});
+/** Creates a sortable whose items may move, with nothing held. */
+export const init = (config) => (__foldkitBrandViewResult(({
+    dragAndDrop: UiDragAndDrop.init({ id: config.id }),
+    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");
+/** Whether an item is pressed or held. */
+export const isHolding = (model) => __foldkitBrandViewResult((Option.isSome(UiDragAndDrop.maybeDraggedItemId(model.dragAndDrop))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#isHolding");
+// DOM HOOKS
+const itemHook = (model, itemId) => __foldkitBrandViewResult((`${id(model)}/${itemId}`), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemHook");
+const ITEM_ATTRIBUTE = "sortable-item";
+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 },
+    messages: [Message.CompletedAnnounceReorder],
+    execute: ({ text }) => __foldkitBrandViewResult((Announcer.announce(text).pipe(Effect.as(Message.CompletedAnnounceReorder()))), "@gjermundgaraba-designs/pixel-paper/src/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-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);
+    const others = Array.filter(held.items, (item) => __foldkitBrandViewResult((item.id !== held.item.id), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~4"));
+    const toIndex = Math.min(Math.max(rawIndex, 0), others.length);
+    if (toIndex === fromIndex || !model.isMovable) {
+        return __foldkitBrandViewResult((yield* Option.none()), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~3");
+    }
+    return __foldkitBrandViewResult((OutMessage.Moved({
+        itemId: held.item.id,
+        fromIndex,
+        toIndex,
+        maybeAfterItemId: Option.map(toIndex > 0 ? Array.get(others, toIndex - 1) : Option.none(), (item) => __foldkitBrandViewResult((item.id), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~5")),
+        maybeBeforeItemId: Option.map(Array.get(others, toIndex), (item) => __foldkitBrandViewResult((item.id), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~6")),
+    })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~3");
+})), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#placementOf");
+const foldDragAndDropOutMessage = UiDragAndDrop.OutMessage.match({
+    Reordered: ({ toIndex }) => __foldkitBrandViewResult(((stepModel) => __foldkitBrandViewResult((Update.withOutMessage({ model: stepModel }, Option.getOrUndefined(Option.flatMap(stepModel.maybeHeld, (held) => __foldkitBrandViewResult((placementOf(stepModel, held, toIndex)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~8"))))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~7")), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#Reordered"),
+    Cancelled: () => __foldkitBrandViewResult(((stepModel) => (__foldkitBrandViewResult(({ model: stepModel }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~9"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#Cancelled"),
+});
+const toDragAndDropMessage = (message) => __foldkitBrandViewResult((Message.GotDragAndDropMessage({ message })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#toDragAndDropMessage");
+const foldDragAndDrop = Update.foldChild({
+    update: UiDragAndDrop.update,
+    read: (model) => __foldkitBrandViewResult((Option.some(model.dragAndDrop)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#read"),
+    write: (model, nextDragAndDrop) => __foldkitBrandViewResult((modifyFields(model, { dragAndDrop: () => __foldkitBrandViewResult((nextDragAndDrop), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#dragAndDrop") })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#write"),
+    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 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"),
+            }))
+            : Option.none()), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#moveText");
+    }
+    else if (before === "Pressed" && after === "PointerDragging") {
+        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");
+    }
+    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");
+    }
+};
+/** Announces the step a DragAndDrop update took and forgets the held item once it is down. */
+const settle = (previous, putBack = COPY.putBack) => __foldkitBrandViewResult(((dragAndDropUpdate) => {
+    const nextModel = phaseOf(dragAndDropUpdate.model.dragAndDrop) === "Idle"
+        ? modifyFields(dragAndDropUpdate.model, { maybeHeld: () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#maybeHeld") })
+        : dragAndDropUpdate.model;
+    const maybeText = 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"));
+    return __foldkitBrandViewResult((Update.withOutMessage({
+        model: nextModel,
+        commands: [
+            ...(dragAndDropUpdate.commands ?? []),
+            ...Array.fromOption(Option.map(maybeText, (text) => __foldkitBrandViewResult((AnnounceReorder({ text })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~15"))),
+        ],
+    }, dragAndDropUpdate.outMessage)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~13");
+}), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#settle");
+// 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.
+const canLift = (model) => __foldkitBrandViewResult((model.isMovable && phaseOf(model.dragAndDrop) === "Idle"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#canLift");
+/** The item `itemId` and its place, when the list may lift it now. */
+const liftable = (model, items, itemId) => __foldkitBrandViewResult((Option.filter(Option.flatMap(indexOf(items, itemId), (index) => __foldkitBrandViewResult((Option.map(Array.get(items, index), (item) => (__foldkitBrandViewResult(({ index, item }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~17")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~16")), () => __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~2") });
+    return __foldkitBrandViewResult((settle(pressed)(foldDragAndDrop(pressed, liftMessage))), "@gjermundgaraba-designs/pixel-paper/src/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-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 release = (model, pointer) => {
+    if (phaseOf(model.dragAndDrop) !== "PointerDragging") {
+        return __foldkitBrandViewResult((foldDragAndDrop(model, releasedPointer())), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#release");
+    }
+    const moved = foldDragAndDrop(model, pointerMove(model, pointer));
+    const released = foldDragAndDrop(moved.model, releasedPointer());
+    return __foldkitBrandViewResult((Update.withOutMessage({
+        model: released.model,
+        commands: [...(moved.commands ?? []), ...(released.commands ?? [])],
+    }, 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"
+    ? { 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), {
+        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({
+            itemId: itemHook(model, itemId),
+            containerId: id(model),
+            index,
+            screenX,
+            screenY,
+        }))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onSome~2"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#PressedItem"),
+    PressedGripKey: ({ itemId, items }) => __foldkitBrandViewResult((Option.match(liftable(model, items, itemId), {
+        onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/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-designs/pixel-paper/src/sortable/sortable.js#onSome~3"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#PressedGripKey"),
+    MovedPointer: (pointer) => __foldkitBrandViewResult((settle(model)(foldDragAndDrop(model, pointerMove(model, pointer)))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#MovedPointer"),
+    ReleasedPointer: (pointer) => __foldkitBrandViewResult((settle(model)(release(model, pointer))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#ReleasedPointer"),
+    CancelledPointer: () => __foldkitBrandViewResult((settle(model)(foldDragAndDrop(model, cancelledDrag()))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#CancelledPointer"),
+    PressedEscape: () => __foldkitBrandViewResult((cancelDrag(model)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#PressedEscape"),
+    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
+/** 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 PointerHold = Schema.Struct({
+    listId: Schema.String,
+    heldHook: Schema.String,
+    pointerId: Schema.Number,
+});
+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-designs/pixel-paper/src/sortable/sortable.js#pointerAt"));
+/** The pressing pointer's moves, release and cancel; another pointer's are not the list's. */
+export const pointerMessages = (hold) => {
+    const fromPressing = (type) => __foldkitBrandViewResult((Stream.fromEventListener(document, type).pipe(Stream.filter((event) => __foldkitBrandViewResult((event.pointerId === hold.pointerId), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~25")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#fromPressing");
+    const streams = [
+        Stream.map(fromPressing("pointermove"), (event) => __foldkitBrandViewResult((Message.MovedPointer(pointerAt(hold, event))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~26")),
+        Stream.map(fromPressing("pointerup"), (event) => __foldkitBrandViewResult((Message.ReleasedPointer(pointerAt(hold, event))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~27")),
+        Stream.map(fromPressing("pointercancel"), () => __foldkitBrandViewResult((Message.CancelledPointer()), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~28")),
+    ];
+    return __foldkitBrandViewResult((Stream.mergeAll(streams, { concurrency: "unbounded" })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#pointerMessages");
+};
+const ownSubscriptions = 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-designs/pixel-paper/src/sortable/sortable.js#anonymous~31")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~30")), () => {
+                const phase = phaseOf(model.dragAndDrop);
+                return __foldkitBrandViewResult((phase === "Pressed" || phase === "PointerDragging"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~32");
+            }),
+        }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#modelToDependencies")),
+        dependenciesToStream: ({ maybeHold }) => __foldkitBrandViewResult((Option.match(maybeHold, {
+            onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onNone~4"),
+            onSome: (hold) => __foldkitBrandViewResult((Stream.merge(pointerMessages(hold), markDragging)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onSome~4"),
+        })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#dependenciesToStream"),
+    }),
+    escape: entry({ isHolding: Schema.Boolean }, {
+        modelToDependencies: (model) => (__foldkitBrandViewResult(({ isHolding: isHolding(model) }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#modelToDependencies~2")),
+        dependenciesToStream: ({ isHolding: isHoldingNow }) => __foldkitBrandViewResult((isHoldingNow ? escapeKeys(Message.PressedEscape()) : Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#dependenciesToStream~2"),
+    }),
+}), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~29")));
+// 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,
+})({
+    read: (model) => __foldkitBrandViewResult((Option.some(model.dragAndDrop)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#read~2"),
+    toParentMessage: toDragAndDropMessage,
+});
+const sortableSubscriptions = Subscription.aggregate(ownSubscriptions, 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`. */
+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 },
+    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-designs/pixel-paper/src/sortable/sortable.js#anonymous~33");
+    })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#execute~2"),
+});
+const INNER_CONTROL = innerControls(`[data-${GRIP_ATTRIBUTE}]`);
+/** Whether a press lifts the item: on its grip under any pointer, on its body under a mouse,
+ *  and never on a control inside it. */
+const isLiftingPress = (target, pointerType) => {
+    if (!(target instanceof Element)) {
+        return __foldkitBrandViewResult((pointerType === "mouse"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#isLiftingPress");
+    }
+    const isOnGrip = target.closest(`[data-${GRIP_ATTRIBUTE}]`) !== null;
+    const maybeItem = Option.fromNullishOr(target.closest(`[data-${ITEM_ATTRIBUTE}]`));
+    const isOnControl = Option.exists(maybeItem, (item) => {
+        const control = target.closest(INNER_CONTROL);
+        return __foldkitBrandViewResult((control !== null && item.contains(control)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~34");
+    });
+    return __foldkitBrandViewResult((isOnGrip || (pointerType === "mouse" && !isOnControl)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#isLiftingPress");
+};
+const helpId = (model) => __foldkitBrandViewResult((`${id(model)}-grip-help`), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#helpId");
+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");
+const liftedView = (info, item, h) => __foldkitBrandViewResult((h.div([h.Class("sortable-item lifted")], [liftedGrip(h), h.div([h.Class("sortable-body")], info.toItemView(item, { isLifted: true }))])), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#liftedView");
+const gripView = (info, item, h) => {
+    const { model, 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-designs/pixel-paper/src/sortable/sortable.js#anonymous~36"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~35"));
+    // 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),
+        isQuiet: true,
+        isDisabled: !model.isMovable,
+        attributes: [
+            h.DataAttribute("draggable-id", itemHook(model, item.id)),
+            h.DataAttribute(GRIP_ATTRIBUTE, ""),
+            h.AriaRoleDescription("draggable"),
+            h.AriaDescribedBy(helpId(model)),
+            Button.pressedAttribute(isHeldItem(model, item.id), h),
+            ...(model.isMovable ? [onGripKey] : []),
+        ],
+    }, h)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#gripView");
+};
+const itemAttributes = (info, item, h) => {
+    const { model, items } = info;
+    const isIdleNow = phaseOf(model.dragAndDrop) === "Idle";
+    const onPress = h.OnPointerDown((pointerType, button, screenX, screenY, _time, clientX, clientY, pointerId, target) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedItem({
+        itemId: item.id,
+        pointerId,
+        screenX,
+        screenY,
+        clientX,
+        clientY,
+        items,
+    }), () => __foldkitBrandViewResult((isIdleNow &&
+        model.isMovable &&
+        button === LEFT_BUTTON &&
+        isLiftingPress(target, pointerType)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~38"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~37"));
+    return __foldkitBrandViewResult(([h.DataAttribute(ITEM_ATTRIBUTE, ""), onPress]), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemAttributes");
+};
+/** 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~39")), 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~41")), 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~43"));
+    return __foldkitBrandViewResult((Option.orElse(Option.map(Array.get(others, index), (item) => (__foldkitBrandViewResult(({
+        itemId: item.id,
+        side: "Before",
+    }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~44"))), () => __foldkitBrandViewResult((Option.map(Array.last(others), (item) => (__foldkitBrandViewResult(({
+        itemId: item.id,
+        side: "After",
+    }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~46")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~45"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~42");
+}))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~40")))), "@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~47")), {
+    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")),
+})), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#dropClass");
+const itemClass = (info, item) => __foldkitBrandViewResult((`sortable-item${info.model.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)),
+    ...itemAttributes(info, item, h),
+    h.Class(itemClass(info, item)),
+], [
+    gripView(info, item, h),
+    h.div([h.Class("sortable-body")], info.toItemView(item, { isLifted: false })),
+])), "@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 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~48")));
+    const maybeSlot = pipe(model.maybeHeld, Option.filter(() => __foldkitBrandViewResult((phaseOf(model.dragAndDrop) === "KeyboardDragging"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~49")), Option.flatMap((held) => __foldkitBrandViewResult((Option.map(targetIndex(model, held), (index) => (__foldkitBrandViewResult(({ held, index }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~51")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~50")));
+    return __foldkitBrandViewResult((Option.match(maybeSlot, {
+        onNone: () => __foldkitBrandViewResult((Array.map(rows, ({ html }) => __foldkitBrandViewResult((html), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~52"))), "@gjermundgaraba-designs/pixel-paper/src/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-designs/pixel-paper/src/sortable/sortable.js#anonymous~53"));
+            const maybeBefore = Array.get(others, index);
+            return __foldkitBrandViewResult((Option.match(maybeBefore, {
+                onNone: () => __foldkitBrandViewResult(([...Array.map(rows, ({ html }) => __foldkitBrandViewResult((html), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~54")), slot]), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onNone~7"),
+                onSome: (before) => __foldkitBrandViewResult((Array.flatMap(rows, ({ item, html }) => __foldkitBrandViewResult((item.id === before.item.id ? [slot, html] : [html]), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~55"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onSome~7"),
+            })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onSome~6");
+        },
+    })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemsView");
+};
+const liftedCopyView = (info, h) => {
+    const { model } = info;
+    const maybeLifted = Option.all({
+        style: UiDragAndDrop.ghostStyle(model.dragAndDrop),
+        held: model.maybeHeld,
+        press: Option.flatMap(model.maybeHeld, ({ maybePress }) => __foldkitBrandViewResult((maybePress), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~56")),
+    });
+    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-designs/pixel-paper/src/sortable/sortable.js#anonymous~57")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#liftedCopyView");
+};
+/**
+ * Items the reader puts in order, as rows or as tiles, 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. The items are the parent's; a drop reports `Moved`.
+ *
+ * A mouse drags an item by its body or its grip; touch takes the grip alone, so a finger on
+ * an item 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.
+ */
+export const view = defineView((model, viewInputs, h) => {
+    const { items, label, layout = "List", toItemView } = viewInputs;
+    const info = { model, items, maybeDropMark: dropMarkOf(model), toItemView };
+    return __foldkitBrandViewResult((h.div([h.Class(layout === "Grid" ? "sortable grid" : "sortable")], [
+        // 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"),
+            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-designs/pixel-paper/src/sortable/sortable.js#anonymous~58");
+});

package/dist/src/toast/index.d.ts

@@ -1,4 +1,4 @@
-export { AnnounceSlip, BindStack, FocusSlip, Message, Model, OutMessage, dismiss, id, init, show, update, view, } from "./toast.ts";
+export { AnnounceSlip, BindStack, FocusSlip, Message, Model, OutMessage, dismiss, id, init, sceneMounts, show, update, view, } from "./toast.ts";
 export type { InitConfig, ShowConfig, ShowReturn } from "./toast.ts";
 export type { Action, Tone } from "./stack.ts";
 export { Focus } from "../focus/focus.ts";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,OAAO,EACP,KAAK,EACL,UAAU,EACV,OAAO,EACP,EAAE,EACF,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACrE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,OAAO,EACP,KAAK,EACL,UAAU,EACV,OAAO,EACP,EAAE,EACF,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACrE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/src/toast/index.js

@@ -1,2 +1,2 @@
-export { AnnounceSlip, BindStack, FocusSlip, Message, Model, OutMessage, dismiss, id, init, show, update, view, } from "./toast.js";
+export { AnnounceSlip, BindStack, FocusSlip, Message, Model, OutMessage, dismiss, id, init, sceneMounts, show, update, view, } from "./toast.js";
 export { Focus } from "../focus/focus.js";