@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.0

package/dist/reel/reel.d.ts

@@ -0,0 +1,1070 @@
+import { Layout, OutMessage, Pane } from "./layout.js";
+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 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.Finite;
+    readonly row: Schema.Finite;
+  }>>;
+  readonly maybeHeld: Schema.Option<Schema.Struct<{
+    readonly paneId: Schema.String;
+    readonly by: import("foldkit/schema").TaggedUnion<{
+      readonly Pointer: {
+        pointerId: Schema.Finite;
+        pressX: Schema.Finite;
+        pressY: Schema.Finite;
+        x: Schema.Finite;
+        y: Schema.Finite;
+        isCarrying: Schema.Boolean;
+      };
+      readonly Keyboard: {};
+    }>;
+    readonly maybeTarget: Schema.Option<import("foldkit/schema").TaggedUnion<{
+      readonly Into: {
+        columnId: Schema.String;
+        index: Schema.Finite;
+      };
+      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.Finite;
+    readonly pressX: Schema.Finite;
+    readonly pressY: Schema.Finite;
+    readonly maybeResize: Schema.Option<Schema.Union<readonly [import("foldkit/schema").CallableTaggedStruct<"ResizedColumn", {
+      readonly columnId: Schema.String;
+      readonly width: Schema.Finite;
+    }>, import("foldkit/schema").CallableTaggedStruct<"ResizedPanes", {
+      readonly columnId: Schema.String;
+      readonly weights: Schema.$Record<Schema.String, Schema.Finite>;
+    }>]>>;
+  }>>;
+}>;
+export type Model = typeof Model.Type;
+/** How a reel shows its panes: side by side in their columns (`Strip`), or one at a time at
+ *  the reel's full size under a tab per pane (`Tabs`). The application holds it and passes it
+ *  in; the layout is the same in both. */
+export declare const Arrangement: Schema.Literals<readonly ["Strip", "Tabs"]>;
+export type Arrangement = typeof Arrangement.Type;
+/** Union of all Messages a reel can produce. */
+export declare const Message: import("foldkit/message").MessageUnion<{
+  readonly PressedGrip: {
+    paneId: Schema.String;
+    pointerId: Schema.Finite;
+    clientX: Schema.Finite;
+    clientY: Schema.Finite;
+  };
+  readonly PressedGripKey: {
+    paneId: Schema.String;
+  };
+  readonly MovedPointer: {
+    readonly clientX: Schema.Finite;
+    readonly clientY: Schema.Finite;
+    readonly maybeTarget: Schema.Option<import("foldkit/schema").TaggedUnion<{
+      readonly Into: {
+        columnId: Schema.String;
+        index: Schema.Finite;
+      };
+      readonly Gap: {
+        maybeBeforeColumnId: Schema.Option<Schema.String>;
+      };
+    }>>;
+  };
+  readonly ReleasedPointer: {
+    readonly clientX: Schema.Finite;
+    readonly clientY: Schema.Finite;
+    readonly maybeTarget: Schema.Option<import("foldkit/schema").TaggedUnion<{
+      readonly Into: {
+        columnId: Schema.String;
+        index: Schema.Finite;
+      };
+      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 PressedTab: {
+    paneId: Schema.String;
+  };
+  readonly SteppedTab: {
+    paneId: Schema.String;
+  };
+  readonly PressedSplitter: {
+    splitter: import("foldkit/schema").TaggedUnion<{
+      readonly Width: {
+        columnId: Schema.String;
+      };
+      readonly Split: {
+        abovePaneId: Schema.String;
+      };
+    }>;
+    pointerId: Schema.Finite;
+    clientX: Schema.Finite;
+    clientY: Schema.Finite;
+  };
+  readonly MovedSplitter: {
+    share: Schema.Finite;
+  };
+  readonly ReleasedSplitter: {
+    share: Schema.Finite;
+  };
+  readonly CancelledSplitter: {};
+  readonly PressedSplitterKey: {
+    splitter: import("foldkit/schema").TaggedUnion<{
+      readonly Width: {
+        columnId: Schema.String;
+      };
+      readonly Split: {
+        abovePaneId: Schema.String;
+      };
+    }>;
+    share: Schema.Finite;
+  };
+  readonly CompletedAnnounceReel: {};
+  readonly CompletedFocusPane: {};
+  readonly CompletedFocusTab: {};
+  readonly CompletedRestoreFocus: {};
+  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>>;
+/** 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, and how the view shows it (`Strip` when not given), which
+ *  `perform` reads. */
+export type UpdateContext = Readonly<{
+  layout: Layout;
+  arrangement?: Arrangement;
+}>;
+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 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. Under tabs, only the focus keys act, stepping from tab
+ * to tab.
+ */
+export declare const perform: (model: Model, action: Action, context: UpdateContext) => UpdateReturn;
+/** A held pane 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 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: "CompletedAnnounceReel";
+  } | {
+    readonly _tag: "CompletedFocusPane";
+  } | {
+    readonly _tag: "CompletedFocusTab";
+  } | {
+    readonly _tag: "CompletedRestoreFocus";
+  } | {
+    readonly _tag: "CancelledPointer";
+  } | {
+    readonly _tag: "PressedEscape";
+  } | {
+    readonly _tag: "CompletedScrollIntoView";
+  } | {
+    readonly _tag: "CancelledSplitter";
+  } | {
+    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 paneId: string;
+    readonly pointerId: number;
+    readonly clientX: number;
+    readonly clientY: number;
+  } | {
+    readonly _tag: "PressedGripKey";
+    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: "PressedTab";
+    readonly paneId: string;
+  } | {
+    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 _tag: "SteppedTab";
+    readonly paneId: string;
+  }, {
+    readonly maybeHold: Option.Option<{
+      readonly reelHook: string;
+      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 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: "CompletedAnnounceReel";
+  } | {
+    readonly _tag: "CompletedFocusPane";
+  } | {
+    readonly _tag: "CompletedFocusTab";
+  } | {
+    readonly _tag: "CompletedRestoreFocus";
+  } | {
+    readonly _tag: "CancelledPointer";
+  } | {
+    readonly _tag: "PressedEscape";
+  } | {
+    readonly _tag: "CompletedScrollIntoView";
+  } | {
+    readonly _tag: "CancelledSplitter";
+  } | {
+    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 paneId: string;
+    readonly pointerId: number;
+    readonly clientX: number;
+    readonly clientY: number;
+  } | {
+    readonly _tag: "PressedGripKey";
+    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: "PressedTab";
+    readonly paneId: string;
+  } | {
+    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 _tag: "SteppedTab";
+    readonly paneId: string;
+  }, {
+    readonly maybeHold: Option.Option<{
+      readonly reelHook: string;
+      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 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: "CompletedAnnounceReel";
+  } | {
+    readonly _tag: "CompletedFocusPane";
+  } | {
+    readonly _tag: "CompletedFocusTab";
+  } | {
+    readonly _tag: "CompletedRestoreFocus";
+  } | {
+    readonly _tag: "CancelledPointer";
+  } | {
+    readonly _tag: "PressedEscape";
+  } | {
+    readonly _tag: "CompletedScrollIntoView";
+  } | {
+    readonly _tag: "CancelledSplitter";
+  } | {
+    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 paneId: string;
+    readonly pointerId: number;
+    readonly clientX: number;
+    readonly clientY: number;
+  } | {
+    readonly _tag: "PressedGripKey";
+    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: "PressedTab";
+    readonly paneId: string;
+  } | {
+    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 _tag: "SteppedTab";
+    readonly paneId: string;
+  }, {
+    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 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: "CompletedAnnounceReel";
+  } | {
+    readonly _tag: "CompletedFocusPane";
+  } | {
+    readonly _tag: "CompletedFocusTab";
+  } | {
+    readonly _tag: "CompletedRestoreFocus";
+  } | {
+    readonly _tag: "CancelledPointer";
+  } | {
+    readonly _tag: "PressedEscape";
+  } | {
+    readonly _tag: "CompletedScrollIntoView";
+  } | {
+    readonly _tag: "CancelledSplitter";
+  } | {
+    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 paneId: string;
+    readonly pointerId: number;
+    readonly clientX: number;
+    readonly clientY: number;
+  } | {
+    readonly _tag: "PressedGripKey";
+    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: "PressedTab";
+    readonly paneId: string;
+  } | {
+    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 _tag: "SteppedTab";
+    readonly paneId: string;
+  }, {
+    readonly isHolding: boolean;
+  }, never> & {
+    readonly __subscription: never;
+  };
+} extends (infer T) ? { readonly [Key in keyof T as `${Prefix}${Capitalize<Key>}`]: T[Key]; } : never;
+/** What the reel hands `toPaneView` for each pane: put `lead` in the Window's `lead` and give
+ *  it `id`. */
+export type PaneRender = Readonly<{
+  /** The title bar's `lead`: the pane's grip, a quiet glyph button named "Move <label>", or
+   *  nothing under tabs, where a pane does not move. */
+  lead: readonly 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.lead` 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;
+  /** How the panes print: in their columns (`Strip`, when not given), or one at a time under
+   *  their tabs (`Tabs`). Pass the same to `perform`. */
+  arrangement?: Arrangement;
+  /** What a pane's tab prints before its label: a kind glyph. Nothing when not given. */
+  toTabLeadView?: (pane: Pane) => readonly 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`, 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 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.
+ *
+ * Under tabs (`arrangement: "Tabs"`) the reel is `div.reel.tabbed`: a `div.nav.tabs.reel-tabs`
+ * tab list over the scroller, whose track holds one `div.reel-slot.reel-stage` at the reel's
+ * full size where the columns were. Every pane is pinned to it, the focused one shown and the
+ * others `.behind`, hidden and inert; there are no grips and no splitters.
+ */
+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 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: "CompletedAnnounceReel";
+} | {
+  readonly _tag: "CompletedFocusPane";
+} | {
+  readonly _tag: "CompletedFocusTab";
+} | {
+  readonly _tag: "CompletedRestoreFocus";
+} | {
+  readonly _tag: "CancelledPointer";
+} | {
+  readonly _tag: "PressedEscape";
+} | {
+  readonly _tag: "CompletedScrollIntoView";
+} | {
+  readonly _tag: "CancelledSplitter";
+} | {
+  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 paneId: string;
+  readonly pointerId: number;
+  readonly clientX: number;
+  readonly clientY: number;
+} | {
+  readonly _tag: "PressedGripKey";
+  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: "PressedTab";
+  readonly paneId: string;
+} | {
+  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 _tag: "SteppedTab";
+  readonly paneId: string;
+}, 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.lead` 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;
+  /** How the panes print: in their columns (`Strip`, when not given), or one at a time under
+   *  their tabs (`Tabs`). Pass the same to `perform`. */
+  arrangement?: Arrangement;
+  /** What a pane's tab prints before its label: a kind glyph. Nothing when not given. */
+  toTabLeadView?: (pane: Pane) => readonly Html[];
+}>>;
+export {};