@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.0

package/dist/sortable/sortable.d.ts

@@ -0,0 +1,1125 @@
+import { Effect, Option, Schema } from "effect";
+import * as Command from "foldkit/command";
+import { Html } from "foldkit/html";
+import "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, 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 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.Finite;
+      readonly clientX: Schema.Finite;
+      readonly clientY: Schema.Finite;
+    }>>;
+  }>>;
+}>;
+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.Finite;
+    screenX: Schema.Finite;
+    screenY: Schema.Finite;
+    clientX: Schema.Finite;
+    clientY: Schema.Finite;
+    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.Finite;
+    screenY: Schema.Finite;
+    clientX: Schema.Finite;
+    clientY: Schema.Finite;
+    maybeIndex: Schema.Option<Schema.Finite>;
+  };
+  readonly ReleasedPointer: {
+    screenX: Schema.Finite;
+    screenY: Schema.Finite;
+    clientX: Schema.Finite;
+    clientY: Schema.Finite;
+    maybeIndex: Schema.Option<Schema.Finite>;
+  };
+  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.Finite;
+    toIndex: Schema.Finite;
+    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 with nothing held. */
+export declare const init: (config: InitConfig) => Model;
+/** 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>>;
+/** 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: "Idle";
+      } | {
+        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: "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 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: "CompletedAnnounceReorder";
+  } | {
+    readonly _tag: "CancelledPointer";
+  } | {
+    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>;
+  };
+}>;
+/** 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 pointer: Subscription.EntryWithoutKeepAlive<{
+    readonly dragAndDrop: {
+      readonly id: string;
+      readonly orientation: "Horizontal" | "Vertical";
+      readonly activationThreshold: number;
+      readonly dragState: {
+        readonly _tag: "Idle";
+      } | {
+        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: "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 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: "CompletedAnnounceReorder";
+  } | {
+    readonly _tag: "CancelledPointer";
+  } | {
+    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 escape: Subscription.EntryWithoutKeepAlive<{
+    readonly dragAndDrop: {
+      readonly id: string;
+      readonly orientation: "Horizontal" | "Vertical";
+      readonly activationThreshold: number;
+      readonly dragState: {
+        readonly _tag: "Idle";
+      } | {
+        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: "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 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: "CompletedAnnounceReorder";
+  } | {
+    readonly _tag: "CancelledPointer";
+  } | {
+    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 autoScroll: Subscription.Subscription<{
+    readonly dragAndDrop: {
+      readonly id: string;
+      readonly orientation: "Horizontal" | "Vertical";
+      readonly activationThreshold: number;
+      readonly dragState: {
+        readonly _tag: "Idle";
+      } | {
+        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: "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 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: "CompletedAnnounceReorder";
+  } | {
+    readonly _tag: "CancelledPointer";
+  } | {
+    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: "Idle";
+      } | {
+        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: "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 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: "CompletedAnnounceReorder";
+  } | {
+    readonly _tag: "CancelledPointer";
+  } | {
+    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;
+/** How the items lay out: a column of rows, tiles that wrap, or the parent's own panels. */
+export type Layout = "List" | "Grid" | "Panels";
+/** 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;
+  /** The item's grip, for the `"Panels"` layout, where the item places it: in its panel's
+   *  `lead`. The other layouts print it before the item themselves. */
+  grip: Html;
+}>;
+/** 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: readonly 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. `"Panels"`: each item is a Panel the parent prints, with `render.grip`
+   *  in its `lead`, up to three across in the deck's gutter, 300px and up. */
+  layout?: Layout;
+  /** The reader may look but not reorder, as a read-only sign-in: every grip prints held, as
+   *  while moves are held, and nothing lifts. */
+  isReadOnly?: boolean;
+  /** One item's content, beside its grip. Also called for the held copy, with
+   *  `render.isLifted`. */
+  toItemView: (item: Item, render: ItemRender) => readonly Html[];
+}>;
+/**
+ * Items the reader puts in order, as rows, as tiles or as panels, built on `@foldkit/ui`'s
+ * DragAndDrop: `div.sortable` holding `ul.sortable-items` (named by `label`) of
+ * `li.sortable-item`, each its grip and the parent's content (a panel holds its grip in its
+ * title bar). The items are the parent's; a drop reports `Moved`.
+ *
+ * Only the grip lifts an item, under every pointer, so the item's own text selects and a
+ * finger on it scrolls the page; the keyboard takes the grip too: Space or Enter picks the
+ * item up, every arrow moves it one place in reading order, Space drops it and Escape puts it back.
+ * The held item dims in place; a copy, lifted onto the card shadow, follows the pointer or
+ * prints where the keyboard would drop it; each step is said through the page's live region.
+ * Lift `subscriptions(keyPrefix)` into the application's, or nothing follows the pointer or
+ * the keys.
+ */
+export declare const view: import("foldkit/submodel").View<{
+  readonly dragAndDrop: {
+    readonly id: string;
+    readonly orientation: "Horizontal" | "Vertical";
+    readonly activationThreshold: number;
+    readonly dragState: {
+      readonly _tag: "Idle";
+    } | {
+      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: "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 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: "CompletedAnnounceReorder";
+} | {
+  readonly _tag: "CancelledPointer";
+} | {
+  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: readonly 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. `"Panels"`: each item is a Panel the parent prints, with `render.grip`
+   *  in its `lead`, up to three across in the deck's gutter, 300px and up. */
+  layout?: Layout;
+  /** The reader may look but not reorder, as a read-only sign-in: every grip prints held, as
+   *  while moves are held, and nothing lifts. */
+  isReadOnly?: boolean;
+  /** One item's content, beside its grip. Also called for the held copy, with
+   *  `render.isLifted`. */
+  toItemView: (item: Item, render: ItemRender) => readonly Html[];
+}>>;