@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/reel/reel.ts

@@ -7,6 +7,7 @@ import {
   Option,
   Order,
   Queue,
+  Record,
   Schema,
   Stream,
   String,
@@ -24,6 +25,7 @@ import type * as Update from "foldkit/update";
 
 import * as Announcer from "../announcer/announcer.ts";
 import * as Button from "../button/button.ts";
+import { htmlElement } from "../dom/html-element.ts";
 import {
   LEFT_BUTTON,
   escapeKeys,
@@ -33,17 +35,11 @@ import {
   splitterAttributes,
 } from "../drag/drag.ts";
 import * as Glyph from "../glyph/glyph.ts";
-import * as IconButton from "../iconButton/iconButton.ts";
+import * as IconButton from "../icon-button/icon-button.ts";
 import { isPlain } from "../keys/keys.ts";
-import { prefixKeys } from "../subscription/prefixKeys.ts";
-
+import { prefixKeys } from "../subscription/prefix-keys.ts";
 import {
-  type Column,
-  type ColumnBox,
-  type Layout,
   OutMessage,
-  type Pane,
-  type Place,
   Resize,
   Splitter,
   Step,
@@ -71,15 +67,11 @@ import {
   whereWords,
   widthWords,
 } from "./layout.ts";
+import type { Column, ColumnBox, Layout, Pane, Place } from "./layout.ts";
 
-// MODEL
-
-/** How the keyboard carries what it holds: said on the grip and once it is picked up. */
-const KEYBOARD_MOVES = "Arrow keys move it, space drops it, escape or tab puts it back.";
+const KEYBOARD_MOVES =
+  "Arrow keys move it, space drops it, escape or tab puts it back.";
 
-/** The words a reel says. `{pane}` is a pane's label, `{subject}` what moves (the held pane,
- *  or a column a key moves, by its first pane), `{where}` a place and `{column}` a column's
- *  number. */
 const COPY = {
   paneGrip: "Move {pane}",
   gripHelp: `Press space to pick it up. ${KEYBOARD_MOVES}`,
@@ -98,40 +90,42 @@ const COPY = {
   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 });
+const Focus = Schema.Struct({
+  paneId: Schema.String,
+  column: Schema.Finite,
+  row: Schema.Finite,
+});
 
-/** 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,
+    pointerId: Schema.Finite,
+    pressX: Schema.Finite,
+    pressY: Schema.Finite,
+    x: Schema.Finite,
+    y: Schema.Finite,
     isCarrying: Schema.Boolean,
   },
   Keyboard: {},
 });
+
 type By = typeof By.Type;
 
-/** The pane held, how, and where it would land: none while a pointer is outside the reel. */
 const Held = Schema.Struct({
   paneId: Schema.String,
   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,
+  pointerId: Schema.Finite,
+  pressX: Schema.Finite,
+  pressY: Schema.Finite,
   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
@@ -142,30 +136,31 @@ export const Model = Schema.Struct({
   maybeHeld: Schema.Option(Held),
   maybeResizing: Schema.Option(Resizing),
 });
+
 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 const Arrangement = Schema.Literals(["Strip", "Tabs"]);
-export type Arrangement = typeof Arrangement.Type;
 
-// MESSAGE
+export type Arrangement = typeof Arrangement.Type;
 
 const PointerAt = Schema.Struct({
-  clientX: Schema.Number,
-  clientY: Schema.Number,
+  clientX: Schema.Finite,
+  clientY: Schema.Finite,
   maybeTarget: Schema.Option(Target),
 });
+
 type PointerAt = typeof PointerAt.Type;
 
 /** Union of all Messages a reel can produce. */
 export const Message = defineMessageUnion({
   PressedGrip: {
     paneId: Schema.String,
-    pointerId: Schema.Number,
-    clientX: Schema.Number,
-    clientY: Schema.Number,
+    pointerId: Schema.Finite,
+    clientX: Schema.Finite,
+    clientY: Schema.Finite,
   },
   PressedGripKey: { paneId: Schema.String },
   MovedPointer: PointerAt.fields,
@@ -180,14 +175,14 @@ export const Message = defineMessageUnion({
   SteppedTab: { paneId: Schema.String },
   PressedSplitter: {
     splitter: Splitter,
-    pointerId: Schema.Number,
-    clientX: Schema.Number,
-    clientY: Schema.Number,
+    pointerId: Schema.Finite,
+    clientX: Schema.Finite,
+    clientY: Schema.Finite,
   },
-  MovedSplitter: { share: Schema.Number },
-  ReleasedSplitter: { share: Schema.Number },
+  MovedSplitter: { share: Schema.Finite },
+  ReleasedSplitter: { share: Schema.Finite },
   CancelledSplitter: {},
-  PressedSplitterKey: { splitter: Splitter, share: Schema.Number },
+  PressedSplitterKey: { splitter: Splitter, share: Schema.Finite },
   CompletedAnnounceReel: {},
   CompletedFocusPane: {},
   CompletedFocusTab: {},
@@ -195,9 +190,8 @@ export const Message = defineMessageUnion({
   CompletedScrollIntoView: {},
   CompletedSizeLiftedPane: {},
 });
-export type Message = typeof Message.Type;
 
-// INIT
+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. */
@@ -211,72 +205,77 @@ export const init = (config: InitConfig): Model => ({
   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 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 }));
-      }),
+
+        return placeAt(
+          layout,
+          column,
+          Number.clamp(focus.row, { minimum: 0, maximum: rows - 1 })
+        );
+      })
     ),
-    () => firstPlace(layout),
+    () => 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> =>
+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 nothing is held and no splitter is dragged: a grip or a splitter may be pressed. */
-const isIdle = (model: Model): boolean => !isHolding(model) && Option.isNone(model.maybeResizing);
+const isIdle = (model: Model): boolean =>
+  !isHolding(model) && Option.isNone(model.maybeResizing);
 
-/** 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
+  By.match(held.by, {
+    Pointer: ({ isCarrying }) => isCarrying,
+    Keyboard: () => true,
+  });
 
-const paneHook = (model: Model, paneId: string): string => `${model.id}/pane/${paneId}`;
+const paneHook = (model: Model, paneId: string): string =>
+  `${model.id}/pane/${paneId}`;
 
-const columnHook = (model: Model, columnId: string): string => `${model.id}/column/${columnId}`;
+const columnHook = (model: Model, columnId: string): string =>
+  `${model.id}/column/${columnId}`;
 
-const tabHook = (model: Model, paneId: string): string => `${model.id}/tab/${paneId}`;
+const tabHook = (model: Model, paneId: string): string =>
+  `${model.id}/tab/${paneId}`;
 
 const scrollerOf = (reelHook: string): Option.Option<HTMLElement> =>
-  Option.fromNullishOr(
-    document.querySelector<HTMLElement>(`[data-reel="${CSS.escape(reelHook)}"] > .reel-view`),
-  );
+  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)}"]`),
-  );
+  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 });
+  Option.getOrElse(htmlElement("[data-reel-focus]", pane), () => 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())),
+  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
@@ -290,10 +289,14 @@ export const FocusPane = Command.define("FocusPane", {
       yield* Render.afterCommit;
       yield* Effect.sync(() => {
         Option.map(
-          Option.filter(paneElement(hook), (pane) => !pane.contains(document.activeElement)),
-          focusInto,
+          Option.filter(
+            paneElement(hook),
+            (pane) => !pane.contains(document.activeElement)
+          ),
+          focusInto
         );
       });
+
       return Message.CompletedFocusPane();
     }),
 });
@@ -307,8 +310,14 @@ export const FocusTab = Command.define("FocusTab", {
     Effect.gen(function* () {
       yield* Render.afterCommit;
       yield* Effect.sync(() => {
-        document.querySelector<HTMLElement>(`[data-reel-tab="${CSS.escape(hook)}"]`)?.focus();
+        Option.map(
+          htmlElement(`[data-reel-tab="${CSS.escape(hook)}"]`),
+          (tab) => {
+            tab.focus();
+          }
+        );
       });
+
       return Message.CompletedFocusTab();
     }),
 });
@@ -323,10 +332,12 @@ export const RestoreFocus = Command.define("RestoreFocus", {
       yield* Render.afterCommit;
       yield* Effect.sync(() => {
         const active = document.activeElement;
+
         if (active === null || active === document.body) {
           Option.map(paneElement(hook), focusInto);
         }
       });
+
       return Message.CompletedRestoreFocus();
     }),
 });
@@ -343,42 +354,52 @@ export const ScrollIntoView = Command.define("ScrollIntoView", {
       yield* Effect.sync(() => {
         document
           .querySelector(
-            `[data-reel-pane="${CSS.escape(hook)}"], [data-reel-hook="${CSS.escape(hook)}"]`,
+            `[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, and how the view shows it (`Strip` when not given), which
  *  `perform` reads. */
-export type UpdateContext = Readonly<{ layout: Layout; arrangement?: Arrangement }>;
+export type UpdateContext = Readonly<{
+  layout: Layout;
+  arrangement?: Arrangement;
+}>;
 
 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 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 }),
+      Option.some({
+        paneId: place.pane.id,
+        column: place.columnIndex,
+        row: place.row,
+      }),
   });
 
 const announce = (text: string) => AnnounceReel({ text });
 
 const heldLabel = (layout: Layout, held: Held): string =>
-  Option.getOrElse(subjectWords(layout, Subject.Pane({ paneId: held.paneId })), () => "");
+  Option.getOrElse(
+    subjectWords(layout, Subject.Pane({ paneId: held.paneId })),
+    () => ""
+  );
 
 const heldWords = (layout: Layout, held: Held): string =>
   String.capitalize(heldLabel(layout, held));
@@ -386,21 +407,26 @@ const heldWords = (layout: Layout, held: Held): string =>
 const scrollToTarget = (model: Model, layout: Layout, target: Target) =>
   Array.fromOption(
     Option.map(columnOfTarget(layout, target), (columnId) =>
-      ScrollIntoView({ hook: columnHook(model, columnId) }),
-    ),
+      ScrollIntoView({ hook: columnHook(model, columnId) })
+    )
   );
 
-/** Lets go of the held pane: 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. */
-const letGo = (model: Model, layout: Layout, held: Held, putBack: string): UpdateReturn => {
+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.paneId, target),
+    requestOf(layout, held.paneId, target)
   );
 
   return Option.match(maybeRequest, {
@@ -415,10 +441,13 @@ const letGo = (model: Model, layout: Layout, held: Held, putBack: string): Updat
           fill(COPY.dropped, {
             subject,
             where: Option.getOrElse(
-              whereWords(apply(layout, request), Subject.Pane({ paneId: held.paneId })),
-              () => WHERE_IT_WAS,
+              whereWords(
+                apply(layout, request),
+                Subject.Pane({ paneId: held.paneId })
+              ),
+              () => WHERE_IT_WAS
             ),
-          }),
+          })
         ),
       ],
       outMessage: request,
@@ -429,109 +458,156 @@ const letGo = (model: Model, layout: Layout, held: Held, putBack: string): Updat
 const cancel = (model: Model, layout: Layout, held: Held): UpdateReturn =>
   letGo(model, layout, { ...held, maybeTarget: Option.none() }, COPY.cancelled);
 
-const lift = (model: Model, layout: Layout, paneId: string, by: By): UpdateReturn =>
+const lift = (
+  model: Model,
+  layout: Layout,
+  paneId: string,
+  by: By
+): UpdateReturn =>
   Option.match(
     Option.filter(originOf(layout, paneId), () => isIdle(model)),
     {
       onNone: () => ({ model }),
       onSome: (origin) => {
         const held: Held = { paneId, by, maybeTarget: Option.some(origin) };
+
         return {
           model: withHeld(model, Option.some(held)),
           commands:
             by._tag === "Keyboard"
-              ? [announce(fill(COPY.pickedUpByKeyboard, { subject: heldWords(layout, held) }))]
+              ? [
+                  announce(
+                    fill(COPY.pickedUpByKeyboard, {
+                      subject: heldWords(layout, held),
+                    })
+                  ),
+                ]
               : [],
         };
       },
-    },
+    }
   );
 
-const movePointer = (model: Model, layout: Layout, held: Held, pointer: PointerAt): UpdateReturn =>
+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;
+        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 }),
+        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) }))]
+            ? [
+                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 =>
+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.paneId, target, step);
+
         if (Equal.equals(next, target)) {
           return { model };
         }
+
         return {
-          model: withHeld(model, Option.some({ ...held, maybeTarget: Option.some(next) })),
+          model: withHeld(
+            model,
+            Option.some({ ...held, maybeTarget: Option.some(next) })
+          ),
           commands: [
             announce(
               fill(COPY.over, {
                 subject: heldWords(layout, held),
                 where: landingWords(layout, held.paneId, next),
-              }),
+              })
             ),
             ...scrollToTarget(model, layout, next),
           ],
         };
       },
-    },
+    }
   );
 
-const whileHeld = (model: Model, f: (held: Held) => UpdateReturn): UpdateReturn =>
+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 =>
+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,
+  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 {
+          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 }),
+        onSome: (resize) => ({
+          model: withResizing(model, Option.none()),
+          outMessage: resize,
+        }),
       });
     },
   });
 
-/** Shows the pane `paneId` under its tab and moves the keyboard as `focus` says: into the
- *  pane for a press, onto the tab for an arrow. */
 const selectTab = (
   model: Model,
   layout: Layout,
   paneId: string,
-  focus: Command.Command<Message>,
+  focus: Command.Command<Message>
 ): UpdateReturn =>
   Option.match(placeOf(layout, paneId), {
     onNone: () => ({ model }),
@@ -540,7 +616,11 @@ const selectTab = (
 
 /** 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 => {
+export const update = (
+  model: Model,
+  message: Message,
+  context: UpdateContext
+): UpdateReturn => {
   const { layout } = context;
 
   return Message.match<UpdateReturn>(message, {
@@ -556,47 +636,72 @@ export const update = (model: Model, message: Message, context: UpdateContext):
           x: clientX,
           y: clientY,
           isCarrying: false,
-        }),
+        })
       ),
     PressedGripKey: ({ paneId }) => lift(model, layout, paneId, By.Keyboard()),
     MovedPointer: (pointer) =>
-      whileHeldBy(model, "Pointer", (held) => movePointer(model, layout, held, 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,
-        ),
+          isCarried(held)
+            ? { ...held, maybeTarget: pointer.maybeTarget }
+            : held,
+          COPY.putBack
+        )
       ),
     CancelledPointer: () =>
       whileHeldBy(model, "Pointer", (held) =>
-        letGo(model, layout, { ...held, maybeTarget: Option.none() }, COPY.putBack),
+        letGo(
+          model,
+          layout,
+          { ...held, maybeTarget: Option.none() },
+          COPY.putBack
+        )
       ),
     SteppedHeld: ({ step }) =>
-      whileHeldBy(model, "Keyboard", (held) => stepHeld(model, layout, held, 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)),
+      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)),
     PressedTab: ({ paneId }) =>
-      selectTab(model, layout, paneId, FocusPane({ paneHook: paneHook(model, paneId) })),
+      selectTab(
+        model,
+        layout,
+        paneId,
+        FocusPane({ paneHook: paneHook(model, paneId) })
+      ),
     SteppedTab: ({ paneId }) =>
-      selectTab(model, layout, paneId, FocusTab({ tabHook: tabHook(model, paneId) })),
+      selectTab(
+        model,
+        layout,
+        paneId,
+        FocusTab({ tabHook: tabHook(model, paneId) })
+      ),
     FocusedPane: ({ paneId }) =>
       Option.match(
         Option.filter(
           placeOf(layout, paneId),
-          () => !Option.exists(model.maybeFocus, (focus) => focus.paneId === paneId),
+          () =>
+            !Option.exists(model.maybeFocus, (focus) => focus.paneId === paneId)
         ),
         {
           onNone: () => ({ model }),
           onSome: (place) => ({ model: focusOn(model, place) }),
-        },
+        }
       ),
     PressedSplitter: ({ splitter, pointerId, clientX, clientY }) =>
       !isIdle(model) || !isSplitterPresent(layout, splitter)
@@ -610,7 +715,7 @@ export const update = (model: Model, message: Message, context: UpdateContext):
                 pressX: clientX,
                 pressY: clientY,
                 maybeResize: Option.none(),
-              }),
+              })
             ),
           },
     MovedSplitter: ({ share }) => resizeSplitter(model, layout, share, false),
@@ -630,8 +735,6 @@ export const update = (model: Model, message: Message, context: UpdateContext):
   });
 };
 
-// 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
@@ -640,26 +743,34 @@ export const update = (model: Model, message: Message, context: UpdateContext):
  * 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 => {
+export const reconcile = (
+  model: Model,
+  context: UpdateContext
+): UpdateReturn => {
   const { layout } = context;
+
   const isFocusGone = Option.exists(model.maybeFocus, (focus) =>
-    Option.isNone(placeOf(layout, focus.paneId)),
+    Option.isNone(placeOf(layout, focus.paneId))
   );
+
   const maybePlace = Option.filter(focusedPlace(model, layout), () =>
-    Option.isSome(model.maybeFocus),
+    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) }),
-    ),
+      (place) => RestoreFocus({ paneHook: paneHook(model, place.pane.id) })
+    )
   );
+
   const settled = Option.exists(model.maybeResizing, ({ splitter }) =>
-    isSplitterPresent(layout, splitter),
+    isSplitterPresent(layout, splitter)
   )
     ? focused
     : withResizing(focused, Option.none());
@@ -673,10 +784,17 @@ export const reconcile = (model: Model, context: UpdateContext): UpdateReturn =>
           commands: [...restore, announce(COPY.gone)],
         };
       }
+
       const maybeTarget = Option.orElse(
-        Option.filter(held.maybeTarget, (target) => isTargetPresent(layout, target)),
-        () => (held.by._tag === "Keyboard" ? originOf(layout, held.paneId) : Option.none()),
+        Option.filter(held.maybeTarget, (target) =>
+          isTargetPresent(layout, target)
+        ),
+        () =>
+          held.by._tag === "Keyboard"
+            ? originOf(layout, held.paneId)
+            : Option.none()
       );
+
       return {
         model: withHeld(settled, Option.some({ ...held, maybeTarget })),
         commands: restore,
@@ -704,25 +822,33 @@ export const Action = Schema.Literals([
   "CycleWidth",
   "PullOut",
 ]);
+
 export type Action = typeof Action.Type;
 
-const focusStep = (model: Model, layout: Layout, place: Place): UpdateReturn => ({
+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) })),
+    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>,
+  maybeRequest: Option.Option<OutMessage>
 ): UpdateReturn =>
   Option.match(
     Option.filter(maybeRequest, (request) => isChange(layout, request)),
@@ -730,50 +856,67 @@ const requestStep = (
       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);
+
+        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 })),
+            announce(
+              fill(COPY.moved, { subject: String.capitalize(words), where })
+            ),
           ],
           outMessage: request,
         };
       },
-    },
+    }
   );
 
-/** The panes in the order their tabs print: column by column, and down each column. */
-const readingOrder = (layout: Layout): ReadonlyArray<Pane> =>
+const readingOrder = (layout: Layout): readonly Pane[] =>
   Array.flatMap(layout, (column) => column.panes);
 
-/** How far each focus key steps through the tabs: left and up to the one before, right and
- *  down to the one after. */
-const TAB_STEPS: Readonly<Partial<Record<Action, number>>> = {
+const TAB_STEPS: Partial<Record.ReadonlyRecord<Action, number>> = {
   FocusLeft: -1,
   FocusUp: -1,
   FocusRight: 1,
   FocusDown: 1,
 };
 
-/** `perform` while the panes print as tabs: a focus key moves to the tab beside the focused
- *  pane's, past neither end; there is no column to move or size. */
-const performTabbed = (model: Model, action: Action, layout: Layout): UpdateReturn => {
+const performTabbed = (
+  model: Model,
+  action: Action,
+  layout: Layout
+): UpdateReturn => {
   const panes = readingOrder(layout);
+
   const maybeNext = Option.flatMap(
     Option.all({
       step: Option.fromUndefinedOr(TAB_STEPS[action]),
       index: Option.flatMap(focusedPaneId(model, layout), (paneId) =>
-        Array.findFirstIndex(panes, (pane) => pane.id === paneId),
+        Array.findFirstIndex(panes, (pane) => pane.id === paneId)
       ),
     }),
     ({ step, index }) =>
       Option.flatMap(Array.get(panes, index + step), (pane) =>
-        Option.map(placeOf(layout, pane.id), (place) => ({ place, tab: index + step + 1 })),
-      ),
+        Option.map(placeOf(layout, pane.id), (place) => ({
+          place,
+          tab: index + step + 1,
+        }))
+      )
   );
 
   return Option.match(
@@ -784,10 +927,16 @@ const performTabbed = (model: Model, action: Action, layout: Layout): UpdateRetu
         model: focusOn(model, place),
         commands: [
           FocusPane({ paneHook: paneHook(model, place.pane.id) }),
-          announce(fill(COPY.focusedTab, { pane: place.pane.label, tab, tabs: panes.length })),
+          announce(
+            fill(COPY.focusedTab, {
+              pane: place.pane.label,
+              tab,
+              tabs: panes.length,
+            })
+          ),
         ],
       }),
-    },
+    }
   );
 };
 
@@ -802,7 +951,11 @@ const columnIdAt = (layout: Layout, index: number): Option.Option<string> =>
  * held, or where there is nowhere to go. Under tabs, only the focus keys act, stepping from tab
  * to tab.
  */
-export const perform = (model: Model, action: Action, context: UpdateContext): UpdateReturn => {
+export const perform = (
+  model: Model,
+  action: Action,
+  context: UpdateContext
+): UpdateReturn => {
   const { layout, arrangement = "Strip" } = context;
 
   if (arrangement === "Tabs") {
@@ -817,26 +970,37 @@ export const perform = (model: Model, action: Action, context: UpdateContext): U
         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 }),
+          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 }),
-              ),
+                Number.clamp(toRow, {
+                  minimum: 0,
+                  maximum: found.panes.length - 1,
+                })
+              )
             ),
             {
               onNone: () => ({ model }),
               onSome: (next) =>
-                next.pane.id === paneId ? { model } : focusStep(model, layout, next),
-            },
+                next.pane.id === paneId
+                  ? { model }
+                  : focusStep(model, layout, next),
+            }
           );
-        const sideways = (toColumn: number, edge: Option.Option<string>): UpdateReturn =>
+
+        const sideways = (
+          toColumn: number,
+          edge: Option.Option<string>
+        ): UpdateReturn =>
           ask(
             Option.match(Array.get(layout, toColumn), {
               onSome: (found) =>
@@ -845,66 +1009,100 @@ export const perform = (model: Model, action: Action, context: UpdateContext): U
                     paneId,
                     toColumnId: found.id,
                     toIndex: Math.min(row, found.panes.length),
-                  }),
+                  })
                 ),
               onNone: () =>
                 Option.liftPredicate(
-                  OutMessage.PulledOutPane({ paneId, maybeBeforeColumnId: edge }),
-                  () => rows > 1,
+                  OutMessage.PulledOutPane({
+                    paneId,
+                    maybeBeforeColumnId: edge,
+                  }),
+                  () => rows > 1
                 ),
-            }),
+            })
           );
-        const moveColumn = (maybeBefore: Option.Option<Option.Option<string>>): UpdateReturn =>
+
+        const moveColumn = (
+          maybeBefore: Option.Option<Option.Option<string>>
+        ): UpdateReturn =>
           ask(
             Option.map(maybeBefore, (maybeBeforeColumnId) =>
-              OutMessage.MovedColumn({ columnId: column.id, maybeBeforeColumnId }),
+              OutMessage.MovedColumn({
+                columnId: column.id,
+                maybeBeforeColumnId,
+              })
             ),
-            Subject.Column({ columnId: column.id }),
+            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("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 }),
-              ),
-            ),
+                OutMessage.MovedPane({
+                  paneId,
+                  toColumnId: column.id,
+                  toIndex: row - 1,
+                })
+              )
+            )
           ),
           Match.when("MovePaneDown", () =>
             ask(
               Option.some(
-                OutMessage.MovedPane({ paneId, toColumnId: column.id, toIndex: row + 1 }),
-              ),
-            ),
+                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("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)),
-            ),
+              Option.map(columnIdAt(layout, columnIndex - 1), (before) =>
+                Option.some(before)
+              )
+            )
           ),
           Match.when("MoveColumnRight", () =>
             moveColumn(
               Option.map(columnIdAt(layout, columnIndex + 1), () =>
-                columnIdAt(layout, columnIndex + 2),
-              ),
-            ),
+                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) })),
+                announce(
+                  fill(COPY.widened, {
+                    column: columnIndex + 1,
+                    width: widthWords(width),
+                  })
+                ),
               ],
-              outMessage: OutMessage.ResizedColumn({ columnId: column.id, width }),
+              outMessage: OutMessage.ResizedColumn({
+                columnId: column.id,
+                width,
+              }),
             };
           }),
           Match.when("PullOut", () =>
@@ -914,60 +1112,59 @@ export const perform = (model: Model, action: Action, context: UpdateContext): U
                   paneId,
                   maybeBeforeColumnId: columnIdAt(layout, columnIndex + 1),
                 }),
-                () => rows > 1,
-              ),
-            ),
+                () => rows > 1
+              )
+            )
           ),
-          Match.exhaustive,
+          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. */
-const columnBoxOf = (element: Element): ColumnBox => {
+const columnBoxOf = (element: HTMLElement): ColumnBox => {
   const rect = element.getBoundingClientRect();
+
   return {
-    id: element.getAttribute("data-reel-column") ?? "",
+    id: element.dataset["reelColumn"] ?? "",
     left: rect.left,
     right: rect.right,
   };
 };
 
-/** The middles of a column's slots but the held pane's. */
-const slotMiddlesOf = (element: Element, heldId: string): ReadonlyArray<number> =>
+const slotMiddlesOf = (
+  element: HTMLElement,
+  heldId: string
+): readonly number[] =>
   Array.map(
     Array.filter(
-      Array.fromIterable(element.querySelectorAll("[data-reel-slot]")),
-      (slot) => slot.getAttribute("data-reel-slot") !== heldId,
+      Array.fromIterable(
+        element.querySelectorAll<HTMLElement>("[data-reel-slot]")
+      ),
+      (slot) => slot.dataset["reelSlot"] !== heldId
     ),
     (slot) => {
       const slotRect = slot.getBoundingClientRect();
+
       return slotRect.top + slotRect.height / 2;
-    },
+    }
   );
 
-/** Where a pointer at (`clientX`, `clientY`) would drop the pane `paneId` in the reel
- *  `reelHook` names, read from where its columns sit and the slots of the one it is over: none
- *  outside the reel. */
 const pointerTarget = (
   reelHook: string,
   paneId: string,
   clientX: number,
-  clientY: number,
+  clientY: number
 ): Option.Option<Target> =>
   Option.map(
     Option.filter(scrollerOf(reelHook), (view) => {
       const rect = view.getBoundingClientRect();
+
       return (
         clientX >= rect.left &&
         clientX <= rect.right &&
@@ -976,72 +1173,91 @@ const pointerTarget = (
       );
     }),
     (view) => {
-      const columns = Array.fromIterable(view.querySelectorAll("[data-reel-column]"));
-      return targetAtPoint(Array.map(columns, columnBoxOf), clientX, clientY, (index) =>
-        Option.match(Array.get(columns, index), {
-          onNone: () => [],
-          onSome: (column) => slotMiddlesOf(column, paneId),
-        }),
+      const columns = Array.fromIterable(
+        view.querySelectorAll<HTMLElement>("[data-reel-column]")
       );
-    },
+
+      return targetAtPoint(
+        Array.map(columns, columnBoxOf),
+        clientX,
+        clientY,
+        (index) =>
+          Option.match(Array.get(columns, index), {
+            onNone: () => [],
+            onSome: (column) => slotMiddlesOf(column, paneId),
+          })
+      );
+    }
   );
 
 const PointerHold = Schema.Struct({
   reelHook: Schema.String,
   paneId: Schema.String,
-  pointerId: Schema.Number,
+  pointerId: Schema.Finite,
 });
+
 type PointerHold = typeof PointerHold.Type;
 
 const pointerAt = (hold: PointerHold, event: PointerEvent): PointerAt => ({
   clientX: event.clientX,
   clientY: event.clientY,
-  maybeTarget: pointerTarget(hold.reelHook, hold.paneId, event.clientX, event.clientY),
+  maybeTarget: pointerTarget(
+    hold.reelHook,
+    hold.paneId,
+    event.clientX,
+    event.clientY
+  ),
 });
 
-/** The pressing pointer's moves, release and cancel; another pointer's are not the reel's. A
- *  pointer reports moves faster than the page draws, and each reads the reel's layout, so its
- *  moves are read once a frame, at the latest; a release first reads the move not read yet,
- *  so the pane is carried as far as the pointer went, and a cancel drops it. */
 const pointerMessages = (hold: PointerHold): Stream.Stream<Message> =>
   Stream.callback<Message>((queue) =>
     Effect.acquireRelease(
       Effect.sync(() => {
         const state = { maybeMove: Option.none<PointerEvent>(), frame: 0 };
-        const offer = (message: Message): void => {
-          Queue.offerUnsafe(queue, message);
-        };
+
         const readMove = (): void => {
           cancelAnimationFrame(state.frame);
-          Option.map(state.maybeMove, (event) =>
-            offer(Message.MovedPointer(pointerAt(hold, event))),
-          );
+          Option.map(state.maybeMove, (event) => {
+            Queue.offerUnsafe(
+              queue,
+              Message.MovedPointer(pointerAt(hold, event))
+            );
+          });
           state.maybeMove = Option.none();
         };
+
         const onMove = (event: PointerEvent): void => {
           if (event.pointerId === hold.pointerId) {
             if (Option.isNone(state.maybeMove)) {
               state.frame = requestAnimationFrame(readMove);
             }
+
             state.maybeMove = Option.some(event);
           }
         };
+
         const onUp = (event: PointerEvent): void => {
           if (event.pointerId === hold.pointerId) {
             readMove();
-            offer(Message.ReleasedPointer(pointerAt(hold, event)));
+            Queue.offerUnsafe(
+              queue,
+              Message.ReleasedPointer(pointerAt(hold, event))
+            );
           }
         };
+
         const onCancel = (event: PointerEvent): void => {
           if (event.pointerId === hold.pointerId) {
             cancelAnimationFrame(state.frame);
             state.maybeMove = Option.none();
-            offer(Message.CancelledPointer());
+            Queue.offerUnsafe(queue, Message.CancelledPointer());
           }
         };
+
         document.addEventListener("pointermove", onMove);
         document.addEventListener("pointerup", onUp);
         document.addEventListener("pointercancel", onCancel);
+
         return { state, onMove, onUp, onCancel };
       }),
       ({ state, onMove, onUp, onCancel }) =>
@@ -1050,23 +1266,20 @@ const pointerMessages = (hold: PointerHold): Stream.Stream<Message> =>
           document.removeEventListener("pointermove", onMove);
           document.removeEventListener("pointerup", onUp);
           document.removeEventListener("pointercancel", onCancel);
-        }),
-    ),
+        })
+    )
   );
 
-/** 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;
   }
+
+  return 0;
 };
 
-/** While a pointer carries a pane 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(
@@ -1076,51 +1289,57 @@ const edgeScroll = (hold: PointerHold): Stream.Stream<never> =>
           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;
+            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.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)),
+        })
+    ).pipe(Effect.flatMap(() => Effect.never))
   );
 
 const SplitterHold = Schema.Struct({
   reelHook: Schema.String,
   splitter: Splitter,
-  pointerId: Schema.Number,
-  pressX: Schema.Number,
-  pressY: Schema.Number,
+  pointerId: Schema.Finite,
+  pressX: Schema.Finite,
+  pressY: Schema.Finite,
 });
+
 type SplitterHold = typeof SplitterHold.Type;
 
-const heightOf = (element: Element): number => element.getBoundingClientRect().height;
+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) =>
@@ -1130,36 +1349,42 @@ const scaleOf = (hold: SplitterHold): number =>
           Option.getOrElse(
             Option.map(
               Option.fromNullishOr(view.querySelector(".reel-gap")),
-              (gap) => gap.getBoundingClientRect().width,
+              (gap) => gap.getBoundingClientRect().width
             ),
-            () => 0,
+            () => 0
           ),
         Split: ({ abovePaneId }) =>
           Number.sumAll(
             Array.map(
               Array.fromIterable(
                 view
-                  .querySelector(`[data-reel-slot="${CSS.escape(abovePaneId)}"]`)
+                  .querySelector(
+                    `[data-reel-slot="${CSS.escape(abovePaneId)}"]`
+                  )
                   ?.closest(".reel-column")
-                  ?.querySelectorAll("[data-reel-slot]") ?? [],
+                  ?.querySelectorAll("[data-reel-slot]") ?? []
               ),
-              heightOf,
-            ),
+              heightOf
+            )
           ),
-      }),
+      })
     ),
-    () => 0,
+    () => 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;
+        hold.splitter._tag === "Width"
+          ? event.clientX - hold.pressX
+          : event.clientY - hold.pressY;
+
       return scale > 0 ? moved / scale : 0;
     };
+
     return dragMessages<Message>(hold.pointerId, {
       moved: (event) => Message.MovedSplitter({ share: shareOf(event) }),
       released: (event) => Message.ReleasedSplitter({ share: shareOf(event) }),
@@ -1167,7 +1392,10 @@ const splitterMessages = (hold: SplitterHold): Stream.Stream<Message> =>
     });
   });
 
-const pointerHoldOf = (model: Model, isCarryingOnly: boolean): Option.Option<PointerHold> =>
+const pointerHoldOf = (
+  model: Model,
+  isCarryingOnly: boolean
+): Option.Option<PointerHold> =>
   Option.flatMap(model.maybeHeld, ({ paneId, by }) =>
     By.match(by, {
       Keyboard: () => Option.none(),
@@ -1175,47 +1403,57 @@ const pointerHoldOf = (model: Model, isCarryingOnly: boolean): Option.Option<Poi
         isCarryingOnly && !isCarrying
           ? Option.none()
           : Option.some({ reelHook: model.id, paneId, pointerId }),
-    }),
+    })
   );
 
 const reelSubscriptions = Subscription.make<Model, Message>()((entry) => ({
   pointer: entry(
     { maybeHold: Schema.Option(PointerHold) },
     {
-      modelToDependencies: (model) => ({ maybeHold: pointerHoldOf(model, false) }),
+      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) }),
+      modelToDependencies: (model) => ({
+        maybeHold: pointerHoldOf(model, true),
+      }),
       dependenciesToStream: ({ maybeHold }) =>
-        Option.match(maybeHold, { onNone: () => Stream.empty, onSome: edgeScroll }),
-    },
+        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,
-        })),
+        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 },
@@ -1225,7 +1463,7 @@ const reelSubscriptions = Subscription.make<Model, Message>()((entry) => ({
       }),
       dependenciesToStream: ({ isHolding: isHoldingNow }) =>
         isHoldingNow ? escapeKeys(Message.PressedEscape()) : Stream.empty,
-    },
+    }
   ),
 }));
 
@@ -1237,28 +1475,29 @@ const reelSubscriptions = Subscription.make<Model, Message>()((entry) => ({
 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 },
+  args: {
+    sourceSelector: Schema.String,
+    pressX: Schema.Finite,
+    pressY: Schema.Finite,
+  },
   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 `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: ReadonlyArray<Html>;
+  lead: readonly Html[];
   /** The window's id, unique in the document. */
   id: string;
 }>;
@@ -1278,7 +1517,7 @@ export type ViewInputs = Readonly<{
    *  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) => ReadonlyArray<Html>;
+  toTabLeadView?: (pane: Pane) => readonly Html[];
 }>;
 
 type ReelInfo = Readonly<{
@@ -1293,10 +1532,9 @@ type ReelInfo = Readonly<{
 
 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>> = {
+const HELD_STEPS: Record.ReadonlyRecord<string, Step> = {
   ArrowUp: "Up",
   ArrowDown: "Down",
   ArrowLeft: "Left",
@@ -1305,57 +1543,75 @@ const HELD_STEPS: Readonly<Record<string, Step>> = {
 
 const isDropKey = (key: string): boolean => key === " " || key === "Enter";
 
-/** The anchor every pane is pinned to under tabs: the one slot, the reel's full size. */
 const STAGE_ANCHOR = "--reel-stage";
 
-/** 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 stableDomOrder = (layout: Layout): readonly Pane[] =>
+  Array.sort(
+    Array.flatMap(layout, (column) => column.panes),
+    byId
+  );
+
 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.paneId, target)),
-    ),
+      Option.isSome(requestOf(layout, held.paneId, target))
+    )
   );
 
 const carriedIdOf = (model: Model): Option.Option<string> =>
   Option.map(Option.filter(model.maybeHeld, isCarried), ({ paneId }) => paneId);
 
 const gripView = (model: Model, pane: Pane, h: HtmlBuilder<Message>): Html => {
-  const maybeHeldHere = Option.filter(model.maybeHeld, (held) => held.paneId === pane.id);
+  const maybeHeldHere = Option.filter(
+    model.maybeHeld,
+    (held) => held.paneId === pane.id
+  );
+
   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 {
+  const isKeyboardHeld = Option.exists(
+    maybeHeldHere,
+    (held) => held.by._tag === "Keyboard"
+  );
+
+  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(Record.get(HELD_STEPS, key), (step) =>
+              Message.SteppedHeld({ step })
+            );
+      }
+
       return Option.liftPredicate(
         Message.PressedGripKey({ paneId: pane.id }),
-        () => isIdle(model) && isDropKey(key),
+        () => isIdle(model) && isDropKey(key)
       );
     }
-  });
+  );
 
   const onGripPress: Attribute<Message> = h.OnPointerDown(
-    (_pointerType, button, _screenX, _screenY, _time, clientX, clientY, pointerId) =>
+    (
+      _pointerType,
+      button,
+      _screenX,
+      _screenY,
+      _time,
+      clientX,
+      clientY,
+      pointerId
+    ) =>
       Option.liftPredicate(
         Message.PressedGrip({ paneId: pane.id, pointerId, clientX, clientY }),
-        () => isIdle(model) && button === LEFT_BUTTON,
-      ),
+        () => isIdle(model) && button === LEFT_BUTTON
+      )
   );
 
   return IconButton.view(
@@ -1373,15 +1629,14 @@ const gripView = (model: Model, pane: Pane, h: HtmlBuilder<Message>): Html => {
         ...(isKeyboardHeld ? [h.OnBlur(Message.LeftGrip())] : []),
       ],
     },
-    h,
+    h
   );
 };
 
-/** A splitter's handlers: a pointer drags it, and its arrows step it by `SPLITTER_STEP`. */
 const reelSplitterAttributes = (
   model: Model,
   splitter: Splitter,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): ReadonlyArray<Attribute<Message>> =>
   splitterAttributes(
     {
@@ -1390,25 +1645,28 @@ const reelSplitterAttributes = (
       onPress: (pointerId, clientX, clientY) =>
         Message.PressedSplitter({ splitter, pointerId, clientX, clientY }),
       onStep: (direction) =>
-        Message.PressedSplitterKey({ splitter, share: direction * SPLITTER_STEP }),
+        Message.PressedSplitterKey({
+          splitter,
+          share: direction * SPLITTER_STEP,
+        }),
     },
-    h,
+    h
   );
 
-/** The pane a drop into `column` is marked on, and the class that marks it: the pane it would
- *  land before, or the last one when it would land at the end, the carried pane left out. */
 const dropMarkOf = (
   info: ReelInfo,
-  column: Column,
+  column: Column
 ): Option.Option<Readonly<{ paneId: string; markClass: string }>> =>
   Option.flatMap(info.maybeMark, (mark) => {
     if (mark._tag !== "Into" || mark.columnId !== column.id) {
       return Option.none();
     }
+
     const others = Array.filter(
       column.panes,
-      (pane) => !Option.contains(info.maybeCarriedId, pane.id),
+      (pane) => !Option.contains(info.maybeCarriedId, pane.id)
     );
+
     return Option.orElse(
       Option.map(Array.get(others, mark.index), ({ id }) => ({
         paneId: id,
@@ -1417,35 +1675,48 @@ const dropMarkOf = (
       () =>
         Option.map(
           Option.filter(Array.last(others), () => mark.index >= others.length),
-          ({ id }) => ({ paneId: id, markClass: " drop-after" }),
-        ),
+          ({ id }) => ({ paneId: id, markClass: " drop-after" })
+        )
     );
   });
 
-const isGapMarked = (info: ReelInfo, maybeBeforeColumnId: Option.Option<string>): boolean =>
+const isGapMarked = (
+  info: ReelInfo,
+  maybeBeforeColumnId: Option.Option<string>
+): boolean =>
   Option.exists(
     info.maybeMark,
-    (mark) => mark._tag === "Gap" && Equal.equals(mark.maybeBeforeColumnId, maybeBeforeColumnId),
+    (mark) =>
+      mark._tag === "Gap" &&
+      Equal.equals(mark.maybeBeforeColumnId, maybeBeforeColumnId)
   );
 
 const slotView = (
   anchors: ReadonlyMap<string, string>,
   maybeDropMark: Option.Option<Readonly<{ paneId: string; markClass: string }>>,
   pane: Pane,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html =>
   h.keyed("div")(pane.id, [
     h.Class(
       `reel-slot${Option.match(
         Option.filter(maybeDropMark, ({ paneId }) => paneId === pane.id),
-        { onNone: () => "", onSome: ({ markClass }) => markClass },
-      )}`,
+        { onNone: () => "", onSome: ({ markClass }) => markClass }
+      )}`
     ),
     h.DataAttribute("reel-slot", pane.id),
-    h.Style({ "--reel-weight": `${pane.weight}`, "--reel-anchor": anchors.get(pane.id) ?? "none" }),
+    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 =>
+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"),
@@ -1455,7 +1726,11 @@ const splitView = (model: Model, above: Pane, share: number, h: HtmlBuilder<Mess
     h.AriaValuenow(Math.round(share * 100)),
     h.Tabindex(0),
     h.DataAttribute("reel-split", above.id),
-    ...reelSplitterAttributes(model, Splitter.Split({ abovePaneId: above.id }), h),
+    ...reelSplitterAttributes(
+      model,
+      Splitter.Split({ abovePaneId: above.id }),
+      h
+    ),
   ]);
 
 const columnView = (
@@ -1463,19 +1738,21 @@ const columnView = (
   anchors: ReadonlyMap<string, string>,
   column: Column,
   index: number,
-  h: HtmlBuilder<Message>,
-): ReadonlyArray<Html> => {
+  h: HtmlBuilder<Message>
+): readonly Html[] => {
   const { model, layout } = info;
   const total = Number.sumAll(Array.map(column.panes, (pane) => pane.weight));
   const maybeDropMark = dropMarkOf(info, column);
+
   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),
-      ),
+        splitView(model, above, total > 0 ? above.weight / total : 0, h)
+      )
     ),
     slotView(anchors, maybeDropMark, pane, h),
   ]);
+
   const maybeNextId = Option.map(Array.get(layout, index + 1), ({ id }) => id);
 
   return [
@@ -1487,10 +1764,12 @@ const columnView = (
         h.DataAttribute("reel-hook", columnHook(model, column.id)),
         h.Style({ "--reel-width": `${column.width}` }),
       ],
-      stack,
+      stack
     ),
     h.keyed("div")(`resize:${column.id}`, [
-      h.Class(`reel-gap reel-resize${isGapMarked(info, maybeNextId) ? " drop-here" : ""}`),
+      h.Class(
+        `reel-gap reel-resize${isGapMarked(info, maybeNextId) ? " drop-here" : ""}`
+      ),
       h.Role("separator"),
       h.AriaLabel(fill(COPY.widthLabel, { column: index + 1 })),
       h.AriaValuemin(0),
@@ -1499,35 +1778,35 @@ const columnView = (
       h.AriaValuetext(widthWords(column.width)),
       h.Tabindex(0),
       h.DataAttribute("reel-resize", column.id),
-      ...reelSplitterAttributes(model, Splitter.Width({ columnId: column.id }), h),
+      ...reelSplitterAttributes(
+        model,
+        Splitter.Width({ columnId: column.id }),
+        h
+      ),
     ]),
   ];
 };
 
 const paneLayerView = (
   info: ReelInfo,
-  panes: ReadonlyArray<Pane>,
+  panesInDomOrder: readonly Pane[],
   anchors: ReadonlyMap<string, string>,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html => {
   const { model } = info;
 
-  // NOTE: the panes keep one order in the page, by id, whatever the layout or the arrangement:
-  // a move or a change to tabs 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. Under tabs the panes behind the focused one are hidden, not removed, and
-  // keep their size, so a terminal sized by its box is not resized as the tabs change.
   return h.div(
     [h.Class("reel-panes")],
-    Array.map(panes, (pane) => {
+    Array.map(panesInDomOrder, (pane) => {
       const isFocused = Option.contains(info.maybeFocusedId, pane.id);
       const isHeld = Option.contains(info.maybeCarriedId, pane.id);
       const isBehind = info.isTabbed && !isFocused;
+
       return h.keyed("div")(
         pane.id,
         [
           h.Class(
-            `reel-pane${isFocused ? " focused" : ""}${isHeld ? " drag-dim" : ""}${isBehind ? " behind" : ""}`,
+            `reel-pane${isFocused ? " focused" : ""}${isHeld ? " drag-dim" : ""}${isBehind ? " behind" : ""}`
           ),
           h.DataAttribute("reel-pane", paneHook(model, pane.id)),
           h.Style({ "--reel-anchor": anchors.get(pane.id) ?? "none" }),
@@ -1540,15 +1819,16 @@ const paneLayerView = (
             lead: info.isTabbed ? [] : [gripView(model, pane, h)],
             id: `${model.id}-${pane.id}`,
           }),
-        ],
+        ]
       );
-    }),
+    })
   );
 };
 
-/** The copy a pointer carries: the held pane's title bar, drawn by the reel from its label,
- *  so whatever a pane holds (a terminal, a canvas) is never built twice. */
-const liftedCopyView = (info: ReelInfo, h: HtmlBuilder<Message>): ReadonlyArray<Html> => {
+const liftedCopyView = (
+  info: ReelInfo,
+  h: HtmlBuilder<Message>
+): readonly Html[] => {
   const { model, layout } = info;
 
   return Array.fromOption(
@@ -1568,7 +1848,7 @@ const liftedCopyView = (info: ReelInfo, h: HtmlBuilder<Message>): ReadonlyArray<
                     sourceSelector: `[data-reel-pane="${CSS.escape(paneHook(model, held.paneId))}"]`,
                     pressX,
                     pressY,
-                  }),
+                  })
                 ),
               ],
               [
@@ -1580,51 +1860,56 @@ const liftedCopyView = (info: ReelInfo, h: HtmlBuilder<Message>): ReadonlyArray<
                       [
                         h.span(
                           [h.Class("panel-lead")],
-                          [h.span([h.Class("iconbtn quiet")], [Glyph.view({ name: "grip" }, h)])],
+                          [
+                            h.span(
+                              [h.Class("iconbtn quiet")],
+                              [Glyph.view({ name: "grip" }, h)]
+                            ),
+                          ]
                         ),
                         h.h2([], [heldLabel(layout, held)]),
-                      ],
+                      ]
                     ),
-                  ],
+                  ]
                 ),
-              ],
+              ]
             ),
-            () => isCarrying,
+            () => isCarrying
           ),
-      }),
-    ),
+      })
+    )
   );
 };
 
-/** The tab list under tabs: a tab per pane in reading order, the focused pane's selected. A
- *  press shows its pane and puts the keyboard in it; the side arrows (wrapping), Home and End
- *  select as they move and keep the keyboard on the tabs, only the selected tab being in the
- *  Tab order. A modified arrow is the application's. */
 const tabListView = (
   info: ReelInfo,
   label: string,
-  toTabLeadView: (pane: Pane) => ReadonlyArray<Html>,
-  h: HtmlBuilder<Message>,
+  toTabLeadView: (pane: Pane) => readonly Html[],
+  h: HtmlBuilder<Message>
 ): Html => {
   const { model, layout } = info;
   const panes = readingOrder(layout);
+
   const stepTo = (index: number): Option.Option<Message> =>
-    Option.map(Array.get(panes, (index + panes.length) % panes.length), ({ id }) =>
-      Message.SteppedTab({ paneId: id }),
+    Option.map(
+      Array.get(panes, (index + panes.length) % panes.length),
+      ({ id }) => Message.SteppedTab({ paneId: id })
     );
+
   const keyOf = (index: number, key: string): Option.Option<Message> =>
     Match.value(key).pipe(
       Match.when("ArrowLeft", () => stepTo(index - 1)),
       Match.when("ArrowRight", () => stepTo(index + 1)),
       Match.when("Home", () => stepTo(0)),
       Match.when("End", () => stepTo(panes.length - 1)),
-      Match.orElse(() => Option.none()),
+      Match.orElse(() => Option.none())
     );
 
   return h.div(
     [h.Class("nav tabs reel-tabs"), h.Role("tablist"), h.AriaLabel(label)],
     Array.map(panes, (pane, index) => {
       const isSelected = Option.contains(info.maybeFocusedId, pane.id);
+
       return h.keyed("button")(
         pane.id,
         [
@@ -1636,22 +1921,24 @@ const tabListView = (
           h.DataAttribute("reel-tab", tabHook(model, pane.id)),
           h.OnClick(Message.PressedTab({ paneId: pane.id })),
           h.OnKeyDownPreventDefault((key, modifiers) =>
-            isPlain(modifiers) ? keyOf(index, key) : Option.none(),
+            isPlain(modifiers) ? keyOf(index, key) : Option.none()
           ),
         ],
-        [...toTabLeadView(pane), h.span([h.Class("reel-tab-words")], [pane.label])],
+        [
+          ...toTabLeadView(pane),
+          h.span([h.Class("reel-tab-words")], [pane.label]),
+        ]
       );
-    }),
+    })
   );
 };
 
-const NO_TAB_LEAD = (): ReadonlyArray<Html> => [];
+const NO_TAB_LEAD = (): readonly Html[] => [];
 
-/** 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) },
+    { onNone: () => layout, onSome: (resize) => apply(layout, resize) }
   );
 
 /**
@@ -1673,76 +1960,87 @@ const previewed = (model: Model, layout: Layout): Layout =>
  * 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 const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html => {
-  const { label, toPaneView, arrangement = "Strip", toTabLeadView = NO_TAB_LEAD } = viewInputs;
-  const isTabbed = arrangement === "Tabs";
-  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, isTabbed ? STAGE_ANCHOR : anchorName(index)] as const,
-    ),
-  );
-  const info: ReelInfo = {
-    model,
-    layout,
-    isTabbed,
-    toPaneView,
-    maybeFocusedId: focusedPaneId(model, layout),
-    maybeMark: markOf(model, layout),
-    maybeCarriedId: carriedIdOf(model),
-  };
+export const view = defineView<Model, Message, ViewInputs>(
+  (model, viewInputs, h): Html => {
+    const {
+      label,
+      toPaneView,
+      arrangement = "Strip",
+      toTabLeadView = NO_TAB_LEAD,
+    } = viewInputs;
+
+    const isTabbed = arrangement === "Tabs";
+    const layout = previewed(model, viewInputs.layout);
+
+    const panesInDomOrder = stableDomOrder(layout);
+
+    const anchors = new Map(
+      Array.map(
+        panesInDomOrder,
+        (pane, index) =>
+          [pane.id, isTabbed ? STAGE_ANCHOR : anchorName(index)] as const
+      )
+    );
 
-  const strip = (): ReadonlyArray<Html> => [
-    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)),
-  ];
+    const info: ReelInfo = {
+      model,
+      layout,
+      isTabbed,
+      toPaneView,
+      maybeFocusedId: focusedPaneId(model, layout),
+      maybeMark: markOf(model, layout),
+      maybeCarriedId: carriedIdOf(model),
+    };
 
-  return h.div(
-    [
-      h.Class(isTabbed ? "reel tabbed" : "reel"),
-      h.Role("group"),
-      h.AriaLabel(label),
-      h.DataAttribute("reel", model.id),
-    ],
-    [
-      ...(isTabbed ? [tabListView(info, label, toTabLeadView, h)] : []),
-      h.div(
-        [h.Class("reel-view")],
-        [
-          h.div(
-            [h.Class("reel-track")],
-            [
-              ...(isTabbed
-                ? [
-                    h.div([
-                      h.Class("reel-slot reel-stage"),
-                      h.Style({ "--reel-anchor": STAGE_ANCHOR }),
-                    ]),
-                  ]
-                : strip()),
-              paneLayerView(info, panes, anchors, h),
-            ],
-          ),
-        ],
+    const strip = (): readonly Html[] => [
+      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)
       ),
-      h.p([h.Id(helpId(model)), h.Class("sr-only")], [COPY.gripHelp]),
-      ...liftedCopyView(info, h),
-    ],
-  );
-});
+    ];
+
+    return h.div(
+      [
+        h.Class(isTabbed ? "reel tabbed" : "reel"),
+        h.Role("group"),
+        h.AriaLabel(label),
+        h.DataAttribute("reel", model.id),
+      ],
+      [
+        ...(isTabbed ? [tabListView(info, label, toTabLeadView, h)] : []),
+        h.div(
+          [h.Class("reel-view")],
+          [
+            h.div(
+              [h.Class("reel-track")],
+              [
+                ...(isTabbed
+                  ? [
+                      h.div([
+                        h.Class("reel-slot reel-stage"),
+                        h.Style({ "--reel-anchor": STAGE_ANCHOR }),
+                      ]),
+                    ]
+                  : strip()),
+                paneLayerView(info, panesInDomOrder, anchors, h),
+              ]
+            ),
+          ]
+        ),
+        h.p([h.Id(helpId(model)), h.Class("sr-only")], [COPY.gripHelp]),
+        ...liftedCopyView(info, h),
+      ]
+    );
+  }
+);