@gjermundgaraba-designs/pixel-paper 0.13.0 → 0.14.0

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

@@ -0,0 +1,1144 @@
+import { Effect, Option, Schema, Stream } from "effect";
+import * as Command from "foldkit/command";
+import type { Html } from "foldkit/html";
+import * as Mount from "foldkit/mount";
+import * as Subscription from "foldkit/subscription";
+import * as Update from "foldkit/update";
+/** 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 declare const Item: Schema.Struct<{
+    readonly id: Schema.String;
+    readonly label: Schema.String;
+}>;
+export type Item = typeof Item.Type;
+/** 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 declare const Model: Schema.Struct<{
+    readonly dragAndDrop: Schema.Struct<{
+        readonly id: Schema.String;
+        readonly orientation: Schema.Literals<readonly ["Horizontal", "Vertical"]>;
+        readonly activationThreshold: Schema.Number;
+        readonly dragState: import("foldkit/schema").TaggedUnion<{
+            readonly Idle: {};
+            readonly Pending: {
+                itemId: Schema.String;
+                containerId: Schema.String;
+                index: Schema.Number;
+                origin: Schema.Struct<{
+                    readonly screenX: Schema.Number;
+                    readonly screenY: Schema.Number;
+                }>;
+            };
+            readonly Dragging: {
+                itemId: Schema.String;
+                sourceContainerId: Schema.String;
+                sourceIndex: Schema.Number;
+                origin: Schema.Struct<{
+                    readonly screenX: Schema.Number;
+                    readonly screenY: Schema.Number;
+                }>;
+                current: Schema.Struct<{
+                    readonly clientX: Schema.Number;
+                    readonly clientY: Schema.Number;
+                }>;
+                maybeDropTarget: Schema.Option<Schema.Struct<{
+                    readonly containerId: Schema.String;
+                    readonly index: Schema.Number;
+                }>>;
+            };
+            readonly KeyboardDragging: {
+                itemId: Schema.String;
+                sourceContainerId: Schema.String;
+                sourceIndex: Schema.Number;
+                targetContainerId: Schema.String;
+                targetIndex: Schema.Number;
+            };
+        }>;
+    }>;
+    readonly isMovable: Schema.Boolean;
+    readonly maybeHeld: Schema.Option<Schema.Struct<{
+        readonly item: Schema.Struct<{
+            readonly id: Schema.String;
+            readonly label: Schema.String;
+        }>;
+        readonly items: Schema.$Array<Schema.Struct<{
+            readonly id: Schema.String;
+            readonly label: Schema.String;
+        }>>;
+        readonly maybePress: Schema.Option<Schema.Struct<{
+            readonly pointerId: Schema.Number;
+            readonly clientX: Schema.Number;
+            readonly clientY: Schema.Number;
+        }>>;
+    }>>;
+}>;
+export type Model = typeof Model.Type;
+/** Union of all Messages a sortable can produce. */
+export declare const Message: import("foldkit/message").MessageUnion<{
+    readonly GotDragAndDropMessage: {
+        message: import("foldkit/message").MessageUnion<{
+            readonly PressedDraggable: {
+                itemId: Schema.String;
+                containerId: Schema.String;
+                index: Schema.Number;
+                screenX: Schema.Number;
+                screenY: Schema.Number;
+            };
+            readonly MovedPointer: {
+                screenX: Schema.Number;
+                screenY: Schema.Number;
+                clientX: Schema.Number;
+                clientY: Schema.Number;
+                maybeDropTarget: Schema.Option<Schema.Struct<{
+                    readonly containerId: Schema.String;
+                    readonly index: Schema.Number;
+                }>>;
+            };
+            readonly ReleasedPointer: {};
+            readonly CancelledDrag: {};
+            readonly ActivatedKeyboardDrag: {
+                itemId: Schema.String;
+                containerId: Schema.String;
+                index: Schema.Number;
+            };
+            readonly CompletedResolveKeyboardMove: {
+                targetContainerId: Schema.String;
+                targetIndex: Schema.Number;
+            };
+            readonly ConfirmedKeyboardDrop: {};
+            readonly PressedArrowKey: {
+                direction: Schema.Literals<readonly ["Up", "Down", "Left", "Right", "NextContainer", "PreviousContainer"]>;
+            };
+            readonly AdvancedAutoScrollFrame: {};
+            readonly CompletedFocusItem: {};
+        }>;
+    };
+    readonly PressedItem: {
+        itemId: Schema.String;
+        pointerId: Schema.Number;
+        screenX: Schema.Number;
+        screenY: Schema.Number;
+        clientX: Schema.Number;
+        clientY: Schema.Number;
+        items: Schema.$Array<Schema.Struct<{
+            readonly id: Schema.String;
+            readonly label: Schema.String;
+        }>>;
+    };
+    readonly PressedGripKey: {
+        itemId: Schema.String;
+        items: Schema.$Array<Schema.Struct<{
+            readonly id: Schema.String;
+            readonly label: Schema.String;
+        }>>;
+    };
+    readonly MovedPointer: {
+        screenX: Schema.Number;
+        screenY: Schema.Number;
+        clientX: Schema.Number;
+        clientY: Schema.Number;
+        maybeIndex: Schema.Option<Schema.Number>;
+    };
+    readonly ReleasedPointer: {
+        screenX: Schema.Number;
+        screenY: Schema.Number;
+        clientX: Schema.Number;
+        clientY: Schema.Number;
+        maybeIndex: Schema.Option<Schema.Number>;
+    };
+    readonly CancelledPointer: {};
+    readonly PressedEscape: {};
+    readonly CompletedAnnounceReorder: {};
+    readonly CompletedSizeLiftedItem: {};
+}>;
+export type Message = typeof Message.Type;
+/** 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 declare const OutMessage: import("foldkit/message").MessageUnion<{
+    readonly Moved: {
+        itemId: Schema.String;
+        fromIndex: Schema.Number;
+        toIndex: Schema.Number;
+        maybeAfterItemId: Schema.Option<Schema.String>;
+        maybeBeforeItemId: Schema.Option<Schema.String>;
+    };
+}>;
+export type OutMessage = typeof OutMessage.Type;
+/** Configuration for creating a sortable with `init`. The `id` must be unique in the document;
+ *  the list's DOM hooks are scoped by it. */
+export type InitConfig = Readonly<{
+    id: string;
+}>;
+/** Creates a sortable whose items may move, with nothing held. */
+export declare const init: (config: InitConfig) => Model;
+/** Whether an item is pressed or held. */
+export declare const isHolding: (model: Model) => boolean;
+/** Says a step of a move through the page's live region (as `Announcer.Announce` does). */
+export declare const AnnounceReorder: Command.CommandDefinitionWithArgs<"AnnounceReorder", {
+    text: Schema.String;
+}, Effect.Effect<{
+    readonly _tag: "CompletedAnnounceReorder";
+}, never, never>>;
+type UpdateReturn = Update.ReturnWithOutMessage<Model, Message, OutMessage>;
+/** Processes a sortable Message and returns the next Model, Commands and OutMessage. */
+export declare const update: (model: Model, message: Message) => Readonly<{
+    model: {
+        readonly dragAndDrop: {
+            readonly id: string;
+            readonly orientation: "Horizontal" | "Vertical";
+            readonly activationThreshold: number;
+            readonly dragState: {
+                readonly _tag: "Dragging";
+                readonly itemId: string;
+                readonly sourceContainerId: string;
+                readonly sourceIndex: number;
+                readonly origin: {
+                    readonly screenX: number;
+                    readonly screenY: number;
+                };
+                readonly current: {
+                    readonly clientX: number;
+                    readonly clientY: number;
+                };
+                readonly maybeDropTarget: Option.Option<{
+                    readonly containerId: string;
+                    readonly index: number;
+                }>;
+            } | {
+                readonly _tag: "Idle";
+            } | {
+                readonly _tag: "KeyboardDragging";
+                readonly itemId: string;
+                readonly sourceContainerId: string;
+                readonly sourceIndex: number;
+                readonly targetContainerId: string;
+                readonly targetIndex: number;
+            } | {
+                readonly _tag: "Pending";
+                readonly itemId: string;
+                readonly containerId: string;
+                readonly index: number;
+                readonly origin: {
+                    readonly screenX: number;
+                    readonly screenY: number;
+                };
+            };
+        };
+        readonly isMovable: boolean;
+        readonly maybeHeld: Option.Option<{
+            readonly item: {
+                readonly id: string;
+                readonly label: string;
+            };
+            readonly items: readonly {
+                readonly id: string;
+                readonly label: string;
+            }[];
+            readonly maybePress: Option.Option<{
+                readonly pointerId: number;
+                readonly clientX: number;
+                readonly clientY: number;
+            }>;
+        }>;
+    };
+    commands?: Update.Commands<{
+        readonly _tag: "CancelledPointer";
+    } | {
+        readonly _tag: "CompletedAnnounceReorder";
+    } | {
+        readonly _tag: "CompletedSizeLiftedItem";
+    } | {
+        readonly _tag: "GotDragAndDropMessage";
+        readonly message: {
+            readonly _tag: "ActivatedKeyboardDrag";
+            readonly itemId: string;
+            readonly containerId: string;
+            readonly index: number;
+        } | {
+            readonly _tag: "AdvancedAutoScrollFrame";
+        } | {
+            readonly _tag: "CancelledDrag";
+        } | {
+            readonly _tag: "CompletedFocusItem";
+        } | {
+            readonly _tag: "CompletedResolveKeyboardMove";
+            readonly targetContainerId: string;
+            readonly targetIndex: number;
+        } | {
+            readonly _tag: "ConfirmedKeyboardDrop";
+        } | {
+            readonly _tag: "MovedPointer";
+            readonly screenX: number;
+            readonly screenY: number;
+            readonly clientX: number;
+            readonly clientY: number;
+            readonly maybeDropTarget: Option.Option<{
+                readonly containerId: string;
+                readonly index: number;
+            }>;
+        } | {
+            readonly _tag: "PressedArrowKey";
+            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
+        } | {
+            readonly _tag: "PressedDraggable";
+            readonly itemId: string;
+            readonly containerId: string;
+            readonly index: number;
+            readonly screenX: number;
+            readonly screenY: number;
+        } | {
+            readonly _tag: "ReleasedPointer";
+        };
+    } | {
+        readonly _tag: "MovedPointer";
+        readonly screenX: number;
+        readonly screenY: number;
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeIndex: Option.Option<number>;
+    } | {
+        readonly _tag: "PressedEscape";
+    } | {
+        readonly _tag: "PressedGripKey";
+        readonly itemId: string;
+        readonly items: readonly {
+            readonly id: string;
+            readonly label: string;
+        }[];
+    } | {
+        readonly _tag: "PressedItem";
+        readonly itemId: string;
+        readonly pointerId: number;
+        readonly screenX: number;
+        readonly screenY: number;
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly items: readonly {
+            readonly id: string;
+            readonly label: string;
+        }[];
+    } | {
+        readonly _tag: "ReleasedPointer";
+        readonly screenX: number;
+        readonly screenY: number;
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeIndex: Option.Option<number>;
+    }, never>;
+    outMessage?: {
+        readonly _tag: "Moved";
+        readonly itemId: string;
+        readonly fromIndex: number;
+        readonly toIndex: number;
+        readonly maybeAfterItemId: Option.Option<string>;
+        readonly maybeBeforeItemId: Option.Option<string>;
+    };
+}>;
+/** 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 declare const setMovable: (model: Model, isMovable: boolean) => UpdateReturn;
+declare const PointerHold: Schema.Struct<{
+    readonly listId: Schema.String;
+    readonly heldHook: Schema.String;
+    readonly pointerId: Schema.Number;
+}>;
+type PointerHold = typeof PointerHold.Type;
+/** The pressing pointer's moves, release and cancel; another pointer's are not the list's. */
+export declare const pointerMessages: (hold: PointerHold) => Stream.Stream<Message>;
+/** 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 declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) => {
+    readonly escape: Subscription.EntryWithoutKeepAlive<{
+        readonly dragAndDrop: {
+            readonly id: string;
+            readonly orientation: "Horizontal" | "Vertical";
+            readonly activationThreshold: number;
+            readonly dragState: {
+                readonly _tag: "Dragging";
+                readonly itemId: string;
+                readonly sourceContainerId: string;
+                readonly sourceIndex: number;
+                readonly origin: {
+                    readonly screenX: number;
+                    readonly screenY: number;
+                };
+                readonly current: {
+                    readonly clientX: number;
+                    readonly clientY: number;
+                };
+                readonly maybeDropTarget: Option.Option<{
+                    readonly containerId: string;
+                    readonly index: number;
+                }>;
+            } | {
+                readonly _tag: "Idle";
+            } | {
+                readonly _tag: "KeyboardDragging";
+                readonly itemId: string;
+                readonly sourceContainerId: string;
+                readonly sourceIndex: number;
+                readonly targetContainerId: string;
+                readonly targetIndex: number;
+            } | {
+                readonly _tag: "Pending";
+                readonly itemId: string;
+                readonly containerId: string;
+                readonly index: number;
+                readonly origin: {
+                    readonly screenX: number;
+                    readonly screenY: number;
+                };
+            };
+        };
+        readonly isMovable: boolean;
+        readonly maybeHeld: Option.Option<{
+            readonly item: {
+                readonly id: string;
+                readonly label: string;
+            };
+            readonly items: readonly {
+                readonly id: string;
+                readonly label: string;
+            }[];
+            readonly maybePress: Option.Option<{
+                readonly pointerId: number;
+                readonly clientX: number;
+                readonly clientY: number;
+            }>;
+        }>;
+    }, {
+        readonly _tag: "CancelledPointer";
+    } | {
+        readonly _tag: "CompletedAnnounceReorder";
+    } | {
+        readonly _tag: "CompletedSizeLiftedItem";
+    } | {
+        readonly _tag: "GotDragAndDropMessage";
+        readonly message: {
+            readonly _tag: "ActivatedKeyboardDrag";
+            readonly itemId: string;
+            readonly containerId: string;
+            readonly index: number;
+        } | {
+            readonly _tag: "AdvancedAutoScrollFrame";
+        } | {
+            readonly _tag: "CancelledDrag";
+        } | {
+            readonly _tag: "CompletedFocusItem";
+        } | {
+            readonly _tag: "CompletedResolveKeyboardMove";
+            readonly targetContainerId: string;
+            readonly targetIndex: number;
+        } | {
+            readonly _tag: "ConfirmedKeyboardDrop";
+        } | {
+            readonly _tag: "MovedPointer";
+            readonly screenX: number;
+            readonly screenY: number;
+            readonly clientX: number;
+            readonly clientY: number;
+            readonly maybeDropTarget: Option.Option<{
+                readonly containerId: string;
+                readonly index: number;
+            }>;
+        } | {
+            readonly _tag: "PressedArrowKey";
+            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
+        } | {
+            readonly _tag: "PressedDraggable";
+            readonly itemId: string;
+            readonly containerId: string;
+            readonly index: number;
+            readonly screenX: number;
+            readonly screenY: number;
+        } | {
+            readonly _tag: "ReleasedPointer";
+        };
+    } | {
+        readonly _tag: "MovedPointer";
+        readonly screenX: number;
+        readonly screenY: number;
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeIndex: Option.Option<number>;
+    } | {
+        readonly _tag: "PressedEscape";
+    } | {
+        readonly _tag: "PressedGripKey";
+        readonly itemId: string;
+        readonly items: readonly {
+            readonly id: string;
+            readonly label: string;
+        }[];
+    } | {
+        readonly _tag: "PressedItem";
+        readonly itemId: string;
+        readonly pointerId: number;
+        readonly screenX: number;
+        readonly screenY: number;
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly items: readonly {
+            readonly id: string;
+            readonly label: string;
+        }[];
+    } | {
+        readonly _tag: "ReleasedPointer";
+        readonly screenX: number;
+        readonly screenY: number;
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeIndex: Option.Option<number>;
+    }, {
+        readonly isHolding: boolean;
+    }, never> & {
+        readonly __subscription: never;
+    };
+    readonly pointer: Subscription.EntryWithoutKeepAlive<{
+        readonly dragAndDrop: {
+            readonly id: string;
+            readonly orientation: "Horizontal" | "Vertical";
+            readonly activationThreshold: number;
+            readonly dragState: {
+                readonly _tag: "Dragging";
+                readonly itemId: string;
+                readonly sourceContainerId: string;
+                readonly sourceIndex: number;
+                readonly origin: {
+                    readonly screenX: number;
+                    readonly screenY: number;
+                };
+                readonly current: {
+                    readonly clientX: number;
+                    readonly clientY: number;
+                };
+                readonly maybeDropTarget: Option.Option<{
+                    readonly containerId: string;
+                    readonly index: number;
+                }>;
+            } | {
+                readonly _tag: "Idle";
+            } | {
+                readonly _tag: "KeyboardDragging";
+                readonly itemId: string;
+                readonly sourceContainerId: string;
+                readonly sourceIndex: number;
+                readonly targetContainerId: string;
+                readonly targetIndex: number;
+            } | {
+                readonly _tag: "Pending";
+                readonly itemId: string;
+                readonly containerId: string;
+                readonly index: number;
+                readonly origin: {
+                    readonly screenX: number;
+                    readonly screenY: number;
+                };
+            };
+        };
+        readonly isMovable: boolean;
+        readonly maybeHeld: Option.Option<{
+            readonly item: {
+                readonly id: string;
+                readonly label: string;
+            };
+            readonly items: readonly {
+                readonly id: string;
+                readonly label: string;
+            }[];
+            readonly maybePress: Option.Option<{
+                readonly pointerId: number;
+                readonly clientX: number;
+                readonly clientY: number;
+            }>;
+        }>;
+    }, {
+        readonly _tag: "CancelledPointer";
+    } | {
+        readonly _tag: "CompletedAnnounceReorder";
+    } | {
+        readonly _tag: "CompletedSizeLiftedItem";
+    } | {
+        readonly _tag: "GotDragAndDropMessage";
+        readonly message: {
+            readonly _tag: "ActivatedKeyboardDrag";
+            readonly itemId: string;
+            readonly containerId: string;
+            readonly index: number;
+        } | {
+            readonly _tag: "AdvancedAutoScrollFrame";
+        } | {
+            readonly _tag: "CancelledDrag";
+        } | {
+            readonly _tag: "CompletedFocusItem";
+        } | {
+            readonly _tag: "CompletedResolveKeyboardMove";
+            readonly targetContainerId: string;
+            readonly targetIndex: number;
+        } | {
+            readonly _tag: "ConfirmedKeyboardDrop";
+        } | {
+            readonly _tag: "MovedPointer";
+            readonly screenX: number;
+            readonly screenY: number;
+            readonly clientX: number;
+            readonly clientY: number;
+            readonly maybeDropTarget: Option.Option<{
+                readonly containerId: string;
+                readonly index: number;
+            }>;
+        } | {
+            readonly _tag: "PressedArrowKey";
+            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
+        } | {
+            readonly _tag: "PressedDraggable";
+            readonly itemId: string;
+            readonly containerId: string;
+            readonly index: number;
+            readonly screenX: number;
+            readonly screenY: number;
+        } | {
+            readonly _tag: "ReleasedPointer";
+        };
+    } | {
+        readonly _tag: "MovedPointer";
+        readonly screenX: number;
+        readonly screenY: number;
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeIndex: Option.Option<number>;
+    } | {
+        readonly _tag: "PressedEscape";
+    } | {
+        readonly _tag: "PressedGripKey";
+        readonly itemId: string;
+        readonly items: readonly {
+            readonly id: string;
+            readonly label: string;
+        }[];
+    } | {
+        readonly _tag: "PressedItem";
+        readonly itemId: string;
+        readonly pointerId: number;
+        readonly screenX: number;
+        readonly screenY: number;
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly items: readonly {
+            readonly id: string;
+            readonly label: string;
+        }[];
+    } | {
+        readonly _tag: "ReleasedPointer";
+        readonly screenX: number;
+        readonly screenY: number;
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeIndex: Option.Option<number>;
+    }, {
+        readonly maybeHold: Option.Option<{
+            readonly listId: string;
+            readonly heldHook: string;
+            readonly pointerId: number;
+        }>;
+    }, never> & {
+        readonly __subscription: never;
+    };
+} & {
+    readonly autoScroll: Subscription.Subscription<{
+        readonly dragAndDrop: {
+            readonly id: string;
+            readonly orientation: "Horizontal" | "Vertical";
+            readonly activationThreshold: number;
+            readonly dragState: {
+                readonly _tag: "Dragging";
+                readonly itemId: string;
+                readonly sourceContainerId: string;
+                readonly sourceIndex: number;
+                readonly origin: {
+                    readonly screenX: number;
+                    readonly screenY: number;
+                };
+                readonly current: {
+                    readonly clientX: number;
+                    readonly clientY: number;
+                };
+                readonly maybeDropTarget: Option.Option<{
+                    readonly containerId: string;
+                    readonly index: number;
+                }>;
+            } | {
+                readonly _tag: "Idle";
+            } | {
+                readonly _tag: "KeyboardDragging";
+                readonly itemId: string;
+                readonly sourceContainerId: string;
+                readonly sourceIndex: number;
+                readonly targetContainerId: string;
+                readonly targetIndex: number;
+            } | {
+                readonly _tag: "Pending";
+                readonly itemId: string;
+                readonly containerId: string;
+                readonly index: number;
+                readonly origin: {
+                    readonly screenX: number;
+                    readonly screenY: number;
+                };
+            };
+        };
+        readonly isMovable: boolean;
+        readonly maybeHeld: Option.Option<{
+            readonly item: {
+                readonly id: string;
+                readonly label: string;
+            };
+            readonly items: readonly {
+                readonly id: string;
+                readonly label: string;
+            }[];
+            readonly maybePress: Option.Option<{
+                readonly pointerId: number;
+                readonly clientX: number;
+                readonly clientY: number;
+            }>;
+        }>;
+    }, {
+        readonly _tag: "CancelledPointer";
+    } | {
+        readonly _tag: "CompletedAnnounceReorder";
+    } | {
+        readonly _tag: "CompletedSizeLiftedItem";
+    } | {
+        readonly _tag: "GotDragAndDropMessage";
+        readonly message: {
+            readonly _tag: "ActivatedKeyboardDrag";
+            readonly itemId: string;
+            readonly containerId: string;
+            readonly index: number;
+        } | {
+            readonly _tag: "AdvancedAutoScrollFrame";
+        } | {
+            readonly _tag: "CancelledDrag";
+        } | {
+            readonly _tag: "CompletedFocusItem";
+        } | {
+            readonly _tag: "CompletedResolveKeyboardMove";
+            readonly targetContainerId: string;
+            readonly targetIndex: number;
+        } | {
+            readonly _tag: "ConfirmedKeyboardDrop";
+        } | {
+            readonly _tag: "MovedPointer";
+            readonly screenX: number;
+            readonly screenY: number;
+            readonly clientX: number;
+            readonly clientY: number;
+            readonly maybeDropTarget: Option.Option<{
+                readonly containerId: string;
+                readonly index: number;
+            }>;
+        } | {
+            readonly _tag: "PressedArrowKey";
+            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
+        } | {
+            readonly _tag: "PressedDraggable";
+            readonly itemId: string;
+            readonly containerId: string;
+            readonly index: number;
+            readonly screenX: number;
+            readonly screenY: number;
+        } | {
+            readonly _tag: "ReleasedPointer";
+        };
+    } | {
+        readonly _tag: "MovedPointer";
+        readonly screenX: number;
+        readonly screenY: number;
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeIndex: Option.Option<number>;
+    } | {
+        readonly _tag: "PressedEscape";
+    } | {
+        readonly _tag: "PressedGripKey";
+        readonly itemId: string;
+        readonly items: readonly {
+            readonly id: string;
+            readonly label: string;
+        }[];
+    } | {
+        readonly _tag: "PressedItem";
+        readonly itemId: string;
+        readonly pointerId: number;
+        readonly screenX: number;
+        readonly screenY: number;
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly items: readonly {
+            readonly id: string;
+            readonly label: string;
+        }[];
+    } | {
+        readonly _tag: "ReleasedPointer";
+        readonly screenX: number;
+        readonly screenY: number;
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeIndex: Option.Option<number>;
+    }, Readonly<{
+        maybeDependencies: Option.Option<{
+            readonly isDragging: boolean;
+            readonly clientY: number;
+        }>;
+    }>, never>;
+    readonly keyboard: Subscription.Subscription<{
+        readonly dragAndDrop: {
+            readonly id: string;
+            readonly orientation: "Horizontal" | "Vertical";
+            readonly activationThreshold: number;
+            readonly dragState: {
+                readonly _tag: "Dragging";
+                readonly itemId: string;
+                readonly sourceContainerId: string;
+                readonly sourceIndex: number;
+                readonly origin: {
+                    readonly screenX: number;
+                    readonly screenY: number;
+                };
+                readonly current: {
+                    readonly clientX: number;
+                    readonly clientY: number;
+                };
+                readonly maybeDropTarget: Option.Option<{
+                    readonly containerId: string;
+                    readonly index: number;
+                }>;
+            } | {
+                readonly _tag: "Idle";
+            } | {
+                readonly _tag: "KeyboardDragging";
+                readonly itemId: string;
+                readonly sourceContainerId: string;
+                readonly sourceIndex: number;
+                readonly targetContainerId: string;
+                readonly targetIndex: number;
+            } | {
+                readonly _tag: "Pending";
+                readonly itemId: string;
+                readonly containerId: string;
+                readonly index: number;
+                readonly origin: {
+                    readonly screenX: number;
+                    readonly screenY: number;
+                };
+            };
+        };
+        readonly isMovable: boolean;
+        readonly maybeHeld: Option.Option<{
+            readonly item: {
+                readonly id: string;
+                readonly label: string;
+            };
+            readonly items: readonly {
+                readonly id: string;
+                readonly label: string;
+            }[];
+            readonly maybePress: Option.Option<{
+                readonly pointerId: number;
+                readonly clientX: number;
+                readonly clientY: number;
+            }>;
+        }>;
+    }, {
+        readonly _tag: "CancelledPointer";
+    } | {
+        readonly _tag: "CompletedAnnounceReorder";
+    } | {
+        readonly _tag: "CompletedSizeLiftedItem";
+    } | {
+        readonly _tag: "GotDragAndDropMessage";
+        readonly message: {
+            readonly _tag: "ActivatedKeyboardDrag";
+            readonly itemId: string;
+            readonly containerId: string;
+            readonly index: number;
+        } | {
+            readonly _tag: "AdvancedAutoScrollFrame";
+        } | {
+            readonly _tag: "CancelledDrag";
+        } | {
+            readonly _tag: "CompletedFocusItem";
+        } | {
+            readonly _tag: "CompletedResolveKeyboardMove";
+            readonly targetContainerId: string;
+            readonly targetIndex: number;
+        } | {
+            readonly _tag: "ConfirmedKeyboardDrop";
+        } | {
+            readonly _tag: "MovedPointer";
+            readonly screenX: number;
+            readonly screenY: number;
+            readonly clientX: number;
+            readonly clientY: number;
+            readonly maybeDropTarget: Option.Option<{
+                readonly containerId: string;
+                readonly index: number;
+            }>;
+        } | {
+            readonly _tag: "PressedArrowKey";
+            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
+        } | {
+            readonly _tag: "PressedDraggable";
+            readonly itemId: string;
+            readonly containerId: string;
+            readonly index: number;
+            readonly screenX: number;
+            readonly screenY: number;
+        } | {
+            readonly _tag: "ReleasedPointer";
+        };
+    } | {
+        readonly _tag: "MovedPointer";
+        readonly screenX: number;
+        readonly screenY: number;
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeIndex: Option.Option<number>;
+    } | {
+        readonly _tag: "PressedEscape";
+    } | {
+        readonly _tag: "PressedGripKey";
+        readonly itemId: string;
+        readonly items: readonly {
+            readonly id: string;
+            readonly label: string;
+        }[];
+    } | {
+        readonly _tag: "PressedItem";
+        readonly itemId: string;
+        readonly pointerId: number;
+        readonly screenX: number;
+        readonly screenY: number;
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly items: readonly {
+            readonly id: string;
+            readonly label: string;
+        }[];
+    } | {
+        readonly _tag: "ReleasedPointer";
+        readonly screenX: number;
+        readonly screenY: number;
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeIndex: Option.Option<number>;
+    }, Readonly<{
+        maybeDependencies: Option.Option<{
+            readonly dragActivity: "Active" | "Idle";
+        }>;
+    }>, never>;
+} extends infer T ? { readonly [Key in keyof T as `${Prefix}${Capitalize<Key>}`]: T[Key]; } : never;
+/** 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 declare const SizeLiftedItem: Mount.MountDefinitionWithArgs<"SizeLiftedItem", {
+    itemHook: Schema.String;
+    pressX: Schema.Number;
+    pressY: Schema.Number;
+}, {
+    readonly _tag: "CompletedSizeLiftedItem";
+}>;
+/** How the items lay out: a column of rows, or tiles that wrap. */
+export type Layout = "List" | "Grid";
+/** What the list hands `toItemView` for each item. */
+export type ItemRender = Readonly<{
+    /** This render is the held copy: hidden from screen readers and inert. Leave out ids and
+     *  anything the page must find once. */
+    isLifted: boolean;
+}>;
+/** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. The `to*` members
+ *  are functions because they may carry the parent's handlers. */
+export type ViewInputs = Readonly<{
+    items: ReadonlyArray<Item>;
+    /** Names the list for screen readers. */
+    label: string;
+    /** `"List"` (the default): rows between 1px rules, for a flush panel. `"Grid"`: tiles that
+     *  wrap, 180px and up. */
+    layout?: Layout;
+    /** One item's content, beside its grip. Also called for the held copy, with
+     *  `render.isLifted`. */
+    toItemView: (item: Item, render: ItemRender) => ReadonlyArray<Html>;
+}>;
+/**
+ * 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 declare const view: import("foldkit/submodel").View<{
+    readonly dragAndDrop: {
+        readonly id: string;
+        readonly orientation: "Horizontal" | "Vertical";
+        readonly activationThreshold: number;
+        readonly dragState: {
+            readonly _tag: "Dragging";
+            readonly itemId: string;
+            readonly sourceContainerId: string;
+            readonly sourceIndex: number;
+            readonly origin: {
+                readonly screenX: number;
+                readonly screenY: number;
+            };
+            readonly current: {
+                readonly clientX: number;
+                readonly clientY: number;
+            };
+            readonly maybeDropTarget: Option.Option<{
+                readonly containerId: string;
+                readonly index: number;
+            }>;
+        } | {
+            readonly _tag: "Idle";
+        } | {
+            readonly _tag: "KeyboardDragging";
+            readonly itemId: string;
+            readonly sourceContainerId: string;
+            readonly sourceIndex: number;
+            readonly targetContainerId: string;
+            readonly targetIndex: number;
+        } | {
+            readonly _tag: "Pending";
+            readonly itemId: string;
+            readonly containerId: string;
+            readonly index: number;
+            readonly origin: {
+                readonly screenX: number;
+                readonly screenY: number;
+            };
+        };
+    };
+    readonly isMovable: boolean;
+    readonly maybeHeld: Option.Option<{
+        readonly item: {
+            readonly id: string;
+            readonly label: string;
+        };
+        readonly items: readonly {
+            readonly id: string;
+            readonly label: string;
+        }[];
+        readonly maybePress: Option.Option<{
+            readonly pointerId: number;
+            readonly clientX: number;
+            readonly clientY: number;
+        }>;
+    }>;
+}, {
+    readonly _tag: "CancelledPointer";
+} | {
+    readonly _tag: "CompletedAnnounceReorder";
+} | {
+    readonly _tag: "CompletedSizeLiftedItem";
+} | {
+    readonly _tag: "GotDragAndDropMessage";
+    readonly message: {
+        readonly _tag: "ActivatedKeyboardDrag";
+        readonly itemId: string;
+        readonly containerId: string;
+        readonly index: number;
+    } | {
+        readonly _tag: "AdvancedAutoScrollFrame";
+    } | {
+        readonly _tag: "CancelledDrag";
+    } | {
+        readonly _tag: "CompletedFocusItem";
+    } | {
+        readonly _tag: "CompletedResolveKeyboardMove";
+        readonly targetContainerId: string;
+        readonly targetIndex: number;
+    } | {
+        readonly _tag: "ConfirmedKeyboardDrop";
+    } | {
+        readonly _tag: "MovedPointer";
+        readonly screenX: number;
+        readonly screenY: number;
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeDropTarget: Option.Option<{
+            readonly containerId: string;
+            readonly index: number;
+        }>;
+    } | {
+        readonly _tag: "PressedArrowKey";
+        readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
+    } | {
+        readonly _tag: "PressedDraggable";
+        readonly itemId: string;
+        readonly containerId: string;
+        readonly index: number;
+        readonly screenX: number;
+        readonly screenY: number;
+    } | {
+        readonly _tag: "ReleasedPointer";
+    };
+} | {
+    readonly _tag: "MovedPointer";
+    readonly screenX: number;
+    readonly screenY: number;
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly maybeIndex: Option.Option<number>;
+} | {
+    readonly _tag: "PressedEscape";
+} | {
+    readonly _tag: "PressedGripKey";
+    readonly itemId: string;
+    readonly items: readonly {
+        readonly id: string;
+        readonly label: string;
+    }[];
+} | {
+    readonly _tag: "PressedItem";
+    readonly itemId: string;
+    readonly pointerId: number;
+    readonly screenX: number;
+    readonly screenY: number;
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly items: readonly {
+        readonly id: string;
+        readonly label: string;
+    }[];
+} | {
+    readonly _tag: "ReleasedPointer";
+    readonly screenX: number;
+    readonly screenY: number;
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly maybeIndex: Option.Option<number>;
+}, Readonly<{
+    items: ReadonlyArray<Item>;
+    /** Names the list for screen readers. */
+    label: string;
+    /** `"List"` (the default): rows between 1px rules, for a flush panel. `"Grid"`: tiles that
+     *  wrap, 180px and up. */
+    layout?: Layout;
+    /** One item's content, beside its grip. Also called for the held copy, with
+     *  `render.isLifted`. */
+    toItemView: (item: Item, render: ItemRender) => ReadonlyArray<Html>;
+}>>;
+export {};
+//# sourceMappingURL=sortable.d.ts.map