@gjermundgaraba-designs/pixel-paper 0.21.0 → 0.22.0

package/src/rail/rail.ts

@@ -1,4 +1,4 @@
-import { Array, Cause, Effect, Option, Schema, Stream } from "effect";
+import { Array, Cause, Effect, Number, Option, Schema, Stream } from "effect";
 import * as Command from "foldkit/command";
 import * as Dom from "foldkit/dom";
 import type { Html } from "foldkit/html";
@@ -7,18 +7,32 @@ import * as Mount from "foldkit/mount";
 import * as Render from "foldkit/render";
 import { modifyFields } from "foldkit/struct";
 import { defineView } from "foldkit/submodel";
+import * as Subscription from "foldkit/subscription";
 import type * as Update from "foldkit/update";
 
 import * as Button from "../button/button.ts";
+import { escapeKeys, markDragging, pointerMessages, splitterAttributes } from "../drag/drag.ts";
 import * as IconButton from "../iconButton/iconButton.ts";
+import { prefixKeys } from "../subscription/prefixKeys.ts";
 
 // MODEL
 
-/** Schema for a rail: whether it is open as a drawer (at 900px and under). Wider, it is
- *  always in the page and this stays false. */
+/** A splitter a pointer drags: pressed at `pressX` on a rail `fromWidth` wide, and the width
+ *  it previews. */
+const Resizing = Schema.Struct({
+  pointerId: Schema.Number,
+  pressX: Schema.Number,
+  fromWidth: Schema.Number,
+  width: Schema.Number,
+});
+
+/** Schema for a rail: whether it is open as a drawer (at 900px and under; wider, it is always
+ *  in the page and this stays false), and its splitter while a pointer drags it. Its width is
+ *  the parent's. */
 export const Model = Schema.Struct({
   id: Schema.String,
   isOpen: Schema.Boolean,
+  maybeResizing: Schema.Option(Resizing),
 });
 export type Model = typeof Model.Type;
 
@@ -29,6 +43,12 @@ export type Model = typeof Model.Type;
  *  the window growing past 900px while it is open, where the rail is back in the page. */
 export const Message = defineMessageUnion({
   ClickedOpen: {},
+  PressedSplitter: { pointerId: Schema.Number, clientX: Schema.Number, width: Schema.Number },
+  MovedSplitter: { clientX: Schema.Number },
+  ReleasedSplitter: { clientX: Schema.Number },
+  CancelledSplitter: {},
+  PressedEscape: {},
+  PressedSplitterKey: { width: Schema.Number },
   ClickedClose: {},
   ClosedDrawer: {},
   BlurredDrawer: {},
@@ -38,14 +58,39 @@ export const Message = defineMessageUnion({
 });
 export type Message = typeof Message.Type;
 
+/** What a rail asks of its parent. `ResizedRail`: its splitter was let go, or stepped by a
+ *  key, at `width` pixels, within the rail's bounds; the parent keeps it (per client) and
+ *  passes it back as the view's `maybeWidth`. */
+export const OutMessage = defineMessageUnion({
+  ResizedRail: { width: Schema.Number },
+});
+export type OutMessage = typeof OutMessage.Type;
+
 // INIT
 
 /** Configuration for creating a rail with `init`. The `id` is the rail's, unique in the
  *  document. */
 export type InitConfig = Readonly<{ id: string }>;
 
-/** Creates a rail, closed. */
-export const init = (config: InitConfig): Model => ({ id: config.id, isOpen: false });
+/** Creates a rail, closed, its splitter at rest. */
+export const init = (config: InitConfig): Model => ({
+  id: config.id,
+  isOpen: false,
+  maybeResizing: Option.none(),
+});
+
+// WIDTH
+
+/** The rail's widths, in pixels: before the reader sizes it (as the stylesheet's `--rail` has
+ *  it, which the splitter says as its value until a width is given), the least its panels
+ *  still fit in (a tree's row keeps a glyph, a dot and a few words of its title), the most
+ *  (which leaves the deck at least 421px of a 901px window, the narrowest one the rail stands
+ *  in, more than a phone has), and what an arrow on its splitter moves it. The bounds and the
+ *  step are the component's, not tokens: the splitter says them as its values. */
+const WIDTH = { start: 272, least: 220, most: 480, step: 16 };
+
+const bounded = (width: number): number =>
+  Math.round(Number.clamp(width, { minimum: WIDTH.least, maximum: WIDTH.most }));
 
 // ACCESSORS
 
@@ -135,10 +180,48 @@ const open = (model: Model): UpdateReturn => ({
 /** Closes the rail's drawer, focus back on its button. */
 export const close = (model: Model): UpdateReturn => closeDrawer(model, true);
 
-/** Processes a rail Message and returns the next Model and Commands. */
+const withResizing = (model: Model, maybeResizing: Option.Option<typeof Resizing.Type>): Model =>
+  modifyFields(model, { maybeResizing: () => maybeResizing });
+
+/** The width a dragged splitter previews with the pointer at `clientX`. */
+const dragTo = (model: Model, clientX: number): Model =>
+  withResizing(
+    model,
+    Option.map(model.maybeResizing, (resizing) => ({
+      ...resizing,
+      width: bounded(resizing.fromWidth + clientX - resizing.pressX),
+    })),
+  );
+
+/** Processes a rail Message and returns the next Model, Commands and OutMessage: a splitter let
+ *  go where it changes the width, or stepped by a key, asks for the width. */
 export const update = (model: Model, message: Message) =>
-  Message.match<UpdateReturn>(message, {
+  Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(message, {
     ClickedOpen: () => open(model),
+    PressedSplitter: ({ pointerId, clientX, width }) =>
+      Option.isSome(model.maybeResizing)
+        ? { model }
+        : {
+            model: withResizing(
+              model,
+              Option.some({ pointerId, pressX: clientX, fromWidth: width, width }),
+            ),
+          },
+    MovedSplitter: ({ clientX }) => ({ model: dragTo(model, clientX) }),
+    ReleasedSplitter: ({ clientX }) =>
+      Option.match(dragTo(model, clientX).maybeResizing, {
+        onNone: () => ({ model }),
+        onSome: ({ fromWidth, width }) => ({
+          model: withResizing(model, Option.none()),
+          ...(width === fromWidth ? {} : { outMessage: OutMessage.ResizedRail({ width }) }),
+        }),
+      }),
+    CancelledSplitter: () => ({ model: withResizing(model, Option.none()) }),
+    PressedEscape: () => ({ model: withResizing(model, Option.none()) }),
+    PressedSplitterKey: ({ width }) => ({
+      model,
+      outMessage: OutMessage.ResizedRail({ width: bounded(width) }),
+    }),
     ClickedClose: () => close(model),
     ClosedDrawer: () => close(model),
     BlurredDrawer: () => closeDrawer(model, false),
@@ -216,37 +299,95 @@ export const FollowRailDrawer = Mount.defineStream("FollowRailDrawer", {
   },
 });
 
+// SUBSCRIPTION
+
+const railSubscriptions = Subscription.make<Model, Message>()((entry) => ({
+  resize: entry(
+    { maybePointerId: Schema.Option(Schema.Number) },
+    {
+      modelToDependencies: (model) => ({
+        maybePointerId: Option.map(model.maybeResizing, ({ pointerId }) => pointerId),
+      }),
+      dependenciesToStream: ({ maybePointerId }) =>
+        Option.match(maybePointerId, {
+          onNone: () => Stream.empty,
+          onSome: (pointerId) =>
+            Stream.merge(
+              pointerMessages<Message>(pointerId, {
+                moved: ({ clientX }) => Message.MovedSplitter({ clientX }),
+                released: ({ clientX }) => Message.ReleasedSplitter({ clientX }),
+                cancelled: () => Message.CancelledSplitter(),
+              }),
+              markDragging,
+            ),
+        }),
+    },
+  ),
+  escape: entry(
+    { isResizing: Schema.Boolean },
+    {
+      modelToDependencies: (model) => ({ isResizing: Option.isSome(model.maybeResizing) }),
+      dependenciesToStream: ({ isResizing }) =>
+        isResizing ? escapeKeys(Message.PressedEscape()) : Stream.empty,
+    },
+  ),
+}));
+
+/** A dragged splitter follows the pointer, and Escape puts it back before a dialog or the
+ *  page sees it, from listeners that run only while it is dragged. Lift them into the
+ *  application's Subscriptions behind a key prefix of the parent's: `subscriptions("rail")` is
+ *  keyed `railResize` and `railEscape`. */
+export const subscriptions = <Prefix extends string>(keyPrefix: Prefix) =>
+  prefixKeys(keyPrefix, railSubscriptions);
+
 // VIEW
 
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
 export type ViewInputs = Readonly<{
-  /** Names the rail for screen readers, and its button and drawer head (`"collections"`). */
+  /** Names the rail for screen readers, and its button, drawer head and splitter
+   *  (`"collections"`). */
   label: string;
+  /** The width the reader gave the rail, in pixels, as the parent keeps it from `ResizedRail`
+   *  (for this client: another reader's window is not this one's); none for the stylesheet's.
+   *  A width out of the rail's bounds prints at the nearer bound. */
+  maybeWidth: Option.Option<number>;
   /** The rail's panels: a tree, places, filters. A function because a Submodel's viewInputs
    *  may hold functions only at the top level, and Foldkit runs this one in the parent's
    *  boundary, so the handlers in what it returns dispatch the parent's Messages. */
   toAsideView: () => ReadonlyArray<Html>;
-  /** The deck beside the rail, usually `main.deck#main`, given the button that opens the
-   *  drawer to print first in it. A function because it receives that button, and runs in the
-   *  parent's boundary like `toAsideView`. */
+  /** The page beside the rail, `main.deck#main` or `main.bench#main`, given the button that
+   *  opens the drawer to print first in it. A function because it receives that button, and
+   *  runs in the parent's boundary like `toAsideView`. */
   toDeckView: (openButton: Html) => Html;
 }>;
 
 /**
  * A column of panels beside the deck, fixed under the top bar and scrolling itself:
- * `div.railed >` the deck, then `aside.rail[popover="auto"][aria-label]`. One element serves
- * both layouts, so nothing in it renders twice or loses its state. At 900px and under it leaves the
- * page, and `span.rail-open > button.btn.small` at the top of the deck opens the same element as a
- * drawer over a veil, its head (the name and a close glyph) showing. Opening focuses its first
+ * `div.railed >` the deck, then `aside.rail[popover="auto"][aria-label]`, then its splitter,
+ * `div.rail-resize[role="separator"]`, on its right edge. One element serves both layouts, so
+ * nothing in it renders twice or loses its state. At 900px and under it leaves the page, and
+ * `span.rail-open > button.btn.small` at the top of the deck opens the same element as a drawer
+ * over a veil, its head (the name and a close glyph) showing. Opening focuses its first
  * control; Escape, a press on the veil, the close glyph, focus leaving or the window growing
  * past 900px closes it, and the first three put focus back on the button.
  *
+ * Its splitter sizes it, by a pointer (previewed as it moves) or the side arrows, within its
+ * bounds, and reports the width as `ResizedRail` for the parent to keep and pass back as
+ * `maybeWidth`, which the view sets as `--rail` on `div.railed`, so the page's padding and the
+ * rail's width follow it. The drawer keeps its own width. Lift `subscriptions(keyPrefix)` into
+ * the application's, or a dragged splitter follows nothing.
+ *
  * Its state is its own, not `@foldkit/ui`'s Popover: that panel is placed by Floating UI and
  * rendered only while open, and this one is always in the page, placed by the stylesheet, and
  * opened as a native popover so the browser keeps it in the top layer.
  */
 export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html => {
   const { label, toAsideView, toDeckView } = viewInputs;
+  const maybeWidth = Option.orElse(
+    Option.map(model.maybeResizing, ({ width }) => width),
+    () => Option.map(viewInputs.maybeWidth, bounded),
+  );
+  const width = Option.getOrElse(maybeWidth, () => WIDTH.start);
 
   const openButton = h.span(
     [h.Class("rail-open")],
@@ -271,7 +412,10 @@ export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h
   // NOTE: the deck comes first so the page's main content, and its h1, precede the rail's
   // panels in reading order; the stylesheet places the rail, fixed, at the left.
   return h.div(
-    [h.Class("railed")],
+    [
+      h.Class("railed"),
+      ...Array.fromOption(Option.map(maybeWidth, (shown) => h.Style({ "--rail": `${shown}px` }))),
+    ],
     [
       toDeckView(openButton),
       h.aside(
@@ -296,6 +440,27 @@ export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h
           ...toAsideView(),
         ],
       ),
+      h.div([
+        h.Class("rail-resize"),
+        h.Role("separator"),
+        h.AriaLabel(`Width of ${label}`),
+        h.AriaControls(model.id),
+        h.AriaValuemin(WIDTH.least),
+        h.AriaValuemax(WIDTH.most),
+        h.AriaValuenow(width),
+        h.AriaValuetext(`${width} pixels`),
+        h.Tabindex(0),
+        ...splitterAttributes(
+          {
+            orientation: "vertical",
+            isIdle: Option.isNone(model.maybeResizing),
+            onPress: (pointerId, clientX) => Message.PressedSplitter({ pointerId, clientX, width }),
+            onStep: (direction) =>
+              Message.PressedSplitterKey({ width: bounded(width + direction * WIDTH.step) }),
+          },
+          h,
+        ),
+      ]),
     ],
   );
 });

package/src/reel/index.ts

@@ -2,7 +2,6 @@ export { Layout, OutMessage, Pane, apply } from "./layout.ts";
 export {
   Action,
   AnnounceReel,
-  FocusGrip,
   FocusPane,
   Message,
   Model,

package/src/reel/layout.ts

@@ -1,5 +1,5 @@
 // The reel's layout, apart from its Model: the panes, columns and requests the application
-// holds and applies, where a held pane or column may land, and how places are said.
+// holds and applies, where a held pane may land, and how places are said.
 
 import { Array, Equal, Match, Number, Option, Predicate, Record, Schema, pipe } from "effect";
 import { defineMessageUnion } from "foldkit/message";
@@ -34,15 +34,15 @@ export type Column = typeof Column.Type;
 export const Layout = Schema.Array(Column);
 export type Layout = typeof Layout.Type;
 
-/** What is held: a pane or a column, by its id. */
+/** What a move is said of: a pane, or a column (a key moves one), by its id. */
 export const Subject = defineTaggedUnion({
   Pane: { paneId: Schema.String },
   Column: { columnId: Schema.String },
 });
 export type Subject = typeof Subject.Type;
 
-/** Where a held pane or column would land: into a column, at a place among its other panes,
- *  or in the gap before a column (none: after the last), as a column of its own. */
+/** Where a held pane would land: into a column, at a place among its other panes, or in the
+ *  gap before a column (none: after the last), as a column of its own. */
 export const Target = defineTaggedUnion({
   Into: { columnId: Schema.String, index: Schema.Number },
   Gap: { maybeBeforeColumnId: Schema.Option(Schema.String) },
@@ -101,10 +101,10 @@ export const placeAt = (layout: Layout, columnIndex: number, row: number): Optio
 
 export const firstPlace = (layout: Layout): Option.Option<Place> => placeAt(layout, 0, 0);
 
-export const columnIndexOf = (layout: Layout, columnId: string): Option.Option<number> =>
+const columnIndexOf = (layout: Layout, columnId: string): Option.Option<number> =>
   Array.findFirstIndex(layout, (column) => column.id === columnId);
 
-export const columnOf = (layout: Layout, columnId: string): Option.Option<Column> =>
+const columnOf = (layout: Layout, columnId: string): Option.Option<Column> =>
   Array.findFirst(layout, (column) => column.id === columnId);
 
 /** The id of the column after the one at `columnIndex`: none after the last. */
@@ -253,15 +253,13 @@ export const apply = (layout: Layout, request: OutMessage): Layout =>
 const PRESET_TOLERANCE = 0.01;
 
 /** The widths a column cycles through, as fractions of the reel's visible width, with the
- *  words they are said in and the mark a column's head prints. They live here, not in the
- *  tokens, because they are words as much as sizes. */
-const PRESETS: Array.NonEmptyReadonlyArray<
-  Readonly<{ width: number; words: string; mark: string }>
-> = [
-  { width: 1 / 3, words: "a third of the width", mark: "1/3" },
-  { width: 1 / 2, words: "half the width", mark: "1/2" },
-  { width: 2 / 3, words: "two thirds of the width", mark: "2/3" },
-  { width: 1, words: "the full width", mark: "full" },
+ *  words they are said in. They live here, not in the tokens, because they are words as much
+ *  as sizes. */
+const PRESETS: Array.NonEmptyReadonlyArray<Readonly<{ width: number; words: string }>> = [
+  { width: 1 / 3, words: "a third of the width" },
+  { width: 1 / 2, words: "half the width" },
+  { width: 2 / 3, words: "two thirds of the width" },
+  { width: 1, words: "the full width" },
 ];
 
 const presetOf = (width: number) =>
@@ -275,12 +273,6 @@ export const widthWords = (width: number): string =>
     onSome: ({ words }) => words,
   });
 
-export const widthMark = (width: number): string =>
-  Option.match(presetOf(width), {
-    onNone: () => `${percent(width)}%`,
-    onSome: ({ mark }) => mark,
-  });
-
 /** The next preset wider than `width`, or the narrowest past the widest. */
 export const nextPreset = (width: number): number =>
   Option.getOrElse(
@@ -298,7 +290,7 @@ const WORDS = {
   stackedPlace: "{row} of {rows} in column {column} of {columns}",
 };
 
-/** What a place is called when a drop would leave the pane or column where it is. */
+/** What a place is called when a drop or a move would leave the pane or column where it is. */
 export const WHERE_IT_WAS = "where it was";
 
 export const fill = (template: string, fields: Readonly<Record<string, string | number>>): string =>
@@ -338,57 +330,39 @@ export const whereWords = (layout: Layout, subject: Subject): Option.Option<stri
 
 // TARGETS
 
-/** Where `subject` is now, as a target: a pane at its place, a column in the gap before
- *  itself. */
-export const originOf = (layout: Layout, subject: Subject): Option.Option<Target> =>
-  Subject.match(subject, {
-    Pane: ({ paneId }) =>
-      Option.map(placeOf(layout, paneId), ({ column, row }) =>
-        Target.Into({ columnId: column.id, index: row }),
-      ),
-    Column: ({ columnId }) =>
-      Option.map(columnIndexOf(layout, columnId), () =>
-        Target.Gap({ maybeBeforeColumnId: Option.some(columnId) }),
-      ),
-  });
-
-export const isPresent = (layout: Layout, subject: Subject): boolean =>
-  Option.isSome(originOf(layout, subject));
+/** Where the pane `paneId` is now, as a target. */
+export const originOf = (layout: Layout, paneId: string): Option.Option<Target> =>
+  Option.map(placeOf(layout, paneId), ({ column, row }) =>
+    Target.Into({ columnId: column.id, index: row }),
+  );
 
-/** What dropping `subject` at `target` asks of the layout: none where it would change
- *  nothing (where it is, or a target whose column is gone). */
+/** What dropping the pane `paneId` at `target` asks of the layout: none where it would
+ *  change nothing (where it is, or a target whose column is gone). */
 export const requestOf = (
   layout: Layout,
-  subject: Subject,
+  paneId: string,
   target: Target,
 ): Option.Option<OutMessage> =>
   Option.filter(
-    Subject.match(subject, {
-      Pane: ({ paneId }) =>
-        Option.some(
-          Target.match(target, {
-            Into: ({ columnId, index }) =>
-              OutMessage.MovedPane({ paneId, toColumnId: columnId, toIndex: index }),
-            Gap: ({ maybeBeforeColumnId }) =>
-              OutMessage.PulledOutPane({ paneId, maybeBeforeColumnId }),
-          }),
-        ),
-      Column: ({ columnId }) =>
-        Target.match(target, {
-          Into: () => Option.none<OutMessage>(),
-          Gap: ({ maybeBeforeColumnId }) =>
-            Option.some(OutMessage.MovedColumn({ columnId, maybeBeforeColumnId })),
-        }),
-    }),
+    Option.some(
+      Target.match(target, {
+        Into: ({ columnId, index }) =>
+          OutMessage.MovedPane({ paneId, toColumnId: columnId, toIndex: index }),
+        Gap: ({ maybeBeforeColumnId }) => OutMessage.PulledOutPane({ paneId, maybeBeforeColumnId }),
+      }),
+    ),
     (request) => !Equal.equals(apply(layout, request), layout),
   );
 
-/** Where `subject` would be once dropped at `target`, in words. */
-export const landingWords = (layout: Layout, subject: Subject, target: Target): string =>
-  Option.match(requestOf(layout, subject, target), {
+/** Where the pane `paneId` would be once dropped at `target`, in words. */
+export const landingWords = (layout: Layout, paneId: string, target: Target): string =>
+  Option.match(requestOf(layout, paneId, target), {
     onNone: () => WHERE_IT_WAS,
     onSome: (request) =>
-      Option.getOrElse(whereWords(apply(layout, request), subject), () => WHERE_IT_WAS),
+      Option.getOrElse(
+        whereWords(apply(layout, request), Subject.Pane({ paneId })),
+        () => WHERE_IT_WAS,
+      ),
   });
 
 /** The column a target sits in or before (the last, for the gap after it), which a keyboard
@@ -404,7 +378,7 @@ export const Step = Schema.Literals(["Up", "Down", "Left", "Right"]);
 export type Step = typeof Step.Type;
 
 // A keyboard step reads the layout as a row of stops: the gap before each column (even), then
-// the column itself (odd), and the gap after the last. A column steps from gap to gap.
+// the column itself (odd), and the gap after the last.
 const stopOf = (layout: Layout, target: Target): Option.Option<number> =>
   Target.match(target, {
     Into: ({ columnId }) => Option.map(columnIndexOf(layout, columnId), (column) => column * 2 + 1),
@@ -416,7 +390,7 @@ const stopOf = (layout: Layout, target: Target): Option.Option<number> =>
 export const isTargetPresent = (layout: Layout, target: Target): boolean =>
   Option.isSome(stopOf(layout, target));
 
-const targetAtStop = (layout: Layout, subject: Subject, stop: number, row: number): Target =>
+const targetAtStop = (layout: Layout, paneId: string, stop: number, row: number): Target =>
   stop % 2 === 0
     ? Target.Gap({
         maybeBeforeColumnId: Option.map(Array.get(layout, stop / 2), ({ id }) => id),
@@ -424,28 +398,23 @@ const targetAtStop = (layout: Layout, subject: Subject, stop: number, row: numbe
     : Option.match(Array.get(layout, (stop - 1) / 2), {
         onNone: () => Target.Gap({ maybeBeforeColumnId: Option.none() }),
         onSome: (column) =>
-          Target.Into({ columnId: column.id, index: Math.min(row, roomIn(column, subject)) }),
+          Target.Into({ columnId: column.id, index: Math.min(row, roomIn(column, paneId)) }),
       });
 
-/** The last index `subject` may take among a column's panes. */
-const roomIn = (column: Column, subject: Subject): number =>
-  Subject.match(subject, {
-    Pane: ({ paneId }) => othersIn(column, paneId).length,
-    Column: () => 0,
-  });
+/** The last index the pane `paneId` may take among a column's panes. */
+const roomIn = (column: Column, paneId: string): number => othersIn(column, paneId).length;
 
-const stepOnce = (layout: Layout, subject: Subject, target: Target, step: Step): Target => {
+const stepOnce = (layout: Layout, paneId: string, target: Target, step: Step): Target => {
   const row = Target.match(target, { Into: ({ index }) => index, Gap: () => 0 });
-  const stride = subject._tag === "Column" ? 2 : 1;
 
   return Option.match(stopOf(layout, target), {
     onNone: () => target,
     onSome: (stop) =>
       Match.value(step).pipe(
         Match.withReturnType<Target>(),
-        Match.when("Left", () => targetAtStop(layout, subject, Math.max(stop - stride, 0), row)),
+        Match.when("Left", () => targetAtStop(layout, paneId, Math.max(stop - 1, 0), row)),
         Match.when("Right", () =>
-          targetAtStop(layout, subject, Math.min(stop + stride, layout.length * 2), row),
+          targetAtStop(layout, paneId, Math.min(stop + 1, layout.length * 2), row),
         ),
         Match.whenOr("Up", "Down", () =>
           Target.match(target, {
@@ -458,7 +427,7 @@ const stepOnce = (layout: Layout, subject: Subject, target: Target, step: Step):
                     columnId,
                     index: Number.clamp(step === "Up" ? row - 1 : row + 1, {
                       minimum: 0,
-                      maximum: roomIn(column, subject),
+                      maximum: roomIn(column, paneId),
                     }),
                   }),
               }),
@@ -469,24 +438,25 @@ const stepOnce = (layout: Layout, subject: Subject, target: Target, step: Step):
   });
 };
 
-/** A keyboard step from `target`: left and right cross from a column to the gap beside it and
- *  on to the next column, up and down move among a column's panes. A stop where the drop would
- *  change nothing is passed over, but for where `subject` started; with nothing further that
- *  way, it stays (where `subject` started, if the target's column has gone). */
+/** A keyboard step of the pane `paneId` from `target`: left and right cross from a column to
+ *  the gap beside it and on to the next column, up and down move among a column's panes. A
+ *  stop where the drop would change nothing is passed over, but for where the pane started;
+ *  with nothing further that way, it stays (where the pane started, if the target's column has
+ *  gone). */
 export const steppedTarget = (
   layout: Layout,
-  subject: Subject,
+  paneId: string,
   target: Target,
   step: Step,
 ): Target => {
-  const origin = originOf(layout, subject);
-  // a target whose column has gone steps from where `subject` started instead
+  const origin = originOf(layout, paneId);
+  // a target whose column has gone steps from where the pane started instead
   const start = isTargetPresent(layout, target) ? target : Option.getOrElse(origin, () => target);
   const isStop = (candidate: Target): boolean =>
-    Option.isSome(requestOf(layout, subject, candidate)) ||
+    Option.isSome(requestOf(layout, paneId, candidate)) ||
     Option.exists(origin, (place) => Equal.equals(place, candidate));
   const walk = (from: Target, left: number): Target => {
-    const next = stepOnce(layout, subject, from, step);
+    const next = stepOnce(layout, paneId, from, step);
     if (Equal.equals(next, from) || left === 0) {
       return start;
     }
@@ -514,44 +484,34 @@ const gapBefore = (columns: ReadonlyArray<ColumnBox>, gap: number): Target =>
   Target.Gap({ maybeBeforeColumnId: Option.map(Array.get(columns, gap), ({ id }) => id) });
 
 /** Where a pointer at (`clientX`, `clientY`) over a reel whose columns sit at `columns`, left
- *  to right, would drop `subject`. A column lands in the gap nearest the pointer, counted by
- *  the columns whose middle it has passed. A pane over a column's edge band (or over a gap, or
- *  past the last column) lands in that gap, as a column of its own; over the rest of a column
- *  it lands among that column's other panes, after each whose middle is above the pointer. */
+ *  to right, would drop a pane. Over a column's edge band (or over a gap, or past the last
+ *  column) it lands in that gap, as a column of its own; over the rest of a column it lands
+ *  among that column's other panes, after each whose middle is above the pointer. */
 export const targetAtPoint = (
-  subject: Subject,
   columns: ReadonlyArray<ColumnBox>,
   clientX: number,
   clientY: number,
 ): Target =>
-  Subject.match(subject, {
-    Column: () =>
-      gapBefore(
-        columns,
-        Array.filter(columns, ({ left, right }) => (left + right) / 2 < clientX).length,
-      ),
-    Pane: () =>
-      pipe(
-        Array.findFirstIndex(columns, ({ right }) => clientX <= right),
-        Option.flatMap((index) => Option.map(Array.get(columns, index), (box) => ({ index, box }))),
-        Option.match({
-          onNone: () => gapBefore(columns, columns.length),
-          onSome: ({ index, box: { id, left, right, slotMiddles } }) => {
-            const band = Math.min((right - left) * EDGE_SHARE, EDGE_MAX);
-            if (clientX < left + band) {
-              return gapBefore(columns, index);
-            } else if (clientX > right - band) {
-              return gapBefore(columns, index + 1);
-            } else {
-              return Target.Into({
-                columnId: id,
-                index: Array.filter(slotMiddles, (middle) => middle < clientY).length,
-              });
-            }
-          },
-        }),
-      ),
-  });
+  pipe(
+    Array.findFirstIndex(columns, ({ right }) => clientX <= right),
+    Option.flatMap((index) => Option.map(Array.get(columns, index), (box) => ({ index, box }))),
+    Option.match({
+      onNone: () => gapBefore(columns, columns.length),
+      onSome: ({ index, box: { id, left, right, slotMiddles } }) => {
+        const band = Math.min((right - left) * EDGE_SHARE, EDGE_MAX);
+        if (clientX < left + band) {
+          return gapBefore(columns, index);
+        } else if (clientX > right - band) {
+          return gapBefore(columns, index + 1);
+        } else {
+          return Target.Into({
+            columnId: id,
+            index: Array.filter(slotMiddles, (middle) => middle < clientY).length,
+          });
+        }
+      },
+    }),
+  );
 
 // RESIZE