@gjermundgaraba-designs/pixel-paper 0.18.0 → 0.20.0

package/dist/src/reel/reel.d.ts

@@ -0,0 +1,1158 @@
+import { Effect, Option, Schema } 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 type * as Update from "foldkit/update";
+import { type Layout, OutMessage, type Pane } from "./layout.ts";
+/** Schema for a reel: its id, the focused pane, what is held and a splitter being dragged. All
+ *  of it is this client's; the layout is the application's. */
+export declare const Model: Schema.Struct<{
+    readonly id: Schema.String;
+    readonly maybeFocus: Schema.Option<Schema.Struct<{
+        readonly paneId: Schema.String;
+        readonly column: Schema.Number;
+        readonly row: Schema.Number;
+    }>>;
+    readonly maybeHeld: Schema.Option<Schema.Struct<{
+        readonly subject: import("foldkit/schema").TaggedUnion<{
+            readonly Pane: {
+                paneId: Schema.String;
+            };
+            readonly Column: {
+                columnId: Schema.String;
+            };
+        }>;
+        readonly by: import("foldkit/schema").TaggedUnion<{
+            readonly Pointer: {
+                pointerId: Schema.Number;
+                pressX: Schema.Number;
+                pressY: Schema.Number;
+                x: Schema.Number;
+                y: Schema.Number;
+                isCarrying: Schema.Boolean;
+            };
+            readonly Keyboard: {};
+        }>;
+        readonly maybeTarget: Schema.Option<import("foldkit/schema").TaggedUnion<{
+            readonly Into: {
+                columnId: Schema.String;
+                index: Schema.Number;
+            };
+            readonly Gap: {
+                maybeBeforeColumnId: Schema.Option<Schema.String>;
+            };
+        }>>;
+    }>>;
+    readonly maybeResizing: Schema.Option<Schema.Struct<{
+        readonly splitter: import("foldkit/schema").TaggedUnion<{
+            readonly Width: {
+                columnId: Schema.String;
+            };
+            readonly Split: {
+                abovePaneId: Schema.String;
+            };
+        }>;
+        readonly pointerId: Schema.Number;
+        readonly pressX: Schema.Number;
+        readonly pressY: Schema.Number;
+        readonly maybeResize: Schema.Option<Schema.Union<readonly [import("foldkit/schema").CallableTaggedStruct<"ResizedColumn", {
+            readonly columnId: Schema.String;
+            readonly width: Schema.Number;
+        }>, import("foldkit/schema").CallableTaggedStruct<"ResizedPanes", {
+            readonly columnId: Schema.String;
+            readonly weights: Schema.$Record<Schema.String, Schema.Number>;
+        }>]>>;
+    }>>;
+}>;
+export type Model = typeof Model.Type;
+/** Union of all Messages a reel can produce. */
+export declare const Message: import("foldkit/message").MessageUnion<{
+    readonly PressedGrip: {
+        subject: import("foldkit/schema").TaggedUnion<{
+            readonly Pane: {
+                paneId: Schema.String;
+            };
+            readonly Column: {
+                columnId: Schema.String;
+            };
+        }>;
+        pointerId: Schema.Number;
+        clientX: Schema.Number;
+        clientY: Schema.Number;
+    };
+    readonly PressedGripKey: {
+        subject: import("foldkit/schema").TaggedUnion<{
+            readonly Pane: {
+                paneId: Schema.String;
+            };
+            readonly Column: {
+                columnId: Schema.String;
+            };
+        }>;
+    };
+    readonly MovedPointer: {
+        readonly clientX: Schema.Number;
+        readonly clientY: Schema.Number;
+        readonly maybeTarget: Schema.Option<import("foldkit/schema").TaggedUnion<{
+            readonly Into: {
+                columnId: Schema.String;
+                index: Schema.Number;
+            };
+            readonly Gap: {
+                maybeBeforeColumnId: Schema.Option<Schema.String>;
+            };
+        }>>;
+    };
+    readonly ReleasedPointer: {
+        readonly clientX: Schema.Number;
+        readonly clientY: Schema.Number;
+        readonly maybeTarget: Schema.Option<import("foldkit/schema").TaggedUnion<{
+            readonly Into: {
+                columnId: Schema.String;
+                index: Schema.Number;
+            };
+            readonly Gap: {
+                maybeBeforeColumnId: Schema.Option<Schema.String>;
+            };
+        }>>;
+    };
+    readonly CancelledPointer: {};
+    readonly SteppedHeld: {
+        step: Schema.Literals<readonly ["Up", "Down", "Left", "Right"]>;
+    };
+    readonly DroppedHeld: {};
+    readonly LeftGrip: {};
+    readonly PressedEscape: {};
+    readonly FocusedPane: {
+        paneId: Schema.String;
+    };
+    readonly PressedSplitter: {
+        splitter: import("foldkit/schema").TaggedUnion<{
+            readonly Width: {
+                columnId: Schema.String;
+            };
+            readonly Split: {
+                abovePaneId: Schema.String;
+            };
+        }>;
+        pointerId: Schema.Number;
+        clientX: Schema.Number;
+        clientY: Schema.Number;
+    };
+    readonly MovedSplitter: {
+        share: Schema.Number;
+    };
+    readonly ReleasedSplitter: {
+        share: Schema.Number;
+    };
+    readonly CancelledSplitter: {};
+    readonly PressedSplitterKey: {
+        splitter: import("foldkit/schema").TaggedUnion<{
+            readonly Width: {
+                columnId: Schema.String;
+            };
+            readonly Split: {
+                abovePaneId: Schema.String;
+            };
+        }>;
+        share: Schema.Number;
+    };
+    readonly CompletedAnnounceReel: {};
+    readonly CompletedFocusPane: {};
+    readonly CompletedRestoreFocus: {};
+    readonly CompletedFocusGrip: {};
+    readonly CompletedScrollIntoView: {};
+    readonly CompletedSizeLiftedPane: {};
+}>;
+export type Message = typeof Message.Type;
+/** Configuration for creating a reel with `init`. The `id` must be unique in the document;
+ *  the reel's DOM hooks are scoped by it. */
+export type InitConfig = Readonly<{
+    id: string;
+}>;
+/** Creates a reel focused on its first pane, holding nothing, at rest. */
+export declare const init: (config: InitConfig) => Model;
+/** The pane focus is on: the one last focused, or, when it has gone from `layout`, the pane
+ *  now nearest its place; the first pane before any is focused. None for an empty layout. */
+export declare const focusedPaneId: (model: Model, layout: Layout) => Option.Option<string>;
+/** Says a focus move, a move or a step of a drag through the page's live region (as
+ *  `Announcer.Announce` does). */
+export declare const AnnounceReel: Command.CommandDefinitionWithArgs<"AnnounceReel", {
+    text: Schema.String;
+}, Effect.Effect<{
+    readonly _tag: "CompletedAnnounceReel";
+}, never, never>>;
+/** Focuses the pane `paneHook` names, unless focus is already inside it: the control in it
+ *  marked `data-reel-focus` (a terminal's input), or the pane itself. It does not scroll;
+ *  ScrollIntoView does. */
+export declare const FocusPane: Command.CommandDefinitionWithArgs<"FocusPane", {
+    paneHook: Schema.String;
+}, Effect.Effect<{
+    readonly _tag: "CompletedFocusPane";
+}, never, never>>;
+/** Focuses the pane `paneHook` names only where focus was lost (it left with the pane that
+ *  held it), so focus the reader put somewhere else stays there. */
+export declare const RestoreFocus: Command.CommandDefinitionWithArgs<"RestoreFocus", {
+    paneHook: Schema.String;
+}, Effect.Effect<{
+    readonly _tag: "CompletedRestoreFocus";
+}, never, never>>;
+/** Puts focus back on a column's grip once the render that moved its column is in the page:
+ *  a column's element moves with it, which takes focus off its grip. */
+export declare const FocusGrip: Command.CommandDefinitionWithArgs<"FocusGrip", {
+    gripHook: Schema.String;
+}, Effect.Effect<{
+    readonly _tag: "CompletedFocusGrip";
+}, never, never>>;
+/** Scrolls the pane or column `hook` names into view, by the least distance either way, its
+ *  gutter kept by the stylesheet's `scroll-margin`, once the render that placed it is in the
+ *  page. It jumps: motion is stepped or instant, and a follow is instant. */
+export declare const ScrollIntoView: Command.CommandDefinitionWithArgs<"ScrollIntoView", {
+    hook: Schema.String;
+}, Effect.Effect<{
+    readonly _tag: "CompletedScrollIntoView";
+}, never, never>>;
+/** What the reel reads from its parent as each Message arrives: the layout as the
+ *  application holds it now. */
+export type UpdateContext = Readonly<{
+    layout: Layout;
+}>;
+type UpdateReturn = Update.ReturnWithOutMessage<Model, Message, OutMessage>;
+/** Processes a reel Message against the layout as the application holds it now, and returns
+ *  the next Model, Commands and OutMessage. */
+export declare const update: (model: Model, message: Message, context: UpdateContext) => UpdateReturn;
+/**
+ * Brings the reel in line with a layout that changed: call it whenever the application changes
+ * the layout, by a request it applied, another client's or one of its own (a pane closed). The
+ * focused pane's place is read again; when it has gone, focus moves to the pane now nearest
+ * where it was, and the keyboard follows where it went with the pane. A drag whose pane or
+ * column has gone is cancelled, and one whose target's column has gone aims where it started;
+ * a splitter whose column or pane has gone lets go.
+ */
+export declare const reconcile: (model: Model, context: UpdateContext) => UpdateReturn;
+/** What the application's keys ask of the reel. `Focus*`: focus the pane beside the focused
+ *  one. `MovePane*`: move the focused pane up or down its column, or into the column beside it
+ *  (past the first or last column, into a column of its own). `MoveColumn*`: move its column.
+ *  `CycleWidth`: its column's width to the next preset. `PullOut`: the pane into a column of
+ *  its own, right of its column. */
+export declare const Action: Schema.Literals<readonly ["FocusLeft", "FocusRight", "FocusUp", "FocusDown", "MovePaneLeft", "MovePaneRight", "MovePaneUp", "MovePaneDown", "MoveColumnLeft", "MoveColumnRight", "CycleWidth", "PullOut"]>;
+export type Action = typeof Action.Type;
+/**
+ * Does what the application's key for `action` asks, from the focused pane, against the
+ * layout as the application holds it: focus moves focus the pane and scroll the reel to it;
+ * moves report their request as the OutMessage, which the application applies, with focus
+ * kept on the pane. Each is said through the live region. Nothing happens while something is
+ * held, or where there is nowhere to go.
+ */
+export declare const perform: (model: Model, action: Action, context: UpdateContext) => UpdateReturn;
+/** A held pane or column follows the pointer (the reel scrolling near its edges), a dragged
+ *  splitter resizes, and Escape puts either back, before a dialog or the page sees it, from
+ *  listeners that run only while something is held. Lift them into the application's
+ *  Subscriptions, once per reel, behind a key prefix of the parent's: `subscriptions("tiles")`
+ *  is keyed `tilesPointer`, `tilesEdge`, `tilesResize` and `tilesEscape`. */
+export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) => {
+    readonly pointer: Subscription.EntryWithoutKeepAlive<{
+        readonly id: string;
+        readonly maybeFocus: Option.Option<{
+            readonly paneId: string;
+            readonly column: number;
+            readonly row: number;
+        }>;
+        readonly maybeHeld: Option.Option<{
+            readonly subject: {
+                readonly _tag: "Column";
+                readonly columnId: string;
+            } | {
+                readonly _tag: "Pane";
+                readonly paneId: string;
+            };
+            readonly by: {
+                readonly _tag: "Keyboard";
+            } | {
+                readonly _tag: "Pointer";
+                readonly pointerId: number;
+                readonly pressX: number;
+                readonly pressY: number;
+                readonly x: number;
+                readonly y: number;
+                readonly isCarrying: boolean;
+            };
+            readonly maybeTarget: Option.Option<{
+                readonly _tag: "Gap";
+                readonly maybeBeforeColumnId: Option.Option<string>;
+            } | {
+                readonly _tag: "Into";
+                readonly columnId: string;
+                readonly index: number;
+            }>;
+        }>;
+        readonly maybeResizing: Option.Option<{
+            readonly splitter: {
+                readonly _tag: "Split";
+                readonly abovePaneId: string;
+            } | {
+                readonly _tag: "Width";
+                readonly columnId: string;
+            };
+            readonly pointerId: number;
+            readonly pressX: number;
+            readonly pressY: number;
+            readonly maybeResize: Option.Option<{
+                readonly _tag: "ResizedColumn";
+                readonly columnId: string;
+                readonly width: number;
+            } | {
+                readonly _tag: "ResizedPanes";
+                readonly columnId: string;
+                readonly weights: {
+                    readonly [x: string]: number;
+                };
+            }>;
+        }>;
+    }, {
+        readonly _tag: "PressedEscape";
+    } | {
+        readonly _tag: "CancelledPointer";
+    } | {
+        readonly _tag: "CancelledSplitter";
+    } | {
+        readonly _tag: "CompletedAnnounceReel";
+    } | {
+        readonly _tag: "CompletedFocusGrip";
+    } | {
+        readonly _tag: "CompletedFocusPane";
+    } | {
+        readonly _tag: "CompletedRestoreFocus";
+    } | {
+        readonly _tag: "CompletedScrollIntoView";
+    } | {
+        readonly _tag: "CompletedSizeLiftedPane";
+    } | {
+        readonly _tag: "DroppedHeld";
+    } | {
+        readonly _tag: "FocusedPane";
+        readonly paneId: string;
+    } | {
+        readonly _tag: "LeftGrip";
+    } | {
+        readonly _tag: "MovedPointer";
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeTarget: Option.Option<{
+            readonly _tag: "Gap";
+            readonly maybeBeforeColumnId: Option.Option<string>;
+        } | {
+            readonly _tag: "Into";
+            readonly columnId: string;
+            readonly index: number;
+        }>;
+    } | {
+        readonly _tag: "MovedSplitter";
+        readonly share: number;
+    } | {
+        readonly _tag: "PressedGrip";
+        readonly subject: {
+            readonly _tag: "Column";
+            readonly columnId: string;
+        } | {
+            readonly _tag: "Pane";
+            readonly paneId: string;
+        };
+        readonly pointerId: number;
+        readonly clientX: number;
+        readonly clientY: number;
+    } | {
+        readonly _tag: "PressedGripKey";
+        readonly subject: {
+            readonly _tag: "Column";
+            readonly columnId: string;
+        } | {
+            readonly _tag: "Pane";
+            readonly paneId: string;
+        };
+    } | {
+        readonly _tag: "PressedSplitter";
+        readonly splitter: {
+            readonly _tag: "Split";
+            readonly abovePaneId: string;
+        } | {
+            readonly _tag: "Width";
+            readonly columnId: string;
+        };
+        readonly pointerId: number;
+        readonly clientX: number;
+        readonly clientY: number;
+    } | {
+        readonly _tag: "PressedSplitterKey";
+        readonly splitter: {
+            readonly _tag: "Split";
+            readonly abovePaneId: string;
+        } | {
+            readonly _tag: "Width";
+            readonly columnId: string;
+        };
+        readonly share: number;
+    } | {
+        readonly _tag: "ReleasedPointer";
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeTarget: Option.Option<{
+            readonly _tag: "Gap";
+            readonly maybeBeforeColumnId: Option.Option<string>;
+        } | {
+            readonly _tag: "Into";
+            readonly columnId: string;
+            readonly index: number;
+        }>;
+    } | {
+        readonly _tag: "ReleasedSplitter";
+        readonly share: number;
+    } | {
+        readonly _tag: "SteppedHeld";
+        readonly step: "Down" | "Left" | "Right" | "Up";
+    }, {
+        readonly maybeHold: Option.Option<{
+            readonly reelHook: string;
+            readonly subject: {
+                readonly _tag: "Column";
+                readonly columnId: string;
+            } | {
+                readonly _tag: "Pane";
+                readonly paneId: string;
+            };
+            readonly pointerId: number;
+        }>;
+    }, never> & {
+        readonly __subscription: never;
+    };
+    readonly edge: Subscription.EntryWithoutKeepAlive<{
+        readonly id: string;
+        readonly maybeFocus: Option.Option<{
+            readonly paneId: string;
+            readonly column: number;
+            readonly row: number;
+        }>;
+        readonly maybeHeld: Option.Option<{
+            readonly subject: {
+                readonly _tag: "Column";
+                readonly columnId: string;
+            } | {
+                readonly _tag: "Pane";
+                readonly paneId: string;
+            };
+            readonly by: {
+                readonly _tag: "Keyboard";
+            } | {
+                readonly _tag: "Pointer";
+                readonly pointerId: number;
+                readonly pressX: number;
+                readonly pressY: number;
+                readonly x: number;
+                readonly y: number;
+                readonly isCarrying: boolean;
+            };
+            readonly maybeTarget: Option.Option<{
+                readonly _tag: "Gap";
+                readonly maybeBeforeColumnId: Option.Option<string>;
+            } | {
+                readonly _tag: "Into";
+                readonly columnId: string;
+                readonly index: number;
+            }>;
+        }>;
+        readonly maybeResizing: Option.Option<{
+            readonly splitter: {
+                readonly _tag: "Split";
+                readonly abovePaneId: string;
+            } | {
+                readonly _tag: "Width";
+                readonly columnId: string;
+            };
+            readonly pointerId: number;
+            readonly pressX: number;
+            readonly pressY: number;
+            readonly maybeResize: Option.Option<{
+                readonly _tag: "ResizedColumn";
+                readonly columnId: string;
+                readonly width: number;
+            } | {
+                readonly _tag: "ResizedPanes";
+                readonly columnId: string;
+                readonly weights: {
+                    readonly [x: string]: number;
+                };
+            }>;
+        }>;
+    }, {
+        readonly _tag: "PressedEscape";
+    } | {
+        readonly _tag: "CancelledPointer";
+    } | {
+        readonly _tag: "CancelledSplitter";
+    } | {
+        readonly _tag: "CompletedAnnounceReel";
+    } | {
+        readonly _tag: "CompletedFocusGrip";
+    } | {
+        readonly _tag: "CompletedFocusPane";
+    } | {
+        readonly _tag: "CompletedRestoreFocus";
+    } | {
+        readonly _tag: "CompletedScrollIntoView";
+    } | {
+        readonly _tag: "CompletedSizeLiftedPane";
+    } | {
+        readonly _tag: "DroppedHeld";
+    } | {
+        readonly _tag: "FocusedPane";
+        readonly paneId: string;
+    } | {
+        readonly _tag: "LeftGrip";
+    } | {
+        readonly _tag: "MovedPointer";
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeTarget: Option.Option<{
+            readonly _tag: "Gap";
+            readonly maybeBeforeColumnId: Option.Option<string>;
+        } | {
+            readonly _tag: "Into";
+            readonly columnId: string;
+            readonly index: number;
+        }>;
+    } | {
+        readonly _tag: "MovedSplitter";
+        readonly share: number;
+    } | {
+        readonly _tag: "PressedGrip";
+        readonly subject: {
+            readonly _tag: "Column";
+            readonly columnId: string;
+        } | {
+            readonly _tag: "Pane";
+            readonly paneId: string;
+        };
+        readonly pointerId: number;
+        readonly clientX: number;
+        readonly clientY: number;
+    } | {
+        readonly _tag: "PressedGripKey";
+        readonly subject: {
+            readonly _tag: "Column";
+            readonly columnId: string;
+        } | {
+            readonly _tag: "Pane";
+            readonly paneId: string;
+        };
+    } | {
+        readonly _tag: "PressedSplitter";
+        readonly splitter: {
+            readonly _tag: "Split";
+            readonly abovePaneId: string;
+        } | {
+            readonly _tag: "Width";
+            readonly columnId: string;
+        };
+        readonly pointerId: number;
+        readonly clientX: number;
+        readonly clientY: number;
+    } | {
+        readonly _tag: "PressedSplitterKey";
+        readonly splitter: {
+            readonly _tag: "Split";
+            readonly abovePaneId: string;
+        } | {
+            readonly _tag: "Width";
+            readonly columnId: string;
+        };
+        readonly share: number;
+    } | {
+        readonly _tag: "ReleasedPointer";
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeTarget: Option.Option<{
+            readonly _tag: "Gap";
+            readonly maybeBeforeColumnId: Option.Option<string>;
+        } | {
+            readonly _tag: "Into";
+            readonly columnId: string;
+            readonly index: number;
+        }>;
+    } | {
+        readonly _tag: "ReleasedSplitter";
+        readonly share: number;
+    } | {
+        readonly _tag: "SteppedHeld";
+        readonly step: "Down" | "Left" | "Right" | "Up";
+    }, {
+        readonly maybeHold: Option.Option<{
+            readonly reelHook: string;
+            readonly subject: {
+                readonly _tag: "Column";
+                readonly columnId: string;
+            } | {
+                readonly _tag: "Pane";
+                readonly paneId: string;
+            };
+            readonly pointerId: number;
+        }>;
+    }, never> & {
+        readonly __subscription: never;
+    };
+    readonly resize: Subscription.EntryWithoutKeepAlive<{
+        readonly id: string;
+        readonly maybeFocus: Option.Option<{
+            readonly paneId: string;
+            readonly column: number;
+            readonly row: number;
+        }>;
+        readonly maybeHeld: Option.Option<{
+            readonly subject: {
+                readonly _tag: "Column";
+                readonly columnId: string;
+            } | {
+                readonly _tag: "Pane";
+                readonly paneId: string;
+            };
+            readonly by: {
+                readonly _tag: "Keyboard";
+            } | {
+                readonly _tag: "Pointer";
+                readonly pointerId: number;
+                readonly pressX: number;
+                readonly pressY: number;
+                readonly x: number;
+                readonly y: number;
+                readonly isCarrying: boolean;
+            };
+            readonly maybeTarget: Option.Option<{
+                readonly _tag: "Gap";
+                readonly maybeBeforeColumnId: Option.Option<string>;
+            } | {
+                readonly _tag: "Into";
+                readonly columnId: string;
+                readonly index: number;
+            }>;
+        }>;
+        readonly maybeResizing: Option.Option<{
+            readonly splitter: {
+                readonly _tag: "Split";
+                readonly abovePaneId: string;
+            } | {
+                readonly _tag: "Width";
+                readonly columnId: string;
+            };
+            readonly pointerId: number;
+            readonly pressX: number;
+            readonly pressY: number;
+            readonly maybeResize: Option.Option<{
+                readonly _tag: "ResizedColumn";
+                readonly columnId: string;
+                readonly width: number;
+            } | {
+                readonly _tag: "ResizedPanes";
+                readonly columnId: string;
+                readonly weights: {
+                    readonly [x: string]: number;
+                };
+            }>;
+        }>;
+    }, {
+        readonly _tag: "PressedEscape";
+    } | {
+        readonly _tag: "CancelledPointer";
+    } | {
+        readonly _tag: "CancelledSplitter";
+    } | {
+        readonly _tag: "CompletedAnnounceReel";
+    } | {
+        readonly _tag: "CompletedFocusGrip";
+    } | {
+        readonly _tag: "CompletedFocusPane";
+    } | {
+        readonly _tag: "CompletedRestoreFocus";
+    } | {
+        readonly _tag: "CompletedScrollIntoView";
+    } | {
+        readonly _tag: "CompletedSizeLiftedPane";
+    } | {
+        readonly _tag: "DroppedHeld";
+    } | {
+        readonly _tag: "FocusedPane";
+        readonly paneId: string;
+    } | {
+        readonly _tag: "LeftGrip";
+    } | {
+        readonly _tag: "MovedPointer";
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeTarget: Option.Option<{
+            readonly _tag: "Gap";
+            readonly maybeBeforeColumnId: Option.Option<string>;
+        } | {
+            readonly _tag: "Into";
+            readonly columnId: string;
+            readonly index: number;
+        }>;
+    } | {
+        readonly _tag: "MovedSplitter";
+        readonly share: number;
+    } | {
+        readonly _tag: "PressedGrip";
+        readonly subject: {
+            readonly _tag: "Column";
+            readonly columnId: string;
+        } | {
+            readonly _tag: "Pane";
+            readonly paneId: string;
+        };
+        readonly pointerId: number;
+        readonly clientX: number;
+        readonly clientY: number;
+    } | {
+        readonly _tag: "PressedGripKey";
+        readonly subject: {
+            readonly _tag: "Column";
+            readonly columnId: string;
+        } | {
+            readonly _tag: "Pane";
+            readonly paneId: string;
+        };
+    } | {
+        readonly _tag: "PressedSplitter";
+        readonly splitter: {
+            readonly _tag: "Split";
+            readonly abovePaneId: string;
+        } | {
+            readonly _tag: "Width";
+            readonly columnId: string;
+        };
+        readonly pointerId: number;
+        readonly clientX: number;
+        readonly clientY: number;
+    } | {
+        readonly _tag: "PressedSplitterKey";
+        readonly splitter: {
+            readonly _tag: "Split";
+            readonly abovePaneId: string;
+        } | {
+            readonly _tag: "Width";
+            readonly columnId: string;
+        };
+        readonly share: number;
+    } | {
+        readonly _tag: "ReleasedPointer";
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeTarget: Option.Option<{
+            readonly _tag: "Gap";
+            readonly maybeBeforeColumnId: Option.Option<string>;
+        } | {
+            readonly _tag: "Into";
+            readonly columnId: string;
+            readonly index: number;
+        }>;
+    } | {
+        readonly _tag: "ReleasedSplitter";
+        readonly share: number;
+    } | {
+        readonly _tag: "SteppedHeld";
+        readonly step: "Down" | "Left" | "Right" | "Up";
+    }, {
+        readonly maybeHold: Option.Option<{
+            readonly reelHook: string;
+            readonly splitter: {
+                readonly _tag: "Split";
+                readonly abovePaneId: string;
+            } | {
+                readonly _tag: "Width";
+                readonly columnId: string;
+            };
+            readonly pointerId: number;
+            readonly pressX: number;
+            readonly pressY: number;
+        }>;
+    }, never> & {
+        readonly __subscription: never;
+    };
+    readonly escape: Subscription.EntryWithoutKeepAlive<{
+        readonly id: string;
+        readonly maybeFocus: Option.Option<{
+            readonly paneId: string;
+            readonly column: number;
+            readonly row: number;
+        }>;
+        readonly maybeHeld: Option.Option<{
+            readonly subject: {
+                readonly _tag: "Column";
+                readonly columnId: string;
+            } | {
+                readonly _tag: "Pane";
+                readonly paneId: string;
+            };
+            readonly by: {
+                readonly _tag: "Keyboard";
+            } | {
+                readonly _tag: "Pointer";
+                readonly pointerId: number;
+                readonly pressX: number;
+                readonly pressY: number;
+                readonly x: number;
+                readonly y: number;
+                readonly isCarrying: boolean;
+            };
+            readonly maybeTarget: Option.Option<{
+                readonly _tag: "Gap";
+                readonly maybeBeforeColumnId: Option.Option<string>;
+            } | {
+                readonly _tag: "Into";
+                readonly columnId: string;
+                readonly index: number;
+            }>;
+        }>;
+        readonly maybeResizing: Option.Option<{
+            readonly splitter: {
+                readonly _tag: "Split";
+                readonly abovePaneId: string;
+            } | {
+                readonly _tag: "Width";
+                readonly columnId: string;
+            };
+            readonly pointerId: number;
+            readonly pressX: number;
+            readonly pressY: number;
+            readonly maybeResize: Option.Option<{
+                readonly _tag: "ResizedColumn";
+                readonly columnId: string;
+                readonly width: number;
+            } | {
+                readonly _tag: "ResizedPanes";
+                readonly columnId: string;
+                readonly weights: {
+                    readonly [x: string]: number;
+                };
+            }>;
+        }>;
+    }, {
+        readonly _tag: "PressedEscape";
+    } | {
+        readonly _tag: "CancelledPointer";
+    } | {
+        readonly _tag: "CancelledSplitter";
+    } | {
+        readonly _tag: "CompletedAnnounceReel";
+    } | {
+        readonly _tag: "CompletedFocusGrip";
+    } | {
+        readonly _tag: "CompletedFocusPane";
+    } | {
+        readonly _tag: "CompletedRestoreFocus";
+    } | {
+        readonly _tag: "CompletedScrollIntoView";
+    } | {
+        readonly _tag: "CompletedSizeLiftedPane";
+    } | {
+        readonly _tag: "DroppedHeld";
+    } | {
+        readonly _tag: "FocusedPane";
+        readonly paneId: string;
+    } | {
+        readonly _tag: "LeftGrip";
+    } | {
+        readonly _tag: "MovedPointer";
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeTarget: Option.Option<{
+            readonly _tag: "Gap";
+            readonly maybeBeforeColumnId: Option.Option<string>;
+        } | {
+            readonly _tag: "Into";
+            readonly columnId: string;
+            readonly index: number;
+        }>;
+    } | {
+        readonly _tag: "MovedSplitter";
+        readonly share: number;
+    } | {
+        readonly _tag: "PressedGrip";
+        readonly subject: {
+            readonly _tag: "Column";
+            readonly columnId: string;
+        } | {
+            readonly _tag: "Pane";
+            readonly paneId: string;
+        };
+        readonly pointerId: number;
+        readonly clientX: number;
+        readonly clientY: number;
+    } | {
+        readonly _tag: "PressedGripKey";
+        readonly subject: {
+            readonly _tag: "Column";
+            readonly columnId: string;
+        } | {
+            readonly _tag: "Pane";
+            readonly paneId: string;
+        };
+    } | {
+        readonly _tag: "PressedSplitter";
+        readonly splitter: {
+            readonly _tag: "Split";
+            readonly abovePaneId: string;
+        } | {
+            readonly _tag: "Width";
+            readonly columnId: string;
+        };
+        readonly pointerId: number;
+        readonly clientX: number;
+        readonly clientY: number;
+    } | {
+        readonly _tag: "PressedSplitterKey";
+        readonly splitter: {
+            readonly _tag: "Split";
+            readonly abovePaneId: string;
+        } | {
+            readonly _tag: "Width";
+            readonly columnId: string;
+        };
+        readonly share: number;
+    } | {
+        readonly _tag: "ReleasedPointer";
+        readonly clientX: number;
+        readonly clientY: number;
+        readonly maybeTarget: Option.Option<{
+            readonly _tag: "Gap";
+            readonly maybeBeforeColumnId: Option.Option<string>;
+        } | {
+            readonly _tag: "Into";
+            readonly columnId: string;
+            readonly index: number;
+        }>;
+    } | {
+        readonly _tag: "ReleasedSplitter";
+        readonly share: number;
+    } | {
+        readonly _tag: "SteppedHeld";
+        readonly step: "Down" | "Left" | "Right" | "Up";
+    }, {
+        readonly isHolding: boolean;
+    }, never> & {
+        readonly __subscription: never;
+    };
+} extends infer T ? { readonly [Key in keyof T as `${Prefix}${Capitalize<Key>}`]: T[Key]; } : never;
+/** Sizes the copy that follows the pointer to what it lifts, and keeps the pointer where it
+ *  pressed. Measures the source once, when the copy appears. */
+export declare const SizeLiftedPane: Mount.MountDefinitionWithArgs<"SizeLiftedPane", {
+    sourceSelector: Schema.String;
+    pressX: Schema.Number;
+    pressY: Schema.Number;
+}, {
+    readonly _tag: "CompletedSizeLiftedPane";
+}>;
+/** What the reel hands `toPaneView` for each pane: put `grip` in the Window's `lead` and give
+ *  it `id`. */
+export type PaneRender = Readonly<{
+    /** The pane's grip, for its title bar's `lead`: a quiet glyph button named "Move <label>". */
+    grip: Html;
+    /** The window's id, unique in the document. */
+    id: string;
+}>;
+/** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. `toPaneView` is a
+ *  function because it may carry the parent's handlers. */
+export type ViewInputs = Readonly<{
+    /** The columns and their panes, as the application holds them. */
+    layout: Layout;
+    /** Names the reel for screen readers. */
+    label: string;
+    /** Renders one pane, a `Window.view` with `render.grip` as its `lead` and `render.id` as its
+     *  `id`. Mark the control focus should land on in it (a terminal's input) with
+     *  `data-reel-focus`. */
+    toPaneView: (pane: Pane, render: PaneRender) => Html;
+}>;
+/**
+ * A row of columns wider than the view when it must be, each a stack of panes, scrolled
+ * sideways, and down where a column is taller than the view: `div.reel` holding the scroller
+ * `div.reel-view`, whose `div.reel-track` lays out the columns (`div.reel-column`, each a head
+ * with its grip and width, then a slot per pane with a splitter between) with a splitter after
+ * each, and the panes themselves in `div.reel-panes`, each pinned to its slot by anchor
+ * positioning. The reel takes its height from whatever holds it. The layout is the parent's;
+ * each pane renders through `toPaneView`.
+ *
+ * A pane's grip, or a column's, lifts it under a pointer or the keyboard: Space or Enter picks
+ * it up, the arrows move it (left and right through the gaps and columns, up and down among a
+ * column's panes), Space drops it, and Escape or Tab puts it back. A drop reports what it asks
+ * of the layout as the OutMessage. Lift `subscriptions(keyPrefix)` into the application's, or
+ * nothing follows the pointer, and call `reconcile` whenever the layout changes.
+ */
+export declare const view: import("foldkit/submodel").View<{
+    readonly id: string;
+    readonly maybeFocus: Option.Option<{
+        readonly paneId: string;
+        readonly column: number;
+        readonly row: number;
+    }>;
+    readonly maybeHeld: Option.Option<{
+        readonly subject: {
+            readonly _tag: "Column";
+            readonly columnId: string;
+        } | {
+            readonly _tag: "Pane";
+            readonly paneId: string;
+        };
+        readonly by: {
+            readonly _tag: "Keyboard";
+        } | {
+            readonly _tag: "Pointer";
+            readonly pointerId: number;
+            readonly pressX: number;
+            readonly pressY: number;
+            readonly x: number;
+            readonly y: number;
+            readonly isCarrying: boolean;
+        };
+        readonly maybeTarget: Option.Option<{
+            readonly _tag: "Gap";
+            readonly maybeBeforeColumnId: Option.Option<string>;
+        } | {
+            readonly _tag: "Into";
+            readonly columnId: string;
+            readonly index: number;
+        }>;
+    }>;
+    readonly maybeResizing: Option.Option<{
+        readonly splitter: {
+            readonly _tag: "Split";
+            readonly abovePaneId: string;
+        } | {
+            readonly _tag: "Width";
+            readonly columnId: string;
+        };
+        readonly pointerId: number;
+        readonly pressX: number;
+        readonly pressY: number;
+        readonly maybeResize: Option.Option<{
+            readonly _tag: "ResizedColumn";
+            readonly columnId: string;
+            readonly width: number;
+        } | {
+            readonly _tag: "ResizedPanes";
+            readonly columnId: string;
+            readonly weights: {
+                readonly [x: string]: number;
+            };
+        }>;
+    }>;
+}, {
+    readonly _tag: "PressedEscape";
+} | {
+    readonly _tag: "CancelledPointer";
+} | {
+    readonly _tag: "CancelledSplitter";
+} | {
+    readonly _tag: "CompletedAnnounceReel";
+} | {
+    readonly _tag: "CompletedFocusGrip";
+} | {
+    readonly _tag: "CompletedFocusPane";
+} | {
+    readonly _tag: "CompletedRestoreFocus";
+} | {
+    readonly _tag: "CompletedScrollIntoView";
+} | {
+    readonly _tag: "CompletedSizeLiftedPane";
+} | {
+    readonly _tag: "DroppedHeld";
+} | {
+    readonly _tag: "FocusedPane";
+    readonly paneId: string;
+} | {
+    readonly _tag: "LeftGrip";
+} | {
+    readonly _tag: "MovedPointer";
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly maybeTarget: Option.Option<{
+        readonly _tag: "Gap";
+        readonly maybeBeforeColumnId: Option.Option<string>;
+    } | {
+        readonly _tag: "Into";
+        readonly columnId: string;
+        readonly index: number;
+    }>;
+} | {
+    readonly _tag: "MovedSplitter";
+    readonly share: number;
+} | {
+    readonly _tag: "PressedGrip";
+    readonly subject: {
+        readonly _tag: "Column";
+        readonly columnId: string;
+    } | {
+        readonly _tag: "Pane";
+        readonly paneId: string;
+    };
+    readonly pointerId: number;
+    readonly clientX: number;
+    readonly clientY: number;
+} | {
+    readonly _tag: "PressedGripKey";
+    readonly subject: {
+        readonly _tag: "Column";
+        readonly columnId: string;
+    } | {
+        readonly _tag: "Pane";
+        readonly paneId: string;
+    };
+} | {
+    readonly _tag: "PressedSplitter";
+    readonly splitter: {
+        readonly _tag: "Split";
+        readonly abovePaneId: string;
+    } | {
+        readonly _tag: "Width";
+        readonly columnId: string;
+    };
+    readonly pointerId: number;
+    readonly clientX: number;
+    readonly clientY: number;
+} | {
+    readonly _tag: "PressedSplitterKey";
+    readonly splitter: {
+        readonly _tag: "Split";
+        readonly abovePaneId: string;
+    } | {
+        readonly _tag: "Width";
+        readonly columnId: string;
+    };
+    readonly share: number;
+} | {
+    readonly _tag: "ReleasedPointer";
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly maybeTarget: Option.Option<{
+        readonly _tag: "Gap";
+        readonly maybeBeforeColumnId: Option.Option<string>;
+    } | {
+        readonly _tag: "Into";
+        readonly columnId: string;
+        readonly index: number;
+    }>;
+} | {
+    readonly _tag: "ReleasedSplitter";
+    readonly share: number;
+} | {
+    readonly _tag: "SteppedHeld";
+    readonly step: "Down" | "Left" | "Right" | "Up";
+}, Readonly<{
+    /** The columns and their panes, as the application holds them. */
+    layout: Layout;
+    /** Names the reel for screen readers. */
+    label: string;
+    /** Renders one pane, a `Window.view` with `render.grip` as its `lead` and `render.id` as its
+     *  `id`. Mark the control focus should land on in it (a terminal's input) with
+     *  `data-reel-focus`. */
+    toPaneView: (pane: Pane, render: PaneRender) => Html;
+}>>;
+export {};
+//# sourceMappingURL=reel.d.ts.map