@gjermundgaraba-designs/pixel-paper 0.21.0 → 0.22.0

package/src/reel/reel.ts

@@ -1,6 +1,6 @@
 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 type { Attribute, Html, HtmlBuilder } from "foldkit/html";
 import { defineMessageUnion } from "foldkit/message";
 import * as Mount from "foldkit/mount";
 import * as Render from "foldkit/render";
@@ -17,10 +17,12 @@ import {
   escapeKeys,
   markDragging,
   measureLift,
-  pressingPointer,
+  pointerMessages as dragMessages,
+  splitterAttributes,
 } from "../drag/drag.ts";
 import * as Glyph from "../glyph/glyph.ts";
 import * as IconButton from "../iconButton/iconButton.ts";
+import { isPlain } from "../keys/keys.ts";
 import { prefixKeys } from "../subscription/prefixKeys.ts";
 
 import {
@@ -37,11 +39,9 @@ import {
   Target,
   WHERE_IT_WAS,
   apply,
-  columnOf,
   columnOfTarget,
   fill,
   firstPlace,
-  isPresent,
   isSplitterPresent,
   isTargetPresent,
   landingWords,
@@ -56,17 +56,16 @@ import {
   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. */
+/** 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}",
-  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}",
@@ -102,9 +101,9 @@ const By = defineTaggedUnion({
 });
 type By = typeof By.Type;
 
-/** What is held, how, and where it would land: none while a pointer is outside the reel. */
+/** The pane held, how, and where it would land: none while a pointer is outside the reel. */
 const Held = Schema.Struct({
-  subject: Subject,
+  paneId: Schema.String,
   by: By,
   maybeTarget: Schema.Option(Target),
 });
@@ -142,12 +141,12 @@ type PointerAt = typeof PointerAt.Type;
 /** Union of all Messages a reel can produce. */
 export const Message = defineMessageUnion({
   PressedGrip: {
-    subject: Subject,
+    paneId: Schema.String,
     pointerId: Schema.Number,
     clientX: Schema.Number,
     clientY: Schema.Number,
   },
-  PressedGripKey: { subject: Subject },
+  PressedGripKey: { paneId: Schema.String },
   MovedPointer: PointerAt.fields,
   ReleasedPointer: PointerAt.fields,
   CancelledPointer: {},
@@ -169,7 +168,6 @@ export const Message = defineMessageUnion({
   CompletedAnnounceReel: {},
   CompletedFocusPane: {},
   CompletedRestoreFocus: {},
-  CompletedFocusGrip: {},
   CompletedScrollIntoView: {},
   CompletedSizeLiftedPane: {},
 });
@@ -223,12 +221,6 @@ const paneHook = (model: Model, paneId: string): string => `${model.id}/pane/${p
 
 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`),
@@ -295,23 +287,6 @@ export const RestoreFocus = Command.define("RestoreFocus", {
     }),
 });
 
-/** 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. */
@@ -358,7 +333,9 @@ const focusOn = (model: Model, place: Place): Model =>
 const announce = (text: string) => AnnounceReel({ text });
 
 const heldWords = (layout: Layout, held: Held): string =>
-  String.capitalize(Option.getOrElse(subjectWords(layout, held.subject), () => ""));
+  String.capitalize(
+    Option.getOrElse(subjectWords(layout, Subject.Pane({ paneId: held.paneId })), () => ""),
+  );
 
 const scrollToTarget = (model: Model, layout: Layout, target: Target) =>
   Array.fromOption(
@@ -367,9 +344,8 @@ const scrollToTarget = (model: Model, layout: Layout, target: Target) =>
     ),
   );
 
-/** 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. */
+/** 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 released = withHeld(model, Option.none());
   if (!isCarried(held)) {
@@ -378,13 +354,8 @@ const letGo = (model: Model, layout: Layout, held: Held, putBack: string): Updat
 
   const subject = heldWords(layout, held);
   const maybeRequest = Option.flatMap(held.maybeTarget, (target) =>
-    requestOf(layout, held.subject, target),
+    requestOf(layout, held.paneId, 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: () => ({
@@ -394,12 +365,11 @@ const letGo = (model: Model, layout: Layout, held: Held, putBack: string): Updat
     onSome: (request) => ({
       model: released,
       commands: [
-        ...refocus,
         announce(
           fill(COPY.dropped, {
             subject,
             where: Option.getOrElse(
-              whereWords(apply(layout, request), held.subject),
+              whereWords(apply(layout, request), Subject.Pane({ paneId: held.paneId })),
               () => WHERE_IT_WAS,
             ),
           }),
@@ -413,16 +383,16 @@ 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, subject: Subject, by: By): UpdateReturn =>
+const lift = (model: Model, layout: Layout, paneId: string, by: By): UpdateReturn =>
   Option.match(
     Option.filter(
-      originOf(layout, subject),
+      originOf(layout, paneId),
       () => !isHolding(model) && Option.isNone(model.maybeResizing),
     ),
     {
       onNone: () => ({ model }),
       onSome: (origin) => {
-        const held: Held = { subject, by, maybeTarget: Option.some(origin) };
+        const held: Held = { paneId, by, maybeTarget: Option.some(origin) };
         return {
           model: withHeld(model, Option.some(held)),
           commands:
@@ -464,7 +434,7 @@ const stepHeld = (model: Model, layout: Layout, held: Held, step: Step): UpdateR
     {
       onNone: () => ({ model }),
       onSome: (target) => {
-        const next = steppedTarget(layout, held.subject, target, step);
+        const next = steppedTarget(layout, held.paneId, target, step);
         if (Equal.equals(next, target)) {
           return { model };
         }
@@ -474,7 +444,7 @@ const stepHeld = (model: Model, layout: Layout, held: Held, step: Step): UpdateR
             announce(
               fill(COPY.over, {
                 subject: heldWords(layout, held),
-                where: landingWords(layout, held.subject, next),
+                where: landingWords(layout, held.paneId, next),
               }),
             ),
             ...scrollToTarget(model, layout, next),
@@ -518,11 +488,11 @@ export const update = (model: Model, message: Message, context: UpdateContext):
   const { layout } = context;
 
   return Message.match<UpdateReturn>(message, {
-    PressedGrip: ({ subject, pointerId, clientX, clientY }) =>
+    PressedGrip: ({ paneId, pointerId, clientX, clientY }) =>
       lift(
         model,
         layout,
-        subject,
+        paneId,
         By.Pointer({
           pointerId,
           pressX: clientX,
@@ -532,7 +502,7 @@ export const update = (model: Model, message: Message, context: UpdateContext):
           isCarrying: false,
         }),
       ),
-    PressedGripKey: ({ subject }) => lift(model, layout, subject, By.Keyboard()),
+    PressedGripKey: ({ paneId }) => lift(model, layout, paneId, By.Keyboard()),
     MovedPointer: (pointer) =>
       whileHeldBy(model, "Pointer", (held) => movePointer(model, layout, held, pointer)),
     ReleasedPointer: (pointer) =>
@@ -594,7 +564,6 @@ export const update = (model: Model, message: Message, context: UpdateContext):
     CompletedAnnounceReel: () => ({ model }),
     CompletedFocusPane: () => ({ model }),
     CompletedRestoreFocus: () => ({ model }),
-    CompletedFocusGrip: () => ({ model }),
     CompletedScrollIntoView: () => ({ model }),
     CompletedSizeLiftedPane: () => ({ model }),
   });
@@ -606,8 +575,8 @@ export const update = (model: Model, message: Message, context: UpdateContext):
  * 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;
+ * where it was, and the keyboard follows where it went with the pane. A drag whose pane has
+ * gone is cancelled, and one whose target's column has gone aims where it started;
  * a splitter whose column or pane has gone lets go.
  */
 export const reconcile = (model: Model, context: UpdateContext): UpdateReturn => {
@@ -637,7 +606,7 @@ export const reconcile = (model: Model, context: UpdateContext): UpdateReturn =>
   return Option.match(settled.maybeHeld, {
     onNone: () => ({ model: settled, commands: restore }),
     onSome: (held) => {
-      if (!isPresent(layout, held.subject)) {
+      if (Option.isNone(placeOf(layout, held.paneId))) {
         return {
           model: withHeld(settled, Option.none()),
           commands: [...restore, announce(COPY.gone)],
@@ -645,7 +614,7 @@ export const reconcile = (model: Model, context: UpdateContext): UpdateReturn =>
       }
       const maybeTarget = Option.orElse(
         Option.filter(held.maybeTarget, (target) => isTargetPresent(layout, target)),
-        () => (held.by._tag === "Keyboard" ? originOf(layout, held.subject) : Option.none()),
+        () => (held.by._tag === "Keyboard" ? originOf(layout, held.paneId) : Option.none()),
       );
       return {
         model: withHeld(settled, Option.some({ ...held, maybeTarget })),
@@ -855,12 +824,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 columnBoxOf = (element: Element, heldId: string): 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,
@@ -868,7 +833,7 @@ const columnBoxOf = (element: Element, subject: Subject): ColumnBox => {
     slotMiddles: Array.map(
       Array.filter(
         Array.fromIterable(element.querySelectorAll("[data-reel-slot]")),
-        (slot) => !Option.contains(heldId, slot.getAttribute("data-reel-slot") ?? ""),
+        (slot) => slot.getAttribute("data-reel-slot") !== heldId,
       ),
       (slot) => {
         const slotRect = slot.getBoundingClientRect();
@@ -878,11 +843,11 @@ const columnBoxOf = (element: Element, subject: Subject): ColumnBox => {
   };
 };
 
-/** 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. */
+/** Where a pointer at (`clientX`, `clientY`) would drop the pane `paneId` in the reel
+ *  `reelHook` names, read from where its columns and their slots sit: none outside the reel. */
 const pointerTarget = (
   reelHook: string,
-  subject: Subject,
+  paneId: string,
   clientX: number,
   clientY: number,
 ): Option.Option<Target> =>
@@ -898,9 +863,8 @@ const pointerTarget = (
     }),
     (view) =>
       targetAtPoint(
-        subject,
         Array.map(Array.fromIterable(view.querySelectorAll("[data-reel-column]")), (element) =>
-          columnBoxOf(element, subject),
+          columnBoxOf(element, paneId),
         ),
         clientX,
         clientY,
@@ -909,7 +873,7 @@ const pointerTarget = (
 
 const PointerHold = Schema.Struct({
   reelHook: Schema.String,
-  subject: Subject,
+  paneId: Schema.String,
   pointerId: Schema.Number,
 });
 type PointerHold = typeof PointerHold.Type;
@@ -917,18 +881,16 @@ 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),
+  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. */
 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()),
-    ),
-  );
+  dragMessages<Message>(hold.pointerId, {
+    moved: (event) => Message.MovedPointer(pointerAt(hold, event)),
+    released: (event) => Message.ReleasedPointer(pointerAt(hold, event)),
+    cancelled: () => 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 => {
@@ -941,7 +903,7 @@ const towards = (at: number, low: number, high: number): number => {
   }
 };
 
-/** While a pointer carries a pane or a column near the reel's edges, the reel scrolls that way,
+/** 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>(() =>
@@ -1036,23 +998,21 @@ const splitterMessages = (hold: SplitterHold): Stream.Stream<Message> =>
         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()),
-      ),
-    );
+    return dragMessages<Message>(hold.pointerId, {
+      moved: (event) => Message.MovedSplitter({ share: shareOf(event) }),
+      released: (event) => Message.ReleasedSplitter({ share: shareOf(event) }),
+      cancelled: () => Message.CancelledSplitter(),
+    });
   });
 
 const pointerHoldOf = (model: Model, isCarryingOnly: boolean): Option.Option<PointerHold> =>
-  Option.flatMap(model.maybeHeld, ({ subject, by }) =>
+  Option.flatMap(model.maybeHeld, ({ paneId, by }) =>
     By.match(by, {
       Keyboard: () => Option.none(),
       Pointer: ({ pointerId, isCarrying }) =>
         isCarryingOnly && !isCarrying
           ? Option.none()
-          : Option.some({ reelHook: model.id, subject, pointerId }),
+          : Option.some({ reelHook: model.id, paneId, pointerId }),
     }),
   );
 
@@ -1107,7 +1067,7 @@ const reelSubscriptions = Subscription.make<Model, Message>()((entry) => ({
   ),
 }));
 
-/** A held pane or column follows the pointer (the reel scrolling near its edges), a dragged
+/** A held pane follows the pointer (the reel scrolling near its edges), a dragged
  *  splitter resizes, and Escape puts either back, before a dialog or the page sees it, from
  *  listeners that run only while something is held. Lift them into the application's
  *  Subscriptions, once per reel, behind a key prefix of the parent's: `subscriptions("tiles")`
@@ -1159,7 +1119,7 @@ type ReelInfo = Readonly<{
   toPaneView: (pane: Pane, render: PaneRender) => Html;
   maybeFocusedId: Option.Option<string>;
   maybeMark: Option.Option<Target>;
-  heldPaneIds: ReadonlySet<string>;
+  maybeCarriedId: Option.Option<string>;
 }>;
 
 const helpId = (model: Model): string => `${model.id}-grip-help`;
@@ -1174,9 +1134,6 @@ const HELD_STEPS: Readonly<Record<string, Step>> = {
   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
@@ -1190,31 +1147,16 @@ const byId = Order.mapInput(Order.String, (pane: Pane) => pane.id);
 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)),
+      Option.isSome(requestOf(layout, held.paneId, 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 carriedIdOf = (model: Model): Option.Option<string> =>
+  Option.map(Option.filter(model.maybeHeld, isCarried), ({ paneId }) => paneId);
 
-const gripView = (model: Model, subject: Subject, label: string, h: HtmlBuilder<Message>): Html => {
+const gripView = (model: Model, pane: Pane, 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 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");
 
@@ -1231,7 +1173,7 @@ const gripView = (model: Model, subject: Subject, label: string, h: HtmlBuilder<
           );
     } else {
       return Option.liftPredicate(
-        Message.PressedGripKey({ subject }),
+        Message.PressedGripKey({ paneId: pane.id }),
         () => isIdleNow && isDropKey(key),
       );
     }
@@ -1240,7 +1182,7 @@ const gripView = (model: Model, subject: Subject, label: string, h: HtmlBuilder<
   const onGripPress: Attribute<Message> = h.OnPointerDown(
     (_pointerType, button, _screenX, _screenY, _time, clientX, clientY, pointerId) =>
       Option.liftPredicate(
-        Message.PressedGrip({ subject, pointerId, clientX, clientY }),
+        Message.PressedGrip({ paneId: pane.id, pointerId, clientX, clientY }),
         () => isIdleNow && button === LEFT_BUTTON,
       ),
   );
@@ -1248,10 +1190,10 @@ const gripView = (model: Model, subject: Subject, label: string, h: HtmlBuilder<
   return IconButton.view(
     {
       glyph: "grip",
-      label,
+      label: fill(COPY.paneGrip, { pane: pane.label }),
       isQuiet: true,
       attributes: [
-        h.DataAttribute("reel-grip", subjectHook(model, subject)),
+        h.DataAttribute("reel-grip", paneHook(model, pane.id)),
         h.AriaRoleDescription("draggable"),
         h.AriaDescribedBy(helpId(model)),
         Button.pressedAttribute(isHeld, h),
@@ -1264,34 +1206,23 @@ const gripView = (model: Model, subject: Subject, label: string, h: HtmlBuilder<
   );
 };
 
-/** 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 = (
+/** 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>,
-): 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),
-      ),
-    ),
-  ];
-};
+): ReadonlyArray<Attribute<Message>> =>
+  splitterAttributes(
+    {
+      orientation: splitter._tag === "Width" ? "vertical" : "horizontal",
+      isIdle: !isHolding(model) && Option.isNone(model.maybeResizing),
+      onPress: (pointerId, clientX, clientY) =>
+        Message.PressedSplitter({ splitter, pointerId, clientX, clientY }),
+      onStep: (direction) =>
+        Message.PressedSplitterKey({ splitter, share: direction * SPLITTER_STEP }),
+    },
+    h,
+  );
 
 const dropClass = (info: ReelInfo, column: Column, paneId: string): string =>
   Option.match(
@@ -1299,7 +1230,10 @@ const dropClass = (info: ReelInfo, column: Column, paneId: string): string =>
       if (mark._tag !== "Into" || mark.columnId !== column.id) {
         return Option.none();
       }
-      const others = Array.filter(column.panes, (pane) => !info.heldPaneIds.has(pane.id));
+      const others = Array.filter(
+        column.panes,
+        (pane) => !Option.contains(info.maybeCarriedId, pane.id),
+      );
       return Option.orElse(
         Option.map(
           Option.filter(Array.get(others, mark.index), (pane) => pane.id === paneId),
@@ -1341,14 +1275,13 @@ const splitView = (model: Model, above: Pane, share: number, h: HtmlBuilder<Mess
   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),
+    ...reelSplitterAttributes(model, Splitter.Split({ abovePaneId: above.id }), h),
   ]);
 
 const columnView = (
@@ -1379,26 +1312,11 @@ const columnView = (
         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,
-      ],
+      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),
@@ -1406,7 +1324,7 @@ const columnView = (
       h.AriaValuetext(widthWords(column.width)),
       h.Tabindex(0),
       h.DataAttribute("reel-resize", column.id),
-      ...splitterAttributes(model, Splitter.Width({ columnId: column.id }), h),
+      ...reelSplitterAttributes(model, Splitter.Width({ columnId: column.id }), h),
     ]),
   ];
 };
@@ -1426,7 +1344,7 @@ const paneLayerView = (
     [h.Class("reel-panes")],
     Array.map(panes, (pane) => {
       const isFocused = Option.contains(info.maybeFocusedId, pane.id);
-      const isHeld = info.heldPaneIds.has(pane.id);
+      const isHeld = Option.contains(info.maybeCarriedId, pane.id);
       return h.keyed("div")(
         pane.id,
         [
@@ -1438,12 +1356,7 @@ const paneLayerView = (
         ],
         [
           info.toPaneView(pane, {
-            grip: gripView(
-              model,
-              Subject.Pane({ paneId: pane.id }),
-              fill(COPY.paneGrip, { pane: pane.label }),
-              h,
-            ),
+            grip: gripView(model, pane, h),
             id: `${model.id}-${pane.id}`,
           }),
         ],
@@ -1452,8 +1365,8 @@ const paneLayerView = (
   );
 };
 
-/** 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. */
+/** 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 { model, layout } = info;
 
@@ -1471,12 +1384,7 @@ const liftedCopyView = (info: ReelInfo, h: HtmlBuilder<Message>): ReadonlyArray<
                 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))}"]`,
-                    }),
+                    sourceSelector: `[data-reel-pane="${CSS.escape(paneHook(model, held.paneId))}"]`,
                     pressX,
                     pressY,
                   }),
@@ -1484,34 +1392,19 @@ const liftedCopyView = (info: ReelInfo, h: HtmlBuilder<Message>): ReadonlyArray<
               ],
               [
                 h.div(
-                  [h.Class("reel-lifted")],
-                  Array.map(
-                    Array.filter(
-                      Array.flatMap(layout, (column) => column.panes),
-                      (pane) => info.heldPaneIds.has(pane.id),
+                  [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([], [heldWords(layout, held)]),
+                      ],
                     ),
-                    (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]),
-                            ],
-                          ),
-                        ],
-                      ),
-                  ),
+                  ],
                 ),
               ],
             ),
@@ -1532,15 +1425,14 @@ const previewed = (model: Model, layout: Layout): Layout =>
 /**
  * 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`.
+ * `div.reel-view`, whose `div.reel-track` lays out the columns (`div.reel-column`, a slot per
+ * pane with a splitter between) with a splitter after each, and the panes themselves in
+ * `div.reel-panes`, each pinned to its slot by anchor positioning. The reel takes its height
+ * from whatever holds it. The layout is the parent's; each pane renders through `toPaneView`.
  *
- * A pane's grip, 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
+ * A pane's grip lifts it under a pointer or the keyboard: Space or Enter picks it up, the
+ * arrows move it (left and right through the gaps and columns, up and down among a column's
+ * panes), Space drops it, and Escape or Tab puts it back. A drop reports what it asks
  * of the layout as the OutMessage. Lift `subscriptions(keyPrefix)` into the application's, or
  * nothing follows the pointer, and call `reconcile` whenever the layout changes.
  */
@@ -1558,7 +1450,7 @@ export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h
     toPaneView,
     maybeFocusedId: focusedPaneId(model, layout),
     maybeMark: markOf(model, layout),
-    heldPaneIds: heldPanesOf(model, layout),
+    maybeCarriedId: carriedIdOf(model),
   };
 
   return h.div(