@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/reel/layout.ts

@@ -1,55 +1,56 @@
-// The reel's layout, apart from its Model: the panes, columns and requests the application
-// 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 {
+  Array,
+  Equal,
+  Match,
+  Number,
+  Option,
+  Predicate,
+  Record,
+  Schema,
+  pipe,
+} from "effect";
 import { defineMessageUnion } from "foldkit/message";
 import { defineTaggedUnion } from "foldkit/schema";
 
 import { LOCALE } from "../locale/locale.ts";
 
-// LAYOUT SCHEMAS
-
 /** Schema for one pane as the reel knows it: its id, unique in the reel and the application's
  *  to keep, its name in words (its grip, its splitter and what screen readers hear), and its
  *  share of its column's height, a weight against its neighbours'. */
 export const Pane = Schema.Struct({
   id: Schema.String,
   label: Schema.String,
-  weight: Schema.Number,
+  weight: Schema.Finite,
 });
+
 export type Pane = typeof Pane.Type;
 
-/** Schema for one column: its id, unique among the reel's columns and the application's to
- *  keep, its width, a fraction of the reel's visible width (1 fills it), and its panes, top
- *  to bottom. A column `apply` makes for a pane pulled out takes the pane's id (`notes`, or
- *  `notes/2` where a column has it), so pane and column ids share one namespace. */
 export const Column = Schema.Struct({
   id: Schema.String,
-  width: Schema.Number,
+  width: Schema.Finite,
   panes: Schema.NonEmptyArray(Pane),
 });
+
 export type Column = typeof Column.Type;
 
 /** Schema for a reel's layout: its columns, left to right. The application's to keep. */
 export const Layout = Schema.Array(Column);
+
 export type Layout = typeof Layout.Type;
 
-/** 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 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 },
+  Into: { columnId: Schema.String, index: Schema.Finite },
   Gap: { maybeBeforeColumnId: Schema.Option(Schema.String) },
 });
-export type Target = typeof Target.Type;
 
-// REQUEST
+export type Target = typeof Target.Type;
 
 /** Union of what a reel asks the application to do to its layout, which the application
  *  applies (`apply` does it) or not, by id, so a request still means what it meant after the
@@ -58,131 +59,189 @@ export type Target = typeof Target.Type;
  *  (none: after the last). `MovedColumn`: a column to before another (none: last).
  *  `ResizedColumn`: a column's width. `ResizedPanes`: a column's panes' weights, by pane id. */
 export const OutMessage = defineMessageUnion({
-  MovedPane: { paneId: Schema.String, toColumnId: Schema.String, toIndex: Schema.Number },
-  PulledOutPane: { paneId: Schema.String, maybeBeforeColumnId: Schema.Option(Schema.String) },
-  MovedColumn: { columnId: Schema.String, maybeBeforeColumnId: Schema.Option(Schema.String) },
-  ResizedColumn: { columnId: Schema.String, width: Schema.Number },
+  MovedPane: {
+    paneId: Schema.String,
+    toColumnId: Schema.String,
+    toIndex: Schema.Finite,
+  },
+  PulledOutPane: {
+    paneId: Schema.String,
+    maybeBeforeColumnId: Schema.Option(Schema.String),
+  },
+  MovedColumn: {
+    columnId: Schema.String,
+    maybeBeforeColumnId: Schema.Option(Schema.String),
+  },
+  ResizedColumn: { columnId: Schema.String, width: Schema.Finite },
   ResizedPanes: {
     columnId: Schema.String,
-    weights: Schema.Record(Schema.String, Schema.Number),
+    weights: Schema.Record(Schema.String, Schema.Finite),
   },
 });
+
 export type OutMessage = typeof OutMessage.Type;
 
-/** A splitter: the one after a column, which sizes its width, or the one below a pane, which
- *  shares the height between it and the pane under it. */
 export const Splitter = defineTaggedUnion({
   Width: { columnId: Schema.String },
   Split: { abovePaneId: Schema.String },
 });
+
 export type Splitter = typeof Splitter.Type;
 
-/** A resize: a column's width, or its panes' weights. */
-export const Resize = Schema.Union([OutMessage.ResizedColumn, OutMessage.ResizedPanes]);
-export type Resize = typeof Resize.Type;
+export const Resize = Schema.Union([
+  OutMessage.ResizedColumn,
+  OutMessage.ResizedPanes,
+]);
 
-// LAYOUT
+export type Resize = typeof Resize.Type;
 
-/** A pane where it sits: its column (and that column's index) and its row. */
-export type Place = Readonly<{ column: Column; columnIndex: number; row: number; pane: Pane }>;
+export type Place = Readonly<{
+  column: Column;
+  columnIndex: number;
+  row: number;
+  pane: Pane;
+}>;
 
-const placesOf = (layout: Layout): ReadonlyArray<Place> =>
+const placesOf = (layout: Layout): readonly Place[] =>
   Array.flatMap(layout, (column, columnIndex) =>
-    Array.map(column.panes, (pane, row) => ({ column, columnIndex, row, pane })),
+    Array.map(column.panes, (pane, row) => ({ column, columnIndex, row, pane }))
   );
 
 export const placeOf = (layout: Layout, paneId: string): Option.Option<Place> =>
   Array.findFirst(placesOf(layout), (place) => place.pane.id === paneId);
 
-export const placeAt = (layout: Layout, columnIndex: number, row: number): Option.Option<Place> =>
+export const placeAt = (
+  layout: Layout,
+  columnIndex: number,
+  row: number
+): Option.Option<Place> =>
   Option.flatMap(Array.get(layout, columnIndex), (column) =>
-    Option.map(Array.get(column.panes, row), (pane) => ({ column, columnIndex, row, pane })),
+    Option.map(Array.get(column.panes, row), (pane) => ({
+      column,
+      columnIndex,
+      row,
+      pane,
+    }))
   );
 
-export const firstPlace = (layout: Layout): Option.Option<Place> => placeAt(layout, 0, 0);
+export const firstPlace = (layout: Layout): Option.Option<Place> =>
+  placeAt(layout, 0, 0);
 
-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);
 
 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. */
-const nextColumnId = (layout: Layout, columnIndex: number): Option.Option<string> =>
+const nextColumnId = (
+  layout: Layout,
+  columnIndex: number
+): Option.Option<string> =>
   Option.map(Array.get(layout, columnIndex + 1), (column) => column.id);
 
-// a running mean, which never passes the largest weight, where the weights' sum may overflow
-const meanWeight = (panes: ReadonlyArray<Pane>): number =>
+const meanWeight = (panes: readonly Pane[]): number =>
   Array.match(panes, {
     onEmpty: () => 1,
     onNonEmpty: (some) =>
-      Array.reduce(some, 0, (mean, pane, index) => mean + (pane.weight - mean) / (index + 1)),
+      Array.reduce(
+        some,
+        0,
+        (mean, pane, index) => mean + (pane.weight - mean) / (index + 1)
+      ),
   });
 
-const othersIn = (column: Column, paneId: string): ReadonlyArray<Pane> =>
+const othersIn = (column: Column, paneId: string): readonly Pane[] =>
   Array.filter(column.panes, (pane) => pane.id !== paneId);
 
-const insertAt = <A>(items: ReadonlyArray<A>, index: number, item: A): Array.NonEmptyArray<A> => {
+const insertAt = <A>(
+  items: readonly A[],
+  index: number,
+  item: A
+): Array.NonEmptyArray<A> => {
   const [before, after] = Array.splitAt(
     items,
-    Number.clamp(index, { minimum: 0, maximum: items.length }),
+    Number.clamp(index, { minimum: 0, maximum: items.length })
   );
+
   return Array.appendAll(Array.append(before, item), after);
 };
 
-/** `layout` with the pane `paneId` taken out, and any column it leaves empty gone. */
 const without = (layout: Layout, paneId: string): Layout =>
   Array.flatMap(layout, (column) => {
     const others = othersIn(column, paneId);
-    return Array.isReadonlyArrayNonEmpty(others) ? [{ ...column, panes: others }] : [];
+
+    return Array.isReadonlyArrayNonEmpty(others)
+      ? [{ ...column, panes: others }]
+      : [];
   });
 
-/** Where a column goes when it is put before `maybeBeforeColumnId`: none when that column is
- *  not in `layout`. */
 const gapIndex = (
   layout: Layout,
-  maybeBeforeColumnId: Option.Option<string>,
+  maybeBeforeColumnId: Option.Option<string>
 ): Option.Option<number> =>
   Option.match(maybeBeforeColumnId, {
     onNone: () => Option.some(layout.length),
     onSome: (columnId) => columnIndexOf(layout, columnId),
   });
 
-/** A column id for a column made for `paneId`: the pane's own id, or the first `id/2`,
- *  `id/3`… no column in `layout` has. */
 const freshColumnId = (layout: Layout, paneId: string, suffix = 1): string => {
   const candidate = suffix === 1 ? paneId : `${paneId}/${suffix}`;
+
   return Array.some(layout, (column) => column.id === candidate)
     ? freshColumnId(layout, paneId, suffix + 1)
     : candidate;
 };
 
-const movePane = (layout: Layout, paneId: string, toColumnId: string, toIndex: number): Layout =>
-  Option.match(Option.all({ from: placeOf(layout, paneId), to: columnOf(layout, toColumnId) }), {
-    onNone: () => layout,
-    onSome: ({ from, to }) => {
-      const others = othersIn(to, paneId);
-      const weight = to.id === from.column.id ? from.pane.weight : meanWeight(others);
-      const panes = insertAt(others, toIndex, { ...from.pane, weight });
-      // the target column keeps its place even when the pane was alone in it
-      return Array.flatMap(layout, (column) =>
-        column.id === toColumnId ? [{ ...column, panes }] : without([column], paneId),
-      );
-    },
-  });
+const movePane = (
+  layout: Layout,
+  paneId: string,
+  toColumnId: string,
+  toIndex: number
+): Layout =>
+  Option.match(
+    Option.all({
+      from: placeOf(layout, paneId),
+      to: columnOf(layout, toColumnId),
+    }),
+    {
+      onNone: () => layout,
+      onSome: ({ from, to }) => {
+        const others = othersIn(to, paneId);
+
+        const weight =
+          to.id === from.column.id ? from.pane.weight : meanWeight(others);
+
+        const panes = insertAt(others, toIndex, { ...from.pane, weight });
+
+        return Array.flatMap(layout, (column) =>
+          column.id === toColumnId
+            ? [{ ...column, panes }]
+            : without([column], paneId)
+        );
+      },
+    }
+  );
 
 const pullOutPane = (
   layout: Layout,
   paneId: string,
-  maybeBeforeColumnId: Option.Option<string>,
+  maybeBeforeColumnId: Option.Option<string>
 ): Layout =>
   Option.match(placeOf(layout, paneId), {
     onNone: () => layout,
     onSome: (from) => {
       const isAlone = from.column.panes.length === 1;
+
       const isWhereItIs =
         Equal.equals(maybeBeforeColumnId, Option.some(from.column.id)) ||
-        Equal.equals(maybeBeforeColumnId, nextColumnId(layout, from.columnIndex));
+        Equal.equals(
+          maybeBeforeColumnId,
+          nextColumnId(layout, from.columnIndex)
+        );
+
       const rest = without(layout, paneId);
 
       if (isAlone && isWhereItIs) {
@@ -204,9 +263,10 @@ const pullOutPane = (
 const moveColumn = (
   layout: Layout,
   columnId: string,
-  maybeBeforeColumnId: Option.Option<string>,
+  maybeBeforeColumnId: Option.Option<string>
 ): Layout => {
   const rest = Array.filter(layout, (column) => column.id !== columnId);
+
   return Option.match(
     Option.all({
       column: columnOf(layout, columnId),
@@ -215,11 +275,15 @@ const moveColumn = (
     {
       onNone: () => layout,
       onSome: ({ column, gap }) => insertAt(rest, gap, column),
-    },
+    }
   );
 };
 
-const modifyColumn = (layout: Layout, columnId: string, f: (column: Column) => Column): Layout =>
+const modifyColumn = (
+  layout: Layout,
+  columnId: string,
+  f: (column: Column) => Column
+): Layout =>
   Array.map(layout, (column) => (column.id === columnId ? f(column) : column));
 
 /**
@@ -230,7 +294,8 @@ const modifyColumn = (layout: Layout, columnId: string, f: (column: Column) => C
  */
 export const apply = (layout: Layout, request: OutMessage): Layout =>
   OutMessage.match(request, {
-    MovedPane: ({ paneId, toColumnId, toIndex }) => movePane(layout, paneId, toColumnId, toIndex),
+    MovedPane: ({ paneId, toColumnId, toIndex }) =>
+      movePane(layout, paneId, toColumnId, toIndex),
     PulledOutPane: ({ paneId, maybeBeforeColumnId }) =>
       pullOutPane(layout, paneId, maybeBeforeColumnId),
     MovedColumn: ({ columnId, maybeBeforeColumnId }) =>
@@ -242,25 +307,22 @@ export const apply = (layout: Layout, request: OutMessage): Layout =>
         ...column,
         panes: Array.map(column.panes, (pane) => ({
           ...pane,
-          weight: Option.getOrElse(Record.get(weights, pane.id), () => pane.weight),
+          weight: Option.getOrElse(
+            Record.get(weights, pane.id),
+            () => pane.weight
+          ),
         })),
       })),
   });
 
-/** Whether `request` changes `layout`: a move, a drop or a stop that would leave it as it is
- *  is passed over. */
 export const isChange = (layout: Layout, request: OutMessage): boolean =>
   !Equal.equals(apply(layout, request), layout);
 
-// WIDTHS
-
-/** How close a width is to a preset to count as it. */
 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. They live here, not in the tokens, because they are words as much
- *  as sizes. */
-const PRESETS: Array.NonEmptyReadonlyArray<Readonly<{ width: number; words: string }>> = [
+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" },
@@ -268,9 +330,13 @@ const PRESETS: Array.NonEmptyReadonlyArray<Readonly<{ width: number; words: stri
 ];
 
 const presetOf = (width: number) =>
-  Array.findFirst(PRESETS, (preset) => Math.abs(preset.width - width) < PRESET_TOLERANCE);
+  Array.findFirst(
+    PRESETS,
+    (preset) => Math.abs(preset.width - width) < PRESET_TOLERANCE
+  );
 
-const percent = (width: number): string => Math.round(width * 100).toLocaleString(LOCALE);
+const percent = (width: number): string =>
+  Math.round(width * 100).toLocaleString(LOCALE);
 
 export const widthWords = (width: number): string =>
   Option.match(presetOf(width), {
@@ -278,146 +344,192 @@ export const widthWords = (width: number): string =>
     onSome: ({ words }) => words,
   });
 
-/** The next preset wider than `width`, or the narrowest past the widest. */
 export const nextPreset = (width: number): number =>
   Option.getOrElse(
-    Array.findFirst(PRESETS, (preset) => preset.width > width + PRESET_TOLERANCE),
-    () => Array.headNonEmpty(PRESETS),
+    Array.findFirst(
+      PRESETS,
+      (preset) => preset.width > width + PRESET_TOLERANCE
+    ),
+    () => Array.headNonEmpty(PRESETS)
   ).width;
 
-// WORDS
-
-/** The words a place is said in. `{pane}` is a pane's label and `{column}` a column's
- *  number, counted from one. */
 const WORDS = {
   columnSubject: "column with {pane}",
   place: "column {column} of {columns}",
   stackedPlace: "{row} of {rows} in column {column} of {columns}",
 };
 
-/** 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 =>
+export const fill = (
+  template: string,
+  fields: Readonly<Record<string, string | number>>
+): string =>
   Array.reduce(Object.entries(fields), template, (text, [key, value]) =>
-    text.replaceAll(`{${key}}`, Predicate.isNumber(value) ? value.toLocaleString(LOCALE) : value),
+    text.replaceAll(
+      `{${key}}`,
+      Predicate.isNumber(value) ? value.toLocaleString(LOCALE) : value
+    )
   );
 
-export const subjectWords = (layout: Layout, subject: Subject): Option.Option<string> =>
+export const subjectWords = (
+  layout: Layout,
+  subject: Subject
+): Option.Option<string> =>
   Subject.match(subject, {
-    Pane: ({ paneId }) => Option.map(placeOf(layout, paneId), ({ pane }) => pane.label),
+    Pane: ({ paneId }) =>
+      Option.map(placeOf(layout, paneId), ({ pane }) => pane.label),
     Column: ({ columnId }) =>
       Option.map(columnOf(layout, columnId), (column) =>
-        fill(WORDS.columnSubject, { pane: Array.headNonEmpty(column.panes).label }),
+        fill(WORDS.columnSubject, {
+          pane: Array.headNonEmpty(column.panes).label,
+        })
       ),
   });
 
 export const placeWords = (layout: Layout, place: Place): string => {
   const rows = place.column.panes.length;
+
   const fields = {
     column: place.columnIndex + 1,
     columns: layout.length,
     row: place.row + 1,
     rows,
   };
-  return rows > 1 ? fill(WORDS.stackedPlace, fields) : fill(WORDS.place, fields);
+
+  return rows > 1
+    ? fill(WORDS.stackedPlace, fields)
+    : fill(WORDS.place, fields);
 };
 
-/** Where `subject` sits in `layout`, in words. */
-export const whereWords = (layout: Layout, subject: Subject): Option.Option<string> =>
+export const whereWords = (
+  layout: Layout,
+  subject: Subject
+): Option.Option<string> =>
   Subject.match(subject, {
-    Pane: ({ paneId }) => Option.map(placeOf(layout, paneId), (place) => placeWords(layout, place)),
+    Pane: ({ paneId }) =>
+      Option.map(placeOf(layout, paneId), (place) => placeWords(layout, place)),
     Column: ({ columnId }) =>
       Option.map(columnIndexOf(layout, columnId), (column) =>
-        fill(WORDS.place, { column: column + 1, columns: layout.length }),
+        fill(WORDS.place, { column: column + 1, columns: layout.length })
       ),
   });
 
-// TARGETS
-
-/** Where the pane `paneId` is now, as a target. */
-export const originOf = (layout: Layout, paneId: string): Option.Option<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 }),
+    Target.Into({ columnId: column.id, index: row })
   );
 
-/** 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,
   paneId: string,
-  target: Target,
+  target: Target
 ): Option.Option<OutMessage> =>
   Option.liftPredicate(
     Target.match(target, {
       Into: ({ columnId, index }) =>
         OutMessage.MovedPane({ paneId, toColumnId: columnId, toIndex: index }),
-      Gap: ({ maybeBeforeColumnId }) => OutMessage.PulledOutPane({ paneId, maybeBeforeColumnId }),
+      Gap: ({ maybeBeforeColumnId }) =>
+        OutMessage.PulledOutPane({ paneId, maybeBeforeColumnId }),
     }),
-    (request) => isChange(layout, request),
+    (request) => isChange(layout, request)
   );
 
-/** Where the pane `paneId` would be once dropped at `target`, in words. */
-export const landingWords = (layout: Layout, paneId: string, target: Target): string =>
+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.Pane({ paneId })),
-        () => WHERE_IT_WAS,
+        () => WHERE_IT_WAS
       ),
   });
 
-/** The column a target sits in or before (the last, for the gap after it), which a keyboard
- *  step scrolls to. */
-export const columnOfTarget = (layout: Layout, target: Target): Option.Option<string> =>
+export const columnOfTarget = (
+  layout: Layout,
+  target: Target
+): Option.Option<string> =>
   Target.match(target, {
     Into: ({ columnId }) => Option.some(columnId),
     Gap: ({ maybeBeforeColumnId }) =>
-      Option.orElse(maybeBeforeColumnId, () => Option.map(Array.last(layout), ({ id }) => id)),
+      Option.orElse(maybeBeforeColumnId, () =>
+        Option.map(Array.last(layout), ({ id }) => id)
+      ),
   });
 
 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.
 const stopOf = (layout: Layout, target: Target): Option.Option<number> =>
   Target.match(target, {
-    Into: ({ columnId }) => Option.map(columnIndexOf(layout, columnId), (column) => column * 2 + 1),
+    Into: ({ columnId }) =>
+      Option.map(columnIndexOf(layout, columnId), (column) => column * 2 + 1),
     Gap: ({ maybeBeforeColumnId }) =>
       Option.map(gapIndex(layout, maybeBeforeColumnId), (gap) => gap * 2),
   });
 
-/** Whether the column `target` names (into it, or the gap before it) is still in `layout`. */
 export const isTargetPresent = (layout: Layout, target: Target): boolean =>
   Option.isSome(stopOf(layout, target));
 
-const targetAtStop = (layout: Layout, paneId: string, stop: number, row: number): Target =>
+const roomIn = (column: Column, paneId: string): number =>
+  othersIn(column, paneId).length;
+
+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),
+        maybeBeforeColumnId: Option.map(
+          Array.get(layout, stop / 2),
+          ({ id }) => id
+        ),
       })
     : 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, paneId)) }),
+          Target.Into({
+            columnId: column.id,
+            index: Math.min(row, roomIn(column, paneId)),
+          }),
       });
 
-/** 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, paneId: string, target: Target, step: Step): Target => {
-  const row = Target.match(target, { Into: ({ index }) => index, Gap: () => 0 });
+const stepOnce = (
+  layout: Layout,
+  paneId: string,
+  target: Target,
+  step: Step
+): Target => {
+  const row = Target.match(target, {
+    Into: ({ index }) => index,
+    Gap: () => 0,
+  });
 
   return Option.match(stopOf(layout, target), {
     onNone: () => target,
     onSome: (stop) =>
       Match.value(step).pipe(
         Match.withReturnType<Target>(),
-        Match.when("Left", () => targetAtStop(layout, paneId, Math.max(stop - 1, 0), row)),
+        Match.when("Left", () =>
+          targetAtStop(layout, paneId, Math.max(stop - 1, 0), row)
+        ),
         Match.when("Right", () =>
-          targetAtStop(layout, paneId, Math.min(stop + 1, layout.length * 2), row),
+          targetAtStop(
+            layout,
+            paneId,
+            Math.min(stop + 1, layout.length * 2),
+            row
+          )
         ),
         Match.whenOr("Up", "Down", () =>
           Target.match(target, {
@@ -434,157 +546,200 @@ const stepOnce = (layout: Layout, paneId: string, target: Target, step: Step): T
                     }),
                   }),
               }),
-          }),
+          })
         ),
-        Match.exhaustive,
+        Match.exhaustive
       ),
   });
 };
 
-/** 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). */
+const presentOrOrigin = (
+  layout: Layout,
+  target: Target,
+  origin: Option.Option<Target>
+): Target =>
+  isTargetPresent(layout, target)
+    ? target
+    : Option.getOrElse(origin, () => target);
+
+const isChangingDropOrOrigin = (
+  layout: Layout,
+  paneId: string,
+  origin: Option.Option<Target>,
+  candidate: Target
+): boolean =>
+  Option.isSome(requestOf(layout, paneId, candidate)) ||
+  Option.exists(origin, (place) => Equal.equals(place, candidate));
+
+const stopAndRowCount = (layout: Layout): number =>
+  layout.length * 2 + Array.length(placesOf(layout));
+
 export const steppedTarget = (
   layout: Layout,
   paneId: string,
   target: Target,
-  step: Step,
+  step: Step
 ): Target => {
   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, paneId, candidate)) ||
-    Option.exists(origin, (place) => Equal.equals(place, candidate));
-  const walk = (from: Target, left: number): Target => {
+  const start = presentOrOrigin(layout, target, origin);
+
+  const walkPastUnchangingStops = (from: Target, left: number): Target => {
     const next = stepOnce(layout, paneId, from, step);
+
     if (Equal.equals(next, from) || left === 0) {
       return start;
     }
-    return isStop(next) ? next : walk(next, left - 1);
+
+    return isChangingDropOrOrigin(layout, paneId, origin, next)
+      ? next
+      : walkPastUnchangingStops(next, left - 1);
   };
-  return walk(start, layout.length * 2 + Array.length(placesOf(layout)));
+
+  return walkPastUnchangingStops(start, stopAndRowCount(layout));
 };
 
-/** The share of a column's width, from either edge, where a pointer over it means the gap
- *  beside it (a column of its own) rather than a place among its panes, up to `EDGE_MAX`
- *  pixels. */
-const EDGE_SHARE = 0.2;
-const EDGE_MAX = 48;
+const GAP_BAND_SHARE = 0.2;
+const GAP_BAND_MAX = 48;
 
-/** A column as a pointer reads it: its id and its left and right edges. */
 export type ColumnBox = Readonly<{
   id: string;
   left: number;
   right: number;
 }>;
 
-const gapBefore = (columns: ReadonlyArray<ColumnBox>, gap: number): Target =>
-  Target.Gap({ maybeBeforeColumnId: Option.map(Array.get(columns, gap), ({ id }) => id) });
+const gapBefore = (columns: readonly ColumnBox[], gap: number): Target =>
+  Target.Gap({
+    maybeBeforeColumnId: Option.map(Array.get(columns, gap), ({ id }) => id),
+  });
+
+const gapBandOf = ({ left, right }: ColumnBox): number =>
+  Math.min((right - left) * GAP_BAND_SHARE, GAP_BAND_MAX);
+
+const columnUnderOrRightOf = (
+  columns: readonly ColumnBox[],
+  clientX: number
+): Option.Option<Readonly<{ index: number; box: ColumnBox }>> =>
+  pipe(
+    Array.findFirstIndex(columns, ({ right }) => clientX <= right),
+    Option.flatMap((index) =>
+      Option.map(Array.get(columns, index), (box) => ({ index, box }))
+    )
+  );
+
+const slotsAbove = (slotMiddles: readonly number[], clientY: number): number =>
+  Array.filter(slotMiddles, (middle) => middle < clientY).length;
 
-/** Where a pointer at (`clientX`, `clientY`) over a reel whose columns sit at `columns`, left
- *  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.
- *  `slotMiddlesOf` gives the vertical middles of a column's slots, by its index, the held
- *  pane's left out: it is asked for the column the pointer is over alone, and only when the
- *  pointer is among its panes. */
 export const targetAtPoint = (
-  columns: ReadonlyArray<ColumnBox>,
+  columns: readonly ColumnBox[],
   clientX: number,
   clientY: number,
-  slotMiddlesOf: (index: number) => ReadonlyArray<number>,
+  slotMiddlesOf: (index: number) => readonly number[]
 ): Target =>
-  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 } }) => {
-        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(slotMiddlesOf(index), (middle) => middle < clientY).length,
-          });
-        }
-      },
-    }),
-  );
+  Option.match(columnUnderOrRightOf(columns, clientX), {
+    onNone: () => gapBefore(columns, columns.length),
+    onSome: ({ index, box }) => {
+      const band = gapBandOf(box);
+
+      if (clientX < box.left + band) {
+        return gapBefore(columns, index);
+      } else if (clientX > box.right - band) {
+        return gapBefore(columns, index + 1);
+      }
 
-// RESIZE
+      return Target.Into({
+        columnId: box.id,
+        index: slotsAbove(slotMiddlesOf(index), clientY),
+      });
+    },
+  });
 
-/** The narrowest a column's width goes by a splitter, and the least share of its column a pane
- *  keeps: the stylesheet keeps both on screen at their minimums, so these only keep a stored
- *  size from reaching nothing. */
-const WIDTH_FLOOR = 0.1;
-const SHARE_FLOOR = 0.05;
+const COLUMN_WIDTH_FLOOR = 0.1;
+const PANE_SHARE_FLOOR = 0.05;
 const PRECISION = 10_000;
 
-const rounded = (value: number): number => Math.round(value * PRECISION) / PRECISION;
+const rounded = (value: number): number =>
+  Math.round(value * PRECISION) / PRECISION;
+
+const precisionFinerThan = (floor: number): number =>
+  Math.max(PRECISION, 10 ** Math.ceil(-Math.log10(floor)));
 
-/** `weight`, at least `floor`, to four decimals, or, where a step of four decimals is more than
- *  `floor` (a column whose weights total under a five-hundredth, or two panes that small), to
- *  the first power of ten no more than it, so that it never rounds to nothing. A weight too
- *  large or a floor too small to scale by that power is left as it is. */
 const roundedOver = (weight: number, floor: number): number => {
-  const precision = Math.max(PRECISION, 10 ** Math.ceil(-Math.log10(floor)));
+  const precision = precisionFinerThan(floor);
   const scaled = weight * precision;
-  return globalThis.Number.isFinite(scaled) ? Math.round(scaled) / precision : weight;
+  const isScalable = globalThis.Number.isFinite(scaled);
+
+  return isScalable ? Math.round(scaled) / precision : weight;
+};
+
+const resizedColumn = (
+  layout: Layout,
+  columnId: string,
+  share: number
+): Option.Option<Resize> =>
+  Option.map(columnOf(layout, columnId), (column) =>
+    OutMessage.ResizedColumn({
+      columnId,
+      width: rounded(
+        Number.clamp(column.width + share, {
+          minimum: COLUMN_WIDTH_FLOOR,
+          maximum: 1,
+        })
+      ),
+    })
+  );
+
+const paneWeightFloor = (total: number, pair: number): number =>
+  Math.max(
+    Math.min(total * PANE_SHARE_FLOOR, pair / 2),
+    globalThis.Number.MIN_VALUE
+  );
+
+const sharedPair = (
+  column: Column,
+  above: Pane,
+  below: Pane,
+  share: number
+): Resize => {
+  const total = Number.sumAll(Array.map(column.panes, ({ weight }) => weight));
+  const pair = above.weight + below.weight;
+  const floor = paneWeightFloor(total, pair);
+
+  const nextAbove = Number.clamp(above.weight + share * total, {
+    minimum: floor,
+    maximum: pair - floor,
+  });
+
+  const isShareMovable = globalThis.Number.isFinite(total);
+
+  return OutMessage.ResizedPanes({
+    columnId: column.id,
+    weights: isShareMovable
+      ? {
+          [above.id]: roundedOver(nextAbove, floor),
+          [below.id]: roundedOver(pair - nextAbove, floor),
+        }
+      : { [above.id]: above.weight, [below.id]: below.weight },
+  });
 };
 
-/** What moving `splitter` by `share` asks of the layout, from the sizes the layout holds (not
- *  the sizes printed, which the stylesheet may hold at a minimum): a width splitter adds
- *  `share` to its column's width; a pane splitter moves `share` of its column's height from
- *  the pane below it to the pane above, leaving each a weight above nothing however small the
- *  column. None when what it sizes is gone. */
 export const resizeOf = (
   layout: Layout,
   splitter: Splitter,
-  share: number,
+  share: number
 ): Option.Option<Resize> =>
   Splitter.match(splitter, {
-    Width: ({ columnId }) =>
-      Option.map(columnOf(layout, columnId), (column) =>
-        OutMessage.ResizedColumn({
-          columnId,
-          width: rounded(Number.clamp(column.width + share, { minimum: WIDTH_FLOOR, maximum: 1 })),
-        }),
-      ),
+    Width: ({ columnId }) => resizedColumn(layout, columnId, share),
     Split: ({ abovePaneId }) =>
-      Option.flatMap(placeOf(layout, abovePaneId), ({ column, row, pane: above }) =>
-        Option.map(Array.get(column.panes, row + 1), (below) => {
-          const total = Number.sumAll(Array.map(column.panes, ({ weight }) => weight));
-          const pair = above.weight + below.weight;
-          // a column so small that a twentieth of it is no number keeps the least there is
-          const floor = Math.max(
-            Math.min(total * SHARE_FLOOR, pair / 2),
-            globalThis.Number.MIN_VALUE,
-          );
-          const nextAbove = Number.clamp(above.weight + share * total, {
-            minimum: floor,
-            maximum: pair - floor,
-          });
-          return OutMessage.ResizedPanes({
-            columnId: column.id,
-            weights: globalThis.Number.isFinite(total)
-              ? {
-                  [above.id]: roundedOver(nextAbove, floor),
-                  [below.id]: roundedOver(pair - nextAbove, floor),
-                }
-              : // weights that total past the largest number have no share to move: they stay
-                { [above.id]: above.weight, [below.id]: below.weight },
-          });
-        }),
+      Option.flatMap(
+        placeOf(layout, abovePaneId),
+        ({ column, row, pane: above }) =>
+          Option.map(Array.get(column.panes, row + 1), (below) =>
+            sharedPair(column, above, below, share)
+          )
       ),
   });
 
-/** Whether what `splitter` sizes is still in `layout`. */
-export const isSplitterPresent = (layout: Layout, splitter: Splitter): boolean =>
-  Option.isSome(resizeOf(layout, splitter, 0));
+export const isSplitterPresent = (
+  layout: Layout,
+  splitter: Splitter
+): boolean => Option.isSome(resizeOf(layout, splitter, 0));