@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.1

package/dist/board/board.d.ts

@@ -0,0 +1,1151 @@
+import { Attributes } from "../attributes/attributes.js";
+import { Effect, Option, Schema } from "effect";
+import * as Command from "foldkit/command";
+import { ChildAttribute, Html, HtmlBuilder } from "foldkit/html";
+import "foldkit/mount";
+import * as Subscription from "foldkit/subscription";
+import * as Update from "foldkit/update";
+/** Schema for one card as the board knows it: its id, unique across the board, and its name
+ *  in words, which the grip and screen readers use. */
+export declare const Card: Schema.Struct<{
+  readonly id: Schema.String;
+  readonly label: Schema.String;
+}>;
+export type Card = typeof Card.Type;
+/** Schema for one column: its id, its title, and its cards in order. */
+export declare const Column: Schema.Struct<{
+  readonly id: Schema.String;
+  readonly title: Schema.String;
+  readonly cards: Schema.$Array<Schema.Struct<{
+    readonly id: Schema.String;
+    readonly label: Schema.String;
+  }>>;
+}>;
+export type Column = typeof Column.Type;
+/** Schema for a board: the `@foldkit/ui` DragAndDrop it moves cards with, and what it keeps
+ *  while a card is held. The cards and columns are the parent's. */
+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 card: Schema.Struct<{
+      readonly id: Schema.String;
+      readonly label: Schema.String;
+    }>;
+    readonly columnsAtPress: Schema.$Array<Schema.Struct<{
+      readonly id: Schema.String;
+      readonly title: Schema.String;
+      readonly cards: Schema.$Array<Schema.Struct<{
+        readonly id: Schema.String;
+        readonly label: Schema.String;
+      }>>;
+    }>>;
+    readonly maybePressPoint: Schema.Option<Schema.Struct<{
+      readonly clientX: Schema.Finite;
+      readonly clientY: Schema.Finite;
+    }>>;
+  }>>;
+}>;
+export type Model = typeof Model.Type;
+/** Union of all Messages a board 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 PressedCard: {
+    cardId: Schema.String;
+    spot: Schema.Literals<readonly ["Body", "Grip"]>;
+    pointerType: Schema.String;
+    screenX: Schema.Finite;
+    screenY: Schema.Finite;
+    clientX: Schema.Finite;
+    clientY: Schema.Finite;
+    columnsAtPress: Schema.$Array<Schema.Struct<{
+      readonly id: Schema.String;
+      readonly title: Schema.String;
+      readonly cards: Schema.$Array<Schema.Struct<{
+        readonly id: Schema.String;
+        readonly label: Schema.String;
+      }>>;
+    }>>;
+  };
+  readonly PressedGripKey: {
+    cardId: Schema.String;
+    columnsAtPress: Schema.$Array<Schema.Struct<{
+      readonly id: Schema.String;
+      readonly title: Schema.String;
+      readonly cards: Schema.$Array<Schema.Struct<{
+        readonly id: Schema.String;
+        readonly label: Schema.String;
+      }>>;
+    }>>;
+  };
+  readonly PressedEscape: {};
+  readonly CompletedAnnounceMove: {};
+  readonly CompletedSizeLiftedCard: {};
+}>;
+export type Message = typeof Message.Type;
+/**
+ * Union of OutMessages a board reports.
+ *
+ * - `Moved`: a card was dropped somewhere new. `toIndex` is its place among the destination
+ *   column's other cards; `maybeAfterCardId` and `maybeBeforeCardId` name the cards it now
+ *   sits between, the anchors a list that orders by neighbours needs. A drop where the card
+ *   already was, over no column, or while cards may not move reports nothing. The parent
+ *   moves the item (or decides not to): the data is its own.
+ * - `SelectedCard`: a primary press on a card's body, not on a control inside it (an input,
+ *   a link, a button other than the title, `[data-no-lift]`) nor its grip.
+ */
+export declare const OutMessage: import("foldkit/message").MessageUnion<{
+  readonly Moved: {
+    cardId: Schema.String;
+    fromColumnId: Schema.String;
+    fromIndex: Schema.Finite;
+    toColumnId: Schema.String;
+    toIndex: Schema.Finite;
+    maybeAfterCardId: Schema.Option<Schema.String>;
+    maybeBeforeCardId: Schema.Option<Schema.String>;
+  };
+  readonly SelectedCard: {
+    cardId: Schema.String;
+  };
+}>;
+export type OutMessage = typeof OutMessage.Type;
+/** Configuration for creating a board with `init`. The `id` must be unique in the document;
+ *  the board's DOM hooks are scoped by it, so two boards on a page keep to their own cards. */
+export type InitConfig = Readonly<{
+  id: string;
+}>;
+/** Creates a board with nothing held. */
+export declare const init: (config: InitConfig) => Model;
+/** The board's id, unique in the document. */
+export declare const id: (model: Model) => string;
+/** Says a step of a move through the page's live region (as `Announcer.Announce` does), which is
+ *  inside the topmost open dialog when there is one. */
+export declare const AnnounceMove: Command.CommandDefinitionWithArgs<"AnnounceMove", {
+  text: Schema.String;
+}, Effect.Effect<{
+  readonly _tag: "CompletedAnnounceMove";
+}, never, never>>;
+type UpdateReturn = Update.ReturnWithOutMessage<Model, Message, OutMessage>;
+/**
+ * Puts a pressed or held card back where it was, says so, and reports no move. A keyboard
+ * move hands focus back to the card's grip. Call it when the layout changes under the board.
+ */
+export declare const cancel: (model: Model) => UpdateReturn;
+/** Processes a board 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 maybeHeld: Option.Option<{
+      readonly card: {
+        readonly id: string;
+        readonly label: string;
+      };
+      readonly columnsAtPress: readonly {
+        readonly id: string;
+        readonly title: string;
+        readonly cards: readonly {
+          readonly id: string;
+          readonly label: string;
+        }[];
+      }[];
+      readonly maybePressPoint: Option.Option<{
+        readonly clientX: number;
+        readonly clientY: number;
+      }>;
+    }>;
+  };
+  commands?: Update.Commands<{
+    readonly _tag: "CompletedAnnounceMove";
+  } | {
+    readonly _tag: "CompletedSizeLiftedCard";
+  } | {
+    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: "PressedCard";
+    readonly cardId: string;
+    readonly spot: "Body" | "Grip";
+    readonly pointerType: string;
+    readonly screenX: number;
+    readonly screenY: number;
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly columnsAtPress: readonly {
+      readonly id: string;
+      readonly title: string;
+      readonly cards: readonly {
+        readonly id: string;
+        readonly label: string;
+      }[];
+    }[];
+  } | {
+    readonly _tag: "PressedEscape";
+  } | {
+    readonly _tag: "PressedGripKey";
+    readonly cardId: string;
+    readonly columnsAtPress: readonly {
+      readonly id: string;
+      readonly title: string;
+      readonly cards: readonly {
+        readonly id: string;
+        readonly label: string;
+      }[];
+    }[];
+  }, never>;
+  outMessage?: {
+    readonly _tag: "Moved";
+    readonly cardId: string;
+    readonly fromColumnId: string;
+    readonly fromIndex: number;
+    readonly toColumnId: string;
+    readonly toIndex: number;
+    readonly maybeAfterCardId: Option.Option<string>;
+    readonly maybeBeforeCardId: Option.Option<string>;
+  } | {
+    readonly _tag: "SelectedCard";
+    readonly cardId: string;
+  };
+}>;
+/** A held card follows the pointer, the arrows and Space move and drop it, Escape puts it
+ *  back and the page scrolls near its edges, all from listeners that run only while a card is
+ *  pressed or held. Lift them into the application's Subscriptions, once per board, with a
+ *  key prefix of the parent's that no other record on the page uses:
+ *  `subscriptions("queueBoard")` is keyed `queueBoardEscape`, `queueBoardPointer`,
+ *  `queueBoardKeyboard` and `queueBoardAutoScroll`, so two boards (or a board beside another
+ *  DragAndDrop user) aggregate side by side. */
+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 maybeHeld: Option.Option<{
+      readonly card: {
+        readonly id: string;
+        readonly label: string;
+      };
+      readonly columnsAtPress: readonly {
+        readonly id: string;
+        readonly title: string;
+        readonly cards: readonly {
+          readonly id: string;
+          readonly label: string;
+        }[];
+      }[];
+      readonly maybePressPoint: Option.Option<{
+        readonly clientX: number;
+        readonly clientY: number;
+      }>;
+    }>;
+  }, {
+    readonly _tag: "CompletedAnnounceMove";
+  } | {
+    readonly _tag: "CompletedSizeLiftedCard";
+  } | {
+    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: "PressedCard";
+    readonly cardId: string;
+    readonly spot: "Body" | "Grip";
+    readonly pointerType: string;
+    readonly screenX: number;
+    readonly screenY: number;
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly columnsAtPress: readonly {
+      readonly id: string;
+      readonly title: string;
+      readonly cards: readonly {
+        readonly id: string;
+        readonly label: string;
+      }[];
+    }[];
+  } | {
+    readonly _tag: "PressedEscape";
+  } | {
+    readonly _tag: "PressedGripKey";
+    readonly cardId: string;
+    readonly columnsAtPress: readonly {
+      readonly id: string;
+      readonly title: string;
+      readonly cards: readonly {
+        readonly id: string;
+        readonly label: string;
+      }[];
+    }[];
+  }, {
+    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: "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 maybeHeld: Option.Option<{
+      readonly card: {
+        readonly id: string;
+        readonly label: string;
+      };
+      readonly columnsAtPress: readonly {
+        readonly id: string;
+        readonly title: string;
+        readonly cards: readonly {
+          readonly id: string;
+          readonly label: string;
+        }[];
+      }[];
+      readonly maybePressPoint: Option.Option<{
+        readonly clientX: number;
+        readonly clientY: number;
+      }>;
+    }>;
+  }, {
+    readonly _tag: "CompletedAnnounceMove";
+  } | {
+    readonly _tag: "CompletedSizeLiftedCard";
+  } | {
+    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: "PressedCard";
+    readonly cardId: string;
+    readonly spot: "Body" | "Grip";
+    readonly pointerType: string;
+    readonly screenX: number;
+    readonly screenY: number;
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly columnsAtPress: readonly {
+      readonly id: string;
+      readonly title: string;
+      readonly cards: readonly {
+        readonly id: string;
+        readonly label: string;
+      }[];
+    }[];
+  } | {
+    readonly _tag: "PressedEscape";
+  } | {
+    readonly _tag: "PressedGripKey";
+    readonly cardId: string;
+    readonly columnsAtPress: readonly {
+      readonly id: string;
+      readonly title: string;
+      readonly cards: readonly {
+        readonly id: string;
+        readonly label: string;
+      }[];
+    }[];
+  }, 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 maybeHeld: Option.Option<{
+      readonly card: {
+        readonly id: string;
+        readonly label: string;
+      };
+      readonly columnsAtPress: readonly {
+        readonly id: string;
+        readonly title: string;
+        readonly cards: readonly {
+          readonly id: string;
+          readonly label: string;
+        }[];
+      }[];
+      readonly maybePressPoint: Option.Option<{
+        readonly clientX: number;
+        readonly clientY: number;
+      }>;
+    }>;
+  }, {
+    readonly _tag: "CompletedAnnounceMove";
+  } | {
+    readonly _tag: "CompletedSizeLiftedCard";
+  } | {
+    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: "PressedCard";
+    readonly cardId: string;
+    readonly spot: "Body" | "Grip";
+    readonly pointerType: string;
+    readonly screenX: number;
+    readonly screenY: number;
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly columnsAtPress: readonly {
+      readonly id: string;
+      readonly title: string;
+      readonly cards: readonly {
+        readonly id: string;
+        readonly label: string;
+      }[];
+    }[];
+  } | {
+    readonly _tag: "PressedEscape";
+  } | {
+    readonly _tag: "PressedGripKey";
+    readonly cardId: string;
+    readonly columnsAtPress: readonly {
+      readonly id: string;
+      readonly title: string;
+      readonly cards: readonly {
+        readonly id: string;
+        readonly label: string;
+      }[];
+    }[];
+  }, Readonly<{
+    maybeDependencies: Option.Option<{
+      readonly dragActivity: "Active" | "Idle";
+    }>;
+  }>, never>;
+  readonly pointer: 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 maybeHeld: Option.Option<{
+      readonly card: {
+        readonly id: string;
+        readonly label: string;
+      };
+      readonly columnsAtPress: readonly {
+        readonly id: string;
+        readonly title: string;
+        readonly cards: readonly {
+          readonly id: string;
+          readonly label: string;
+        }[];
+      }[];
+      readonly maybePressPoint: Option.Option<{
+        readonly clientX: number;
+        readonly clientY: number;
+      }>;
+    }>;
+  }, {
+    readonly _tag: "CompletedAnnounceMove";
+  } | {
+    readonly _tag: "CompletedSizeLiftedCard";
+  } | {
+    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: "PressedCard";
+    readonly cardId: string;
+    readonly spot: "Body" | "Grip";
+    readonly pointerType: string;
+    readonly screenX: number;
+    readonly screenY: number;
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly columnsAtPress: readonly {
+      readonly id: string;
+      readonly title: string;
+      readonly cards: readonly {
+        readonly id: string;
+        readonly label: string;
+      }[];
+    }[];
+  } | {
+    readonly _tag: "PressedEscape";
+  } | {
+    readonly _tag: "PressedGripKey";
+    readonly cardId: string;
+    readonly columnsAtPress: readonly {
+      readonly id: string;
+      readonly title: string;
+      readonly cards: readonly {
+        readonly id: string;
+        readonly label: string;
+      }[];
+    }[];
+  }, Readonly<{
+    maybeDependencies: Option.Option<{
+      readonly dragActivity: "Active" | "Idle";
+      readonly orientation: "Horizontal" | "Vertical";
+    }>;
+  }>, never>;
+} extends (infer T) ? { readonly [Key in keyof T as `${Prefix}${Capitalize<Key>}`]: T[Key]; } : never;
+/** What the board hands `toCardView` for each card. Pass it to `cardView` as `render`. */
+export type CardRender = Readonly<{
+  /** For the card's root: the press that selects it, and lifts it under a mouse. */
+  attributes: readonly ChildAttribute[];
+  /** Cards may move: the card prints the grab cursor (`movable`). False on the held copy. */
+  isMovable: boolean;
+  /** The card is the one held: it dims in place (`drag-dim`). */
+  isHeld: boolean;
+  /** The grip, last in the meta row: a quiet glyph button named "Move <label>" that touch and
+   *  the keyboard take. */
+  grip: readonly Html[];
+  /** This render is the held copy (`lifted`): hidden from screen readers and inert, taking
+   *  none of the caller's attributes. */
+  isLifted: boolean;
+}>;
+/** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. The `to*`
+ *  members are functions because a Submodel's viewInputs may hold functions only at the top
+ *  level: Foldkit runs them in the parent's boundary, so handlers in what they return
+ *  dispatch the parent's Messages. */
+export type ViewInputs = Readonly<{
+  columns: readonly Column[];
+  /** Renders one card, usually with `Board.cardView`. It is also called for the held copy,
+   *  with `render.isLifted`. */
+  toCardView: (card: Card, render: CardRender) => Html;
+  /** What a column holding nothing prints, usually an EmptyState. */
+  toEmptyView?: (column: Column) => readonly Html[];
+}>;
+/** Configuration for rendering one card with `cardView`. */
+export type CardViewConfig<ParentMessage> = Readonly<{
+  /** What the board handed `toCardView`. */
+  render: CardRender;
+  title: string;
+  /** Opens the item: the title is its button. */
+  onOpen?: ParentMessage;
+  /** Shown in the title's place while the card's title is edited, such as an `InlineInput`
+   *  and its `errorView`. The held copy shows `title`. */
+  editor?: ReadonlyArray<Html | string>;
+  /** The meta row under the title: a mark, a tag, a chip; `span.gap` pushes what follows
+   *  right. A press on a control here neither selects nor lifts the card. */
+  meta?: ReadonlyArray<Html | string>;
+  /** Further attributes for the card (an id, `aria-current`), never a class. The held copy
+   *  takes none of them. */
+  attributes?: Attributes<ParentMessage>;
+}>;
+/**
+ * One card on the board, from what the board handed `toCardView`: `article.board-card`, a
+ * paper slip on the 3px print shadow, its title a two-line `button.title` (or `span.title`
+ * without `onOpen`, or the `editor` while the title is edited) over `div.meta-row`, which
+ * ends in the grip. Spread
+ * `aria-current="true"` through `attributes` for the board's cursor, which prints inverted.
+ */
+export declare const cardView: <ParentMessage>(config: CardViewConfig<ParentMessage>, h: HtmlBuilder<ParentMessage>) => Html;
+/**
+ * Columns of printed slips, one panel per column (one column on narrow screens), built on
+ * `@foldkit/ui`'s DragAndDrop: `div.board` of `div.board-col`, each a `section.panel` titled
+ * by its column and holding `ul.board-cards`. The cards are the parent's; each renders
+ * through `toCardView`, usually with `cardView`.
+ *
+ * A press on a card's body reports `SelectedCard`. While cards may move, a mouse drags a slip
+ * (a press that moves under 5px stays a click), and touch and the keyboard take its grip:
+ * Space or Enter picks the card up, every arrow jumps it one column in reading order, Space
+ * drops it at the top of that column and Escape puts it back. A press on a control inside a
+ * card does neither. The held card dims in place, a lifted copy follows the pointer, the
+ * receiving column is outlined, and each step is said through the page's live region. A drop
+ * reports `Moved`; lift `subscriptions(keyPrefix)` into the application's, or nothing
+ * follows the pointer or the keys.
+ */
+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 maybeHeld: Option.Option<{
+    readonly card: {
+      readonly id: string;
+      readonly label: string;
+    };
+    readonly columnsAtPress: readonly {
+      readonly id: string;
+      readonly title: string;
+      readonly cards: readonly {
+        readonly id: string;
+        readonly label: string;
+      }[];
+    }[];
+    readonly maybePressPoint: Option.Option<{
+      readonly clientX: number;
+      readonly clientY: number;
+    }>;
+  }>;
+}, {
+  readonly _tag: "CompletedAnnounceMove";
+} | {
+  readonly _tag: "CompletedSizeLiftedCard";
+} | {
+  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: "PressedCard";
+  readonly cardId: string;
+  readonly spot: "Body" | "Grip";
+  readonly pointerType: string;
+  readonly screenX: number;
+  readonly screenY: number;
+  readonly clientX: number;
+  readonly clientY: number;
+  readonly columnsAtPress: readonly {
+    readonly id: string;
+    readonly title: string;
+    readonly cards: readonly {
+      readonly id: string;
+      readonly label: string;
+    }[];
+  }[];
+} | {
+  readonly _tag: "PressedEscape";
+} | {
+  readonly _tag: "PressedGripKey";
+  readonly cardId: string;
+  readonly columnsAtPress: readonly {
+    readonly id: string;
+    readonly title: string;
+    readonly cards: readonly {
+      readonly id: string;
+      readonly label: string;
+    }[];
+  }[];
+}, Readonly<{
+  columns: readonly Column[];
+  /** Renders one card, usually with `Board.cardView`. It is also called for the held copy,
+   *  with `render.isLifted`. */
+  toCardView: (card: Card, render: CardRender) => Html;
+  /** What a column holding nothing prints, usually an EmptyState. */
+  toEmptyView?: (column: Column) => readonly Html[];
+}>>;
+export {};