@gjermundgaraba-designs/pixel-paper 0.18.0 → 0.19.0

package/src/reel/reel.ts

@@ -0,0 +1,1597 @@
+import { Array, Effect, Equal, Match, Number, Option, Order, Schema, Stream, String } from "effect";
+import * as Command from "foldkit/command";
+import type { Attribute, Html, HtmlBuilder, KeyboardModifiers } from "foldkit/html";
+import { defineMessageUnion } from "foldkit/message";
+import * as Mount from "foldkit/mount";
+import * as Render from "foldkit/render";
+import { defineTaggedUnion } from "foldkit/schema";
+import { modifyFields } from "foldkit/struct";
+import { defineView } from "foldkit/submodel";
+import * as Subscription from "foldkit/subscription";
+import type * as Update from "foldkit/update";
+
+import * as Announcer from "../announcer/announcer.ts";
+import * as Button from "../button/button.ts";
+import {
+  LEFT_BUTTON,
+  escapeKeys,
+  markDragging,
+  measureLift,
+  pressingPointer,
+} from "../drag/drag.ts";
+import * as Glyph from "../glyph/glyph.ts";
+import * as IconButton from "../iconButton/iconButton.ts";
+import { prefixKeys } from "../subscription/prefixKeys.ts";
+
+import {
+  type Column,
+  type ColumnBox,
+  type Layout,
+  OutMessage,
+  type Pane,
+  type Place,
+  Resize,
+  Splitter,
+  Step,
+  Subject,
+  Target,
+  WHERE_IT_WAS,
+  apply,
+  columnOf,
+  columnOfTarget,
+  fill,
+  firstPlace,
+  isPresent,
+  isSplitterPresent,
+  isTargetPresent,
+  landingWords,
+  nextPreset,
+  originOf,
+  placeAt,
+  placeOf,
+  placeWords,
+  requestOf,
+  resizeOf,
+  steppedTarget,
+  subjectWords,
+  targetAtPoint,
+  whereWords,
+  widthMark,
+  widthWords,
+} from "./layout.ts";
+
+// MODEL
+
+/** The words a reel says. `{pane}` is a pane's label, `{subject}` what is held (a pane, or a
+ *  column by its first pane), `{where}` a place and `{column}` a column's number. */
+const COPY = {
+  paneGrip: "Move {pane}",
+  columnGrip: "Move column {column}",
+  gripHelp:
+    "Press space to pick it up. Arrow keys move it, space drops it, escape or tab puts it back.",
+  widthLabel: "Width of column {column}",
+  heightLabel: "Height of {pane}",
+  focused: "{pane}, {where}.",
+  moved: "{subject} moved to {where}.",
+  widened: "Column {column} takes {width}.",
+  pickedUp: "Picked up {subject}.",
+  pickedUpByKeyboard:
+    "Picked up {subject}. Arrow keys move it, space drops it, escape or tab puts it back.",
+  over: "{subject}, {where}.",
+  dropped: "{subject} dropped at {where}.",
+  putBack: "{subject} put back where it was.",
+  cancelled: "Move cancelled. {subject} put back where it was.",
+  gone: "Move cancelled.",
+};
+
+/** The focused pane, with where it last sat, so focus finds a neighbour when it goes. */
+const Focus = Schema.Struct({ paneId: Schema.String, column: Schema.Number, row: Schema.Number });
+
+/** How something is held: by a pointer, pressed at (`pressX`, `pressY`) and now at (`x`,
+ *  `y`), carrying it once it has moved past the threshold; or by the keyboard, on its grip. */
+const By = defineTaggedUnion({
+  Pointer: {
+    pointerId: Schema.Number,
+    pressX: Schema.Number,
+    pressY: Schema.Number,
+    x: Schema.Number,
+    y: Schema.Number,
+    isCarrying: Schema.Boolean,
+  },
+  Keyboard: {},
+});
+type By = typeof By.Type;
+
+/** What is held, how, and where it would land: none while a pointer is outside the reel. */
+const Held = Schema.Struct({
+  subject: Subject,
+  by: By,
+  maybeTarget: Schema.Option(Target),
+});
+type Held = typeof Held.Type;
+
+/** A splitter a pointer drags, pressed at (`pressX`, `pressY`), with the resize it previews. */
+const Resizing = Schema.Struct({
+  splitter: Splitter,
+  pointerId: Schema.Number,
+  pressX: Schema.Number,
+  pressY: Schema.Number,
+  maybeResize: Schema.Option(Resize),
+});
+type Resizing = typeof Resizing.Type;
+
+/** 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 const Model = Schema.Struct({
+  id: Schema.String,
+  maybeFocus: Schema.Option(Focus),
+  maybeHeld: Schema.Option(Held),
+  maybeResizing: Schema.Option(Resizing),
+});
+export type Model = typeof Model.Type;
+
+// MESSAGE
+
+const PointerAt = Schema.Struct({
+  clientX: Schema.Number,
+  clientY: Schema.Number,
+  maybeTarget: Schema.Option(Target),
+});
+type PointerAt = typeof PointerAt.Type;
+
+/** Union of all Messages a reel can produce. */
+export const Message = defineMessageUnion({
+  PressedGrip: {
+    subject: Subject,
+    pointerId: Schema.Number,
+    clientX: Schema.Number,
+    clientY: Schema.Number,
+  },
+  PressedGripKey: { subject: Subject },
+  MovedPointer: PointerAt.fields,
+  ReleasedPointer: PointerAt.fields,
+  CancelledPointer: {},
+  SteppedHeld: { step: Step },
+  DroppedHeld: {},
+  LeftGrip: {},
+  PressedEscape: {},
+  FocusedPane: { paneId: Schema.String },
+  PressedSplitter: {
+    splitter: Splitter,
+    pointerId: Schema.Number,
+    clientX: Schema.Number,
+    clientY: Schema.Number,
+  },
+  MovedSplitter: { share: Schema.Number },
+  ReleasedSplitter: { share: Schema.Number },
+  CancelledSplitter: {},
+  PressedSplitterKey: { splitter: Splitter, share: Schema.Number },
+  CompletedAnnounceReel: {},
+  CompletedFocusPane: {},
+  CompletedRestoreFocus: {},
+  CompletedFocusGrip: {},
+  CompletedScrollIntoView: {},
+  CompletedSizeLiftedPane: {},
+});
+export type Message = typeof Message.Type;
+
+// INIT
+
+/** 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 const init = (config: InitConfig): Model => ({
+  id: config.id,
+  maybeFocus: Option.none(),
+  maybeHeld: Option.none(),
+  maybeResizing: Option.none(),
+});
+
+// ACCESSORS
+
+const focusedPlace = (model: Model, layout: Layout): Option.Option<Place> =>
+  Option.orElse(
+    Option.flatMap(model.maybeFocus, (focus) =>
+      Option.orElse(placeOf(layout, focus.paneId), () => {
+        const column = Number.clamp(focus.column, { minimum: 0, maximum: layout.length - 1 });
+        const rows = Option.match(Array.get(layout, column), {
+          onNone: () => 0,
+          onSome: (found) => found.panes.length,
+        });
+        return placeAt(layout, column, Number.clamp(focus.row, { minimum: 0, maximum: rows - 1 }));
+      }),
+    ),
+    () => firstPlace(layout),
+  );
+
+/** 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 const focusedPaneId = (model: Model, layout: Layout): Option.Option<string> =>
+  Option.map(focusedPlace(model, layout), ({ pane }) => pane.id);
+
+const isHolding = (model: Model): boolean => Option.isSome(model.maybeHeld);
+
+/** Whether `held` is carried: by the keyboard, or by a pointer past the threshold. */
+const isCarried = (held: Held): boolean =>
+  By.match(held.by, { Pointer: ({ isCarrying }) => isCarrying, Keyboard: () => true });
+
+// DOM HOOKS
+
+const paneHook = (model: Model, paneId: string): string => `${model.id}/pane/${paneId}`;
+
+const columnHook = (model: Model, columnId: string): string => `${model.id}/column/${columnId}`;
+
+const subjectHook = (model: Model, subject: Subject): string =>
+  Subject.match(subject, {
+    Pane: ({ paneId }) => paneHook(model, paneId),
+    Column: ({ columnId }) => columnHook(model, columnId),
+  });
+
+const scrollerOf = (reelHook: string): Option.Option<HTMLElement> =>
+  Option.fromNullishOr(
+    document.querySelector<HTMLElement>(`[data-reel="${CSS.escape(reelHook)}"] > .reel-view`),
+  );
+
+const paneElement = (hook: string): Option.Option<HTMLElement> =>
+  Option.fromNullishOr(
+    document.querySelector<HTMLElement>(`[data-reel-pane="${CSS.escape(hook)}"]`),
+  );
+
+/** Puts the keyboard in `pane`: on its control marked `data-reel-focus` (a terminal's input),
+ *  or on the pane itself, without scrolling the page. */
+const focusInto = (pane: HTMLElement): void => {
+  Option.getOrElse(
+    Option.fromNullishOr(pane.querySelector<HTMLElement>("[data-reel-focus]")),
+    () => pane,
+  ).focus({ preventScroll: true });
+};
+
+// COMMAND
+
+/** Says a focus move, a move or a step of a drag through the page's live region (as
+ *  `Announcer.Announce` does). */
+export const AnnounceReel = Command.define("AnnounceReel", {
+  args: { text: Schema.String },
+  messages: [Message.CompletedAnnounceReel],
+  execute: ({ text }) => Announcer.announce(text).pipe(Effect.as(Message.CompletedAnnounceReel())),
+});
+
+/** 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 const FocusPane = Command.define("FocusPane", {
+  args: { paneHook: Schema.String },
+  messages: [Message.CompletedFocusPane],
+  execute: ({ paneHook: hook }) =>
+    Effect.gen(function* () {
+      yield* Render.afterCommit;
+      yield* Effect.sync(() => {
+        Option.map(
+          Option.filter(paneElement(hook), (pane) => !pane.contains(document.activeElement)),
+          focusInto,
+        );
+      });
+      return Message.CompletedFocusPane();
+    }),
+});
+
+/** 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 const RestoreFocus = Command.define("RestoreFocus", {
+  args: { paneHook: Schema.String },
+  messages: [Message.CompletedRestoreFocus],
+  execute: ({ paneHook: hook }) =>
+    Effect.gen(function* () {
+      yield* Render.afterCommit;
+      yield* Effect.sync(() => {
+        const active = document.activeElement;
+        if (active === null || active === document.body) {
+          Option.map(paneElement(hook), focusInto);
+        }
+      });
+      return Message.CompletedRestoreFocus();
+    }),
+});
+
+/** 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 const FocusGrip = Command.define("FocusGrip", {
+  args: { gripHook: Schema.String },
+  messages: [Message.CompletedFocusGrip],
+  execute: ({ gripHook }) =>
+    Effect.gen(function* () {
+      yield* Render.afterCommit;
+      yield* Effect.sync(() => {
+        document
+          .querySelector<HTMLElement>(`[data-reel-grip="${CSS.escape(gripHook)}"]`)
+          ?.focus({ preventScroll: true });
+      });
+      return Message.CompletedFocusGrip();
+    }),
+});
+
+/** 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 const ScrollIntoView = Command.define("ScrollIntoView", {
+  args: { hook: Schema.String },
+  messages: [Message.CompletedScrollIntoView],
+  execute: ({ hook }) =>
+    Effect.gen(function* () {
+      yield* Render.afterCommit;
+      yield* Effect.sync(() => {
+        document
+          .querySelector(
+            `[data-reel-pane="${CSS.escape(hook)}"], [data-reel-hook="${CSS.escape(hook)}"]`,
+          )
+          ?.scrollIntoView({ block: "nearest", inline: "nearest" });
+      });
+      return Message.CompletedScrollIntoView();
+    }),
+});
+
+// UPDATE
+
+/** 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>;
+
+/** How far a pointer moves from its press before it carries what it pressed. */
+const CARRY_THRESHOLD = 5;
+
+const withHeld = (model: Model, maybeHeld: Option.Option<Held>): Model =>
+  modifyFields(model, { maybeHeld: () => maybeHeld });
+
+const withResizing = (model: Model, maybeResizing: Option.Option<Resizing>): Model =>
+  modifyFields(model, { maybeResizing: () => maybeResizing });
+
+const focusOn = (model: Model, place: Place): Model =>
+  modifyFields(model, {
+    maybeFocus: () =>
+      Option.some({ paneId: place.pane.id, column: place.columnIndex, row: place.row }),
+  });
+
+const announce = (text: string) => AnnounceReel({ text });
+
+const heldWords = (layout: Layout, held: Held): string =>
+  String.capitalize(Option.getOrElse(subjectWords(layout, held.subject), () => ""));
+
+const scrollToTarget = (model: Model, layout: Layout, target: Target) =>
+  Array.fromOption(
+    Option.map(columnOfTarget(layout, target), (columnId) =>
+      ScrollIntoView({ hook: columnHook(model, columnId) }),
+    ),
+  );
+
+/** Lets go of what is held: dropped at its target when it is carried and the drop changes
+ *  something (reported as the request), put back otherwise, said in `putBack`'s words. A
+ *  column dropped by the keyboard gets its grip's focus back. */
+const letGo = (model: Model, layout: Layout, held: Held, putBack: string): UpdateReturn => {
+  const released = withHeld(model, Option.none());
+  if (!isCarried(held)) {
+    return { model: released };
+  }
+
+  const subject = heldWords(layout, held);
+  const maybeRequest = Option.flatMap(held.maybeTarget, (target) =>
+    requestOf(layout, held.subject, target),
+  );
+  // a column that moves takes focus off its grip; one put back never left its place
+  const refocus =
+    held.subject._tag === "Column" && held.by._tag === "Keyboard"
+      ? [FocusGrip({ gripHook: subjectHook(model, held.subject) })]
+      : [];
+
+  return Option.match(maybeRequest, {
+    onNone: () => ({
+      model: released,
+      commands: [announce(fill(putBack, { subject }))],
+    }),
+    onSome: (request) => ({
+      model: released,
+      commands: [
+        ...refocus,
+        announce(
+          fill(COPY.dropped, {
+            subject,
+            where: Option.getOrElse(
+              whereWords(apply(layout, request), held.subject),
+              () => WHERE_IT_WAS,
+            ),
+          }),
+        ),
+      ],
+      outMessage: request,
+    }),
+  });
+};
+
+const cancel = (model: Model, layout: Layout, held: Held): UpdateReturn =>
+  letGo(model, layout, { ...held, maybeTarget: Option.none() }, COPY.cancelled);
+
+const lift = (model: Model, layout: Layout, subject: Subject, by: By): UpdateReturn =>
+  Option.match(
+    Option.filter(
+      originOf(layout, subject),
+      () => !isHolding(model) && Option.isNone(model.maybeResizing),
+    ),
+    {
+      onNone: () => ({ model }),
+      onSome: (origin) => {
+        const held: Held = { subject, by, maybeTarget: Option.some(origin) };
+        return {
+          model: withHeld(model, Option.some(held)),
+          commands:
+            by._tag === "Keyboard"
+              ? [announce(fill(COPY.pickedUpByKeyboard, { subject: heldWords(layout, held) }))]
+              : [],
+        };
+      },
+    },
+  );
+
+const movePointer = (model: Model, layout: Layout, held: Held, pointer: PointerAt): UpdateReturn =>
+  By.match(held.by, {
+    Keyboard: () => ({ model }),
+    Pointer: (by) => {
+      const isCarrying =
+        by.isCarrying ||
+        Math.hypot(pointer.clientX - by.pressX, pointer.clientY - by.pressY) > CARRY_THRESHOLD;
+      const next: Held = {
+        ...held,
+        by: By.Pointer({ ...by, x: pointer.clientX, y: pointer.clientY, isCarrying }),
+        maybeTarget: isCarrying ? pointer.maybeTarget : held.maybeTarget,
+      };
+      return {
+        model: withHeld(model, Option.some(next)),
+        commands:
+          isCarrying && !by.isCarrying
+            ? [announce(fill(COPY.pickedUp, { subject: heldWords(layout, held) }))]
+            : [],
+      };
+    },
+  });
+
+/** A keyboard step of what is held, resolved from the layout, with the reel scrolled to the
+ *  column it lands by. */
+const stepHeld = (model: Model, layout: Layout, held: Held, step: Step): UpdateReturn =>
+  Option.match(
+    Option.filter(held.maybeTarget, () => held.by._tag === "Keyboard"),
+    {
+      onNone: () => ({ model }),
+      onSome: (target) => {
+        const next = steppedTarget(layout, held.subject, target, step);
+        if (Equal.equals(next, target)) {
+          return { model };
+        }
+        return {
+          model: withHeld(model, Option.some({ ...held, maybeTarget: Option.some(next) })),
+          commands: [
+            announce(
+              fill(COPY.over, {
+                subject: heldWords(layout, held),
+                where: landingWords(layout, held.subject, next),
+              }),
+            ),
+            ...scrollToTarget(model, layout, next),
+          ],
+        };
+      },
+    },
+  );
+
+const whileHeld = (model: Model, f: (held: Held) => UpdateReturn): UpdateReturn =>
+  Option.match(model.maybeHeld, { onNone: () => ({ model }), onSome: f });
+
+const whileHeldBy = (model: Model, by: By["_tag"], f: (held: Held) => UpdateReturn): UpdateReturn =>
+  whileHeld(model, (held) => (held.by._tag === by ? f(held) : { model }));
+
+/** The resize a splitter dragged `share` of its scale asks for: previewed while it moves, and
+ *  asked for when it is let go. */
+const resizeSplitter = (
+  model: Model,
+  layout: Layout,
+  share: number,
+  isLetGo: boolean,
+): UpdateReturn =>
+  Option.match(model.maybeResizing, {
+    onNone: () => ({ model }),
+    onSome: (resizing) => {
+      const maybeResize = resizeOf(layout, resizing.splitter, share);
+      if (!isLetGo) {
+        return { model: withResizing(model, Option.some({ ...resizing, maybeResize })) };
+      }
+      return Option.match(maybeResize, {
+        onNone: () => ({ model: withResizing(model, Option.none()) }),
+        onSome: (resize) => ({ model: withResizing(model, Option.none()), outMessage: resize }),
+      });
+    },
+  });
+
+/** Processes a reel Message against the layout as the application holds it now, and returns
+ *  the next Model, Commands and OutMessage. */
+export const update = (model: Model, message: Message, context: UpdateContext): UpdateReturn => {
+  const { layout } = context;
+
+  return Message.match<UpdateReturn>(message, {
+    PressedGrip: ({ subject, pointerId, clientX, clientY }) =>
+      lift(
+        model,
+        layout,
+        subject,
+        By.Pointer({
+          pointerId,
+          pressX: clientX,
+          pressY: clientY,
+          x: clientX,
+          y: clientY,
+          isCarrying: false,
+        }),
+      ),
+    PressedGripKey: ({ subject }) => lift(model, layout, subject, By.Keyboard()),
+    MovedPointer: (pointer) =>
+      whileHeldBy(model, "Pointer", (held) => movePointer(model, layout, held, pointer)),
+    ReleasedPointer: (pointer) =>
+      whileHeldBy(model, "Pointer", (held) =>
+        letGo(
+          model,
+          layout,
+          isCarried(held) ? { ...held, maybeTarget: pointer.maybeTarget } : held,
+          COPY.putBack,
+        ),
+      ),
+    CancelledPointer: () =>
+      whileHeldBy(model, "Pointer", (held) =>
+        letGo(model, layout, { ...held, maybeTarget: Option.none() }, COPY.putBack),
+      ),
+    SteppedHeld: ({ step }) =>
+      whileHeldBy(model, "Keyboard", (held) => stepHeld(model, layout, held, step)),
+    DroppedHeld: () =>
+      whileHeldBy(model, "Keyboard", (held) => letGo(model, layout, held, COPY.putBack)),
+    LeftGrip: () => whileHeldBy(model, "Keyboard", (held) => cancel(model, layout, held)),
+    PressedEscape: () =>
+      Option.isSome(model.maybeResizing)
+        ? { model: withResizing(model, Option.none()) }
+        : whileHeld(model, (held) => cancel(model, layout, held)),
+    FocusedPane: ({ paneId }) =>
+      Option.match(
+        Option.filter(
+          placeOf(layout, paneId),
+          () => !Option.exists(model.maybeFocus, (focus) => focus.paneId === paneId),
+        ),
+        {
+          onNone: () => ({ model }),
+          onSome: (place) => ({ model: focusOn(model, place) }),
+        },
+      ),
+    PressedSplitter: ({ splitter, pointerId, clientX, clientY }) =>
+      isHolding(model) || Option.isSome(model.maybeResizing) || !isSplitterPresent(layout, splitter)
+        ? { model }
+        : {
+            model: withResizing(
+              model,
+              Option.some({
+                splitter,
+                pointerId,
+                pressX: clientX,
+                pressY: clientY,
+                maybeResize: Option.none(),
+              }),
+            ),
+          },
+    MovedSplitter: ({ share }) => resizeSplitter(model, layout, share, false),
+    ReleasedSplitter: ({ share }) => resizeSplitter(model, layout, share, true),
+    CancelledSplitter: () => ({ model: withResizing(model, Option.none()) }),
+    PressedSplitterKey: ({ splitter, share }) =>
+      Option.match(resizeOf(layout, splitter, share), {
+        onNone: () => ({ model }),
+        onSome: (resize) => ({ model, outMessage: resize }),
+      }),
+    CompletedAnnounceReel: () => ({ model }),
+    CompletedFocusPane: () => ({ model }),
+    CompletedRestoreFocus: () => ({ model }),
+    CompletedFocusGrip: () => ({ model }),
+    CompletedScrollIntoView: () => ({ model }),
+    CompletedSizeLiftedPane: () => ({ model }),
+  });
+};
+
+// CAPABILITIES
+
+/**
+ * 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 const reconcile = (model: Model, context: UpdateContext): UpdateReturn => {
+  const { layout } = context;
+  const isFocusGone = Option.exists(model.maybeFocus, (focus) =>
+    Option.isNone(placeOf(layout, focus.paneId)),
+  );
+  const maybePlace = Option.filter(focusedPlace(model, layout), () =>
+    Option.isSome(model.maybeFocus),
+  );
+  const focused = Option.match(maybePlace, {
+    onNone: () => model,
+    onSome: (place) => focusOn(model, place),
+  });
+  const restore = Array.fromOption(
+    Option.map(
+      Option.filter(maybePlace, () => isFocusGone),
+      (place) => RestoreFocus({ paneHook: paneHook(model, place.pane.id) }),
+    ),
+  );
+  const settled = Option.exists(model.maybeResizing, ({ splitter }) =>
+    isSplitterPresent(layout, splitter),
+  )
+    ? focused
+    : withResizing(focused, Option.none());
+
+  return Option.match(settled.maybeHeld, {
+    onNone: () => ({ model: settled, commands: restore }),
+    onSome: (held) => {
+      if (!isPresent(layout, held.subject)) {
+        return {
+          model: withHeld(settled, Option.none()),
+          commands: [...restore, announce(COPY.gone)],
+        };
+      }
+      const maybeTarget = Option.orElse(
+        Option.filter(held.maybeTarget, (target) => isTargetPresent(layout, target)),
+        () => (held.by._tag === "Keyboard" ? originOf(layout, held.subject) : Option.none()),
+      );
+      return {
+        model: withHeld(settled, Option.some({ ...held, maybeTarget })),
+        commands: restore,
+      };
+    },
+  });
+};
+
+/** 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 const Action = Schema.Literals([
+  "FocusLeft",
+  "FocusRight",
+  "FocusUp",
+  "FocusDown",
+  "MovePaneLeft",
+  "MovePaneRight",
+  "MovePaneUp",
+  "MovePaneDown",
+  "MoveColumnLeft",
+  "MoveColumnRight",
+  "CycleWidth",
+  "PullOut",
+]);
+export type Action = typeof Action.Type;
+
+const focusStep = (model: Model, layout: Layout, place: Place): UpdateReturn => ({
+  model: focusOn(model, place),
+  commands: [
+    FocusPane({ paneHook: paneHook(model, place.pane.id) }),
+    ScrollIntoView({ hook: paneHook(model, place.pane.id) }),
+    announce(fill(COPY.focused, { pane: place.pane.label, where: placeWords(layout, place) })),
+  ],
+});
+
+/** Asks for `request` with focus kept on the pane it moves, at its new place, the reel
+ *  scrolled to it and the move said; nothing where it would change nothing. */
+const requestStep = (
+  model: Model,
+  layout: Layout,
+  place: Place,
+  subject: Subject,
+  maybeRequest: Option.Option<OutMessage>,
+): UpdateReturn =>
+  Option.match(
+    Option.filter(maybeRequest, (request) => !Equal.equals(apply(layout, request), layout)),
+    {
+      onNone: () => ({ model }),
+      onSome: (request) => {
+        const next = apply(layout, request);
+        const landing = Option.getOrElse(placeOf(next, place.pane.id), () => place);
+        const words = Option.getOrElse(subjectWords(layout, subject), () => place.pane.label);
+        const where = Option.getOrElse(whereWords(next, subject), () => WHERE_IT_WAS);
+
+        return {
+          model: focusOn(model, landing),
+          commands: [
+            ScrollIntoView({ hook: paneHook(model, place.pane.id) }),
+            announce(fill(COPY.moved, { subject: String.capitalize(words), where })),
+          ],
+          outMessage: request,
+        };
+      },
+    },
+  );
+
+const columnIdAt = (layout: Layout, index: number): Option.Option<string> =>
+  Option.map(Array.get(layout, index), ({ id }) => id);
+
+/**
+ * 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 const perform = (model: Model, action: Action, context: UpdateContext): UpdateReturn => {
+  const { layout } = context;
+
+  return Option.match(
+    Option.filter(focusedPlace(model, layout), () => !isHolding(model)),
+    {
+      onNone: () => ({ model }),
+      onSome: (place) => {
+        const { column, columnIndex, row, pane } = place;
+        const rows = column.panes.length;
+        const paneId = pane.id;
+        const ask = (
+          maybeRequest: Option.Option<OutMessage>,
+          subject: Subject = Subject.Pane({ paneId }),
+        ) => requestStep(model, layout, place, subject, maybeRequest);
+        const focusAt = (toColumn: number, toRow: number): UpdateReturn =>
+          Option.match(
+            Option.flatMap(Array.get(layout, toColumn), (found) =>
+              placeAt(
+                layout,
+                toColumn,
+                Number.clamp(toRow, { minimum: 0, maximum: found.panes.length - 1 }),
+              ),
+            ),
+            {
+              onNone: () => ({ model }),
+              onSome: (next) =>
+                next.pane.id === paneId ? { model } : focusStep(model, layout, next),
+            },
+          );
+        const sideways = (toColumn: number, edge: Option.Option<string>): UpdateReturn =>
+          ask(
+            Option.match(Array.get(layout, toColumn), {
+              onSome: (found) =>
+                Option.some(
+                  OutMessage.MovedPane({
+                    paneId,
+                    toColumnId: found.id,
+                    toIndex: Math.min(row, found.panes.length),
+                  }),
+                ),
+              onNone: () =>
+                Option.liftPredicate(
+                  OutMessage.PulledOutPane({ paneId, maybeBeforeColumnId: edge }),
+                  () => rows > 1,
+                ),
+            }),
+          );
+        const moveColumn = (maybeBefore: Option.Option<Option.Option<string>>): UpdateReturn =>
+          ask(
+            Option.map(maybeBefore, (maybeBeforeColumnId) =>
+              OutMessage.MovedColumn({ columnId: column.id, maybeBeforeColumnId }),
+            ),
+            Subject.Column({ columnId: column.id }),
+          );
+
+        return Match.value(action).pipe(
+          Match.withReturnType<UpdateReturn>(),
+          Match.when("FocusLeft", () => focusAt(columnIndex - 1, row)),
+          Match.when("FocusRight", () => focusAt(columnIndex + 1, row)),
+          Match.when("FocusUp", () => (row > 0 ? focusAt(columnIndex, row - 1) : { model })),
+          Match.when("FocusDown", () => focusAt(columnIndex, row + 1)),
+          Match.when("MovePaneUp", () =>
+            ask(
+              Option.some(
+                OutMessage.MovedPane({ paneId, toColumnId: column.id, toIndex: row - 1 }),
+              ),
+            ),
+          ),
+          Match.when("MovePaneDown", () =>
+            ask(
+              Option.some(
+                OutMessage.MovedPane({ paneId, toColumnId: column.id, toIndex: row + 1 }),
+              ),
+            ),
+          ),
+          Match.when("MovePaneLeft", () => sideways(columnIndex - 1, columnIdAt(layout, 0))),
+          Match.when("MovePaneRight", () => sideways(columnIndex + 1, Option.none())),
+          Match.when("MoveColumnLeft", () =>
+            moveColumn(
+              Option.map(columnIdAt(layout, columnIndex - 1), (before) => Option.some(before)),
+            ),
+          ),
+          Match.when("MoveColumnRight", () =>
+            moveColumn(
+              Option.map(columnIdAt(layout, columnIndex + 1), () =>
+                columnIdAt(layout, columnIndex + 2),
+              ),
+            ),
+          ),
+          Match.when("CycleWidth", () => {
+            const width = nextPreset(column.width);
+            return {
+              model,
+              commands: [
+                ScrollIntoView({ hook: paneHook(model, paneId) }),
+                announce(fill(COPY.widened, { column: columnIndex + 1, width: widthWords(width) })),
+              ],
+              outMessage: OutMessage.ResizedColumn({ columnId: column.id, width }),
+            };
+          }),
+          Match.when("PullOut", () =>
+            ask(
+              Option.liftPredicate(
+                OutMessage.PulledOutPane({
+                  paneId,
+                  maybeBeforeColumnId: columnIdAt(layout, columnIndex + 1),
+                }),
+                () => rows > 1,
+              ),
+            ),
+          ),
+          Match.exhaustive,
+        );
+      },
+    },
+  );
+};
+
+// SUBSCRIPTION
+
+/** How near the reel's edges a carried pane scrolls it, how fast, and the longest frame it
+ *  counts, so a tab coming back from the background does not jump. */
+const EDGE_SCROLL = 40;
+const EDGE_SCROLL_PIXELS_PER_MILLI = 0.8;
+const LONGEST_FRAME_MILLIS = 50;
+
+/** A column as the pointer reads it from the page: its edges, and the middles of its slots
+ *  but the held pane's. */
+const columnBoxOf = (element: Element, subject: Subject): ColumnBox => {
+  const rect = element.getBoundingClientRect();
+  const heldId = Subject.match(subject, {
+    Pane: ({ paneId }) => Option.some(paneId),
+    Column: () => Option.none<string>(),
+  });
+  return {
+    id: element.getAttribute("data-reel-column") ?? "",
+    left: rect.left,
+    right: rect.right,
+    slotMiddles: Array.map(
+      Array.filter(
+        Array.fromIterable(element.querySelectorAll("[data-reel-slot]")),
+        (slot) => !Option.contains(heldId, slot.getAttribute("data-reel-slot") ?? ""),
+      ),
+      (slot) => {
+        const slotRect = slot.getBoundingClientRect();
+        return slotRect.top + slotRect.height / 2;
+      },
+    ),
+  };
+};
+
+/** Where a pointer at (`clientX`, `clientY`) would drop `subject` in the reel `reelHook`
+ *  names, read from where its columns and their slots sit: none outside the reel. */
+const pointerTarget = (
+  reelHook: string,
+  subject: Subject,
+  clientX: number,
+  clientY: number,
+): Option.Option<Target> =>
+  Option.map(
+    Option.filter(scrollerOf(reelHook), (view) => {
+      const rect = view.getBoundingClientRect();
+      return (
+        clientX >= rect.left &&
+        clientX <= rect.right &&
+        clientY >= rect.top &&
+        clientY <= rect.bottom
+      );
+    }),
+    (view) =>
+      targetAtPoint(
+        subject,
+        Array.map(Array.fromIterable(view.querySelectorAll("[data-reel-column]")), (element) =>
+          columnBoxOf(element, subject),
+        ),
+        clientX,
+        clientY,
+      ),
+  );
+
+const PointerHold = Schema.Struct({
+  reelHook: Schema.String,
+  subject: Subject,
+  pointerId: Schema.Number,
+});
+type PointerHold = typeof PointerHold.Type;
+
+const pointerAt = (hold: PointerHold, event: PointerEvent): PointerAt => ({
+  clientX: event.clientX,
+  clientY: event.clientY,
+  maybeTarget: pointerTarget(hold.reelHook, hold.subject, event.clientX, event.clientY),
+});
+
+/** The pressing pointer's moves, release and cancel; another pointer's are not the reel's. */
+const pointerMessages = (hold: PointerHold): Stream.Stream<Message> =>
+  Stream.map(pressingPointer(hold.pointerId), (event) =>
+    Match.value(event.type).pipe(
+      Match.when("pointermove", () => Message.MovedPointer(pointerAt(hold, event))),
+      Match.when("pointerup", () => Message.ReleasedPointer(pointerAt(hold, event))),
+      Match.orElse(() => Message.CancelledPointer()),
+    ),
+  );
+
+/** Which way a pointer at `at` scrolls a box from `low` to `high`: towards the edge it is near. */
+const towards = (at: number, low: number, high: number): number => {
+  if (at < low + EDGE_SCROLL) {
+    return -1;
+  } else if (at > high - EDGE_SCROLL) {
+    return 1;
+  } else {
+    return 0;
+  }
+};
+
+/** While a pointer carries a pane or a column near the reel's edges, the reel scrolls that way,
+ *  by the time each frame took, so a drop can reach a column or a place out of view. */
+const edgeScroll = (hold: PointerHold): Stream.Stream<never> =>
+  Stream.callback<never>(() =>
+    Effect.acquireRelease(
+      Effect.sync(() => {
+        const state = {
+          maybeAt: Option.none<Readonly<{ x: number; y: number }>>(),
+          frame: 0,
+          last: performance.now(),
+        };
+        const onMove = (event: PointerEvent): void => {
+          if (event.pointerId === hold.pointerId) {
+            state.maybeAt = Option.some({ x: event.clientX, y: event.clientY });
+          }
+        };
+        const step = (now: number): void => {
+          const distance =
+            Math.min(now - state.last, LONGEST_FRAME_MILLIS) * EDGE_SCROLL_PIXELS_PER_MILLI;
+          state.last = now;
+          Option.map(
+            Option.all({ view: scrollerOf(hold.reelHook), at: state.maybeAt }),
+            ({ view, at }) => {
+              const rect = view.getBoundingClientRect();
+              view.scrollLeft += towards(at.x, rect.left, rect.right) * distance;
+              view.scrollTop += towards(at.y, rect.top, rect.bottom) * distance;
+            },
+          );
+          state.frame = requestAnimationFrame(step);
+        };
+        document.addEventListener("pointermove", onMove);
+        state.frame = requestAnimationFrame(step);
+        return { state, onMove };
+      }),
+      ({ state, onMove }) =>
+        Effect.sync(() => {
+          cancelAnimationFrame(state.frame);
+          document.removeEventListener("pointermove", onMove);
+        }),
+    ).pipe(Effect.flatMap(() => Effect.never)),
+  );
+
+const SplitterHold = Schema.Struct({
+  reelHook: Schema.String,
+  splitter: Splitter,
+  pointerId: Schema.Number,
+  pressX: Schema.Number,
+  pressY: Schema.Number,
+});
+type SplitterHold = typeof SplitterHold.Type;
+
+const heightOf = (element: Element): number => element.getBoundingClientRect().height;
+
+/** The pixels a splitter's share is counted in, read when its drag begins: the reel's width
+ *  less a gutter for a width (a column is `width × (view − gutter) − gutter` wide), its
+ *  column's panes' height for a pane splitter. */
+const scaleOf = (hold: SplitterHold): number =>
+  Option.getOrElse(
+    Option.map(scrollerOf(hold.reelHook), (view) =>
+      Splitter.match(hold.splitter, {
+        Width: () =>
+          view.clientWidth -
+          Option.getOrElse(
+            Option.map(
+              Option.fromNullishOr(view.querySelector(".reel-gap")),
+              (gap) => gap.getBoundingClientRect().width,
+            ),
+            () => 0,
+          ),
+        Split: ({ abovePaneId }) =>
+          Number.sumAll(
+            Array.map(
+              Array.fromIterable(
+                view
+                  .querySelector(`[data-reel-slot="${CSS.escape(abovePaneId)}"]`)
+                  ?.closest(".reel-column")
+                  ?.querySelectorAll("[data-reel-slot]") ?? [],
+              ),
+              heightOf,
+            ),
+          ),
+      }),
+    ),
+    () => 0,
+  );
+
+/** The dragging pointer's moves, release and cancel, as shares of the splitter's scale. */
+const splitterMessages = (hold: SplitterHold): Stream.Stream<Message> =>
+  Stream.suspend(() => {
+    const scale = scaleOf(hold);
+    const shareOf = (event: PointerEvent): number => {
+      const moved =
+        hold.splitter._tag === "Width" ? event.clientX - hold.pressX : event.clientY - hold.pressY;
+      return scale > 0 ? moved / scale : 0;
+    };
+    return Stream.map(pressingPointer(hold.pointerId), (event) =>
+      Match.value(event.type).pipe(
+        Match.when("pointermove", () => Message.MovedSplitter({ share: shareOf(event) })),
+        Match.when("pointerup", () => Message.ReleasedSplitter({ share: shareOf(event) })),
+        Match.orElse(() => Message.CancelledSplitter()),
+      ),
+    );
+  });
+
+const pointerHoldOf = (model: Model, isCarryingOnly: boolean): Option.Option<PointerHold> =>
+  Option.flatMap(model.maybeHeld, ({ subject, by }) =>
+    By.match(by, {
+      Keyboard: () => Option.none(),
+      Pointer: ({ pointerId, isCarrying }) =>
+        isCarryingOnly && !isCarrying
+          ? Option.none()
+          : Option.some({ reelHook: model.id, subject, pointerId }),
+    }),
+  );
+
+const reelSubscriptions = Subscription.make<Model, Message>()((entry) => ({
+  pointer: entry(
+    { maybeHold: Schema.Option(PointerHold) },
+    {
+      modelToDependencies: (model) => ({ maybeHold: pointerHoldOf(model, false) }),
+      dependenciesToStream: ({ maybeHold }) =>
+        Option.match(maybeHold, {
+          onNone: () => Stream.empty,
+          onSome: (hold) => Stream.merge(pointerMessages(hold), markDragging),
+        }),
+    },
+  ),
+  edge: entry(
+    { maybeHold: Schema.Option(PointerHold) },
+    {
+      modelToDependencies: (model) => ({ maybeHold: pointerHoldOf(model, true) }),
+      dependenciesToStream: ({ maybeHold }) =>
+        Option.match(maybeHold, { onNone: () => Stream.empty, onSome: edgeScroll }),
+    },
+  ),
+  resize: entry(
+    { maybeHold: Schema.Option(SplitterHold) },
+    {
+      modelToDependencies: (model) => ({
+        maybeHold: Option.map(model.maybeResizing, ({ splitter, pointerId, pressX, pressY }) => ({
+          reelHook: model.id,
+          splitter,
+          pointerId,
+          pressX,
+          pressY,
+        })),
+      }),
+      dependenciesToStream: ({ maybeHold }) =>
+        Option.match(maybeHold, {
+          onNone: () => Stream.empty,
+          onSome: (hold) => Stream.merge(splitterMessages(hold), markDragging),
+        }),
+    },
+  ),
+  escape: entry(
+    { isHolding: Schema.Boolean },
+    {
+      modelToDependencies: (model) => ({
+        isHolding: isHolding(model) || Option.isSome(model.maybeResizing),
+      }),
+      dependenciesToStream: ({ isHolding: isHoldingNow }) =>
+        isHoldingNow ? escapeKeys(Message.PressedEscape()) : Stream.empty,
+    },
+  ),
+}));
+
+/** 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 const subscriptions = <Prefix extends string>(keyPrefix: Prefix) =>
+  prefixKeys(keyPrefix, reelSubscriptions);
+
+// MOUNT
+
+/** 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 const SizeLiftedPane = Mount.define("SizeLiftedPane", {
+  args: { sourceSelector: Schema.String, pressX: Schema.Number, pressY: Schema.Number },
+  messages: [Message.CompletedSizeLiftedPane],
+  execute: ({ element, sourceSelector, pressX, pressY }) =>
+    Effect.sync(() => {
+      measureLift(element, sourceSelector, pressX, pressY);
+      return Message.CompletedSizeLiftedPane();
+    }),
+});
+
+// VIEW
+
+/** 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;
+}>;
+
+type ReelInfo = Readonly<{
+  model: Model;
+  layout: Layout;
+  toPaneView: (pane: Pane, render: PaneRender) => Html;
+  maybeFocusedId: Option.Option<string>;
+  maybeMark: Option.Option<Target>;
+  heldPaneIds: ReadonlySet<string>;
+}>;
+
+const helpId = (model: Model): string => `${model.id}-grip-help`;
+
+/** The share of the reel or the column a splitter's arrow key moves. */
+const SPLITTER_STEP = 0.05;
+
+const HELD_STEPS: Readonly<Record<string, Step>> = {
+  ArrowUp: "Up",
+  ArrowDown: "Down",
+  ArrowLeft: "Left",
+  ArrowRight: "Right",
+};
+
+const isPlain = (modifiers: KeyboardModifiers): boolean =>
+  !modifiers.shiftKey && !modifiers.ctrlKey && !modifiers.altKey && !modifiers.metaKey;
+
+const isDropKey = (key: string): boolean => key === " " || key === "Enter";
+
+/** The anchor that pins a pane to its slot. Pane ids are the application's, so the name is
+ *  the pane's place in the id order, which the slot and the pane read from one list. */
+const anchorName = (index: number): string => `--reel-${index}`;
+
+/** The panes in their layer's order: by id, which no move changes. */
+const byId = Order.mapInput(Order.String, (pane: Pane) => pane.id);
+
+/** Where a carried drop would land, marked: none where it would change nothing. */
+const markOf = (model: Model, layout: Layout): Option.Option<Target> =>
+  Option.flatMap(Option.filter(model.maybeHeld, isCarried), (held) =>
+    Option.filter(held.maybeTarget, (target) =>
+      Option.isSome(requestOf(layout, held.subject, target)),
+    ),
+  );
+
+const heldPanesOf = (model: Model, layout: Layout): ReadonlySet<string> =>
+  new Set(
+    Option.match(Option.filter(model.maybeHeld, isCarried), {
+      onNone: () => [],
+      onSome: ({ subject }) =>
+        Subject.match(subject, {
+          Pane: ({ paneId }) => [paneId],
+          Column: ({ columnId }) =>
+            Option.match(columnOf(layout, columnId), {
+              onNone: () => [],
+              onSome: (column) => Array.map(column.panes, (pane) => pane.id),
+            }),
+        }),
+    }),
+  );
+
+const gripView = (model: Model, subject: Subject, label: string, h: HtmlBuilder<Message>): Html => {
+  const isIdleNow = !isHolding(model) && Option.isNone(model.maybeResizing);
+  const maybeHeldHere = Option.filter(model.maybeHeld, (held) =>
+    Equal.equals(held.subject, subject),
+  );
+  const isHeld = Option.exists(maybeHeldHere, isCarried);
+  const isKeyboardHeld = Option.exists(maybeHeldHere, (held) => held.by._tag === "Keyboard");
+
+  // the keyboard holds an item on its grip: the keys are the grip's own, and focus leaving the
+  // grip puts the item back, so a field reached by Tab types as it should
+  const onGripKey: Attribute<Message> = h.OnKeyDownPreventDefault((key, modifiers) => {
+    if (!isPlain(modifiers)) {
+      return Option.none();
+    } else if (isKeyboardHeld) {
+      return isDropKey(key)
+        ? Option.some(Message.DroppedHeld())
+        : Option.map(Option.fromNullishOr(HELD_STEPS[key]), (step) =>
+            Message.SteppedHeld({ step }),
+          );
+    } else {
+      return Option.liftPredicate(
+        Message.PressedGripKey({ subject }),
+        () => isIdleNow && isDropKey(key),
+      );
+    }
+  });
+
+  const onGripPress: Attribute<Message> = h.OnPointerDown(
+    (_pointerType, button, _screenX, _screenY, _time, clientX, clientY, pointerId) =>
+      Option.liftPredicate(
+        Message.PressedGrip({ subject, pointerId, clientX, clientY }),
+        () => isIdleNow && button === LEFT_BUTTON,
+      ),
+  );
+
+  return IconButton.view(
+    {
+      glyph: "grip",
+      label,
+      isQuiet: true,
+      attributes: [
+        h.DataAttribute("reel-grip", subjectHook(model, subject)),
+        h.AriaRoleDescription("draggable"),
+        h.AriaDescribedBy(helpId(model)),
+        Button.pressedAttribute(isHeld, h),
+        onGripKey,
+        onGripPress,
+        ...(isKeyboardHeld ? [h.OnBlur(Message.LeftGrip())] : []),
+      ],
+    },
+    h,
+  );
+};
+
+/** A splitter's handlers: a pointer drags it, and its arrows (the side ones for a width, up
+ *  and down for a height), unmodified, step it; a modified arrow is the application's. */
+const splitterAttributes = (
+  model: Model,
+  splitter: Splitter,
+  h: HtmlBuilder<Message>,
+): ReadonlyArray<Attribute<Message>> => {
+  const [less, more] =
+    splitter._tag === "Width" ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+  return [
+    h.OnPointerDown(
+      (_pointerType, button, _screenX, _screenY, _time, clientX, clientY, pointerId) =>
+        Option.liftPredicate(
+          Message.PressedSplitter({ splitter, pointerId, clientX, clientY }),
+          () => button === LEFT_BUTTON && !isHolding(model) && Option.isNone(model.maybeResizing),
+        ),
+    ),
+    h.OnKeyDownPreventDefault((key, modifiers) =>
+      Option.liftPredicate(
+        Message.PressedSplitterKey({
+          splitter,
+          share: key === more ? SPLITTER_STEP : -SPLITTER_STEP,
+        }),
+        () => isPlain(modifiers) && (key === less || key === more),
+      ),
+    ),
+  ];
+};
+
+const dropClass = (info: ReelInfo, column: Column, paneId: string): string =>
+  Option.match(
+    Option.flatMap(info.maybeMark, (mark) => {
+      if (mark._tag !== "Into" || mark.columnId !== column.id) {
+        return Option.none();
+      }
+      const others = Array.filter(column.panes, (pane) => !info.heldPaneIds.has(pane.id));
+      return Option.orElse(
+        Option.map(
+          Option.filter(Array.get(others, mark.index), (pane) => pane.id === paneId),
+          () => " drop-before",
+        ),
+        () =>
+          Option.map(
+            Option.filter(
+              Array.last(others),
+              (pane) => mark.index >= others.length && pane.id === paneId,
+            ),
+            () => " drop-after",
+          ),
+      );
+    }),
+    { onNone: () => "", onSome: (mark) => mark },
+  );
+
+const isGapMarked = (info: ReelInfo, maybeBeforeColumnId: Option.Option<string>): boolean =>
+  Option.exists(
+    info.maybeMark,
+    (mark) => mark._tag === "Gap" && Equal.equals(mark.maybeBeforeColumnId, maybeBeforeColumnId),
+  );
+
+const slotView = (
+  info: ReelInfo,
+  anchors: ReadonlyMap<string, string>,
+  column: Column,
+  pane: Pane,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.keyed("div")(pane.id, [
+    h.Class(`reel-slot${dropClass(info, column, pane.id)}`),
+    h.DataAttribute("reel-slot", pane.id),
+    h.Style({ "--reel-weight": `${pane.weight}`, "--reel-anchor": anchors.get(pane.id) ?? "none" }),
+  ]);
+
+const splitView = (model: Model, above: Pane, share: number, h: HtmlBuilder<Message>): Html =>
+  h.keyed("div")(`split:${above.id}`, [
+    h.Class("reel-split"),
+    h.Role("separator"),
+    h.AriaOrientation("horizontal"),
+    h.AriaLabel(fill(COPY.heightLabel, { pane: above.label })),
+    h.AriaValuemin(0),
+    h.AriaValuemax(100),
+    h.AriaValuenow(Math.round(share * 100)),
+    h.Tabindex(0),
+    h.DataAttribute("reel-split", above.id),
+    ...splitterAttributes(model, Splitter.Split({ abovePaneId: above.id }), h),
+  ]);
+
+const columnView = (
+  info: ReelInfo,
+  anchors: ReadonlyMap<string, string>,
+  column: Column,
+  index: number,
+  h: HtmlBuilder<Message>,
+): ReadonlyArray<Html> => {
+  const { model, layout } = info;
+  const total = Number.sumAll(Array.map(column.panes, (pane) => pane.weight));
+  const stack = Array.flatMap(column.panes, (pane, row) => [
+    ...Array.fromOption(
+      Option.map(Array.get(column.panes, row - 1), (above) =>
+        splitView(model, above, total > 0 ? above.weight / total : 0, h),
+      ),
+    ),
+    slotView(info, anchors, column, pane, h),
+  ]);
+  const maybeNextId = Option.map(Array.get(layout, index + 1), ({ id }) => id);
+
+  return [
+    h.keyed("div")(
+      `column:${column.id}`,
+      [
+        h.Class("reel-column"),
+        h.DataAttribute("reel-column", column.id),
+        h.DataAttribute("reel-hook", columnHook(model, column.id)),
+        h.Style({ "--reel-width": `${column.width}` }),
+      ],
+      [
+        h.div(
+          [h.Class("reel-column-head")],
+          [
+            gripView(
+              model,
+              Subject.Column({ columnId: column.id }),
+              fill(COPY.columnGrip, { column: index + 1 }),
+              h,
+            ),
+            h.span([h.Class("reel-width"), h.AriaHidden(true)], [widthMark(column.width)]),
+          ],
+        ),
+        ...stack,
+      ],
+    ),
+    h.keyed("div")(`resize:${column.id}`, [
+      h.Class(`reel-gap reel-resize${isGapMarked(info, maybeNextId) ? " drop-here" : ""}`),
+      h.Role("separator"),
+      h.AriaOrientation("vertical"),
+      h.AriaLabel(fill(COPY.widthLabel, { column: index + 1 })),
+      h.AriaValuemin(0),
+      h.AriaValuemax(100),
+      h.AriaValuenow(Math.round(column.width * 100)),
+      h.AriaValuetext(widthWords(column.width)),
+      h.Tabindex(0),
+      h.DataAttribute("reel-resize", column.id),
+      ...splitterAttributes(model, Splitter.Width({ columnId: column.id }), h),
+    ]),
+  ];
+};
+
+const paneLayerView = (
+  info: ReelInfo,
+  panes: ReadonlyArray<Pane>,
+  anchors: ReadonlyMap<string, string>,
+  h: HtmlBuilder<Message>,
+): Html => {
+  const { model } = info;
+
+  // NOTE: the panes keep one order in the page, by id, whatever the layout: a move changes
+  // only where each is anchored, so no pane's element is taken out and put back, which would
+  // drop focus, a terminal's scroll and whatever a Mount holds inside it.
+  return h.div(
+    [h.Class("reel-panes")],
+    Array.map(panes, (pane) => {
+      const isFocused = Option.contains(info.maybeFocusedId, pane.id);
+      const isHeld = info.heldPaneIds.has(pane.id);
+      return h.keyed("div")(
+        pane.id,
+        [
+          h.Class(`reel-pane${isFocused ? " focused" : ""}${isHeld ? " drag-dim" : ""}`),
+          h.DataAttribute("reel-pane", paneHook(model, pane.id)),
+          h.Style({ "--reel-anchor": anchors.get(pane.id) ?? "none" }),
+          h.Tabindex(-1),
+          h.OnFocusEnter(Message.FocusedPane({ paneId: pane.id })),
+        ],
+        [
+          info.toPaneView(pane, {
+            grip: gripView(
+              model,
+              Subject.Pane({ paneId: pane.id }),
+              fill(COPY.paneGrip, { pane: pane.label }),
+              h,
+            ),
+            id: `${model.id}-${pane.id}`,
+          }),
+        ],
+      );
+    }),
+  );
+};
+
+/** The copy a pointer carries: the held panes' title bars, drawn by the reel from their
+ *  labels, so whatever a pane holds (a terminal, a canvas) is never built twice. */
+const liftedCopyView = (info: ReelInfo, h: HtmlBuilder<Message>): ReadonlyArray<Html> => {
+  const { model, layout } = info;
+
+  return Array.fromOption(
+    Option.flatMap(model.maybeHeld, (held) =>
+      By.match(held.by, {
+        Keyboard: () => Option.none(),
+        Pointer: ({ isCarrying, pressX, pressY, x, y }) =>
+          Option.liftPredicate(
+            h.div(
+              [
+                h.Class("reel-lift"),
+                h.Style({ transform: `translate3d(${x}px, ${y}px, 0)` }),
+                h.AriaHidden(true),
+                h.Inert(true),
+                h.OnMount(
+                  SizeLiftedPane({
+                    sourceSelector: Subject.match(held.subject, {
+                      Pane: () =>
+                        `[data-reel-pane="${CSS.escape(subjectHook(model, held.subject))}"]`,
+                      Column: () =>
+                        `[data-reel-hook="${CSS.escape(subjectHook(model, held.subject))}"]`,
+                    }),
+                    pressX,
+                    pressY,
+                  }),
+                ),
+              ],
+              [
+                h.div(
+                  [h.Class("reel-lifted")],
+                  Array.map(
+                    Array.filter(
+                      Array.flatMap(layout, (column) => column.panes),
+                      (pane) => info.heldPaneIds.has(pane.id),
+                    ),
+                    (pane) =>
+                      h.div(
+                        [h.Class("panel window")],
+                        [
+                          h.div(
+                            [h.Class("panel-tb")],
+                            [
+                              h.span(
+                                [h.Class("panel-lead")],
+                                [
+                                  h.span(
+                                    [h.Class("iconbtn quiet")],
+                                    [Glyph.view({ name: "grip" }, h)],
+                                  ),
+                                ],
+                              ),
+                              h.h2([], [pane.label]),
+                            ],
+                          ),
+                        ],
+                      ),
+                  ),
+                ),
+              ],
+            ),
+            () => isCarrying,
+          ),
+      }),
+    ),
+  );
+};
+
+/** The layout as it prints, with a dragged splitter's resize shown before it is asked for. */
+const previewed = (model: Model, layout: Layout): Layout =>
+  Option.match(
+    Option.flatMap(model.maybeResizing, ({ maybeResize }) => maybeResize),
+    { onNone: () => layout, onSome: (resize) => apply(layout, resize) },
+  );
+
+/**
+ * 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 const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html => {
+  const { label, toPaneView } = viewInputs;
+  const layout = previewed(model, viewInputs.layout);
+  const panes = Array.sort(
+    Array.flatMap(layout, (column) => column.panes),
+    byId,
+  );
+  const anchors = new Map(Array.map(panes, (pane, index) => [pane.id, anchorName(index)] as const));
+  const info: ReelInfo = {
+    model,
+    layout,
+    toPaneView,
+    maybeFocusedId: focusedPaneId(model, layout),
+    maybeMark: markOf(model, layout),
+    heldPaneIds: heldPanesOf(model, layout),
+  };
+
+  return h.div(
+    [h.Class("reel"), h.Role("group"), h.AriaLabel(label), h.DataAttribute("reel", model.id)],
+    [
+      h.div(
+        [h.Class("reel-view")],
+        [
+          h.div(
+            [h.Class("reel-track")],
+            [
+              h.keyed("div")("gap:start", [
+                h.Class(
+                  `reel-gap${
+                    isGapMarked(
+                      info,
+                      Option.map(Array.head(layout), ({ id }) => id),
+                    )
+                      ? " drop-here"
+                      : ""
+                  }`,
+                ),
+              ]),
+              ...Array.flatMap(layout, (column, index) =>
+                columnView(info, anchors, column, index, h),
+              ),
+              paneLayerView(info, panes, anchors, h),
+            ],
+          ),
+        ],
+      ),
+      h.p([h.Id(helpId(model)), h.Class("sr-only")], [COPY.gripHelp]),
+      ...liftedCopyView(info, h),
+    ],
+  );
+});