@gjermundgaraba-designs/pixel-paper 0.18.0 → 0.19.0

package/src/reel/index.ts

@@ -0,0 +1,20 @@
+export { Layout, OutMessage, Pane, apply } from "./layout.ts";
+export {
+  Action,
+  AnnounceReel,
+  FocusGrip,
+  FocusPane,
+  Message,
+  Model,
+  RestoreFocus,
+  ScrollIntoView,
+  SizeLiftedPane,
+  focusedPaneId,
+  init,
+  perform,
+  reconcile,
+  subscriptions,
+  update,
+  view,
+} from "./reel.ts";
+export type { InitConfig, PaneRender, UpdateContext, ViewInputs } from "./reel.ts";

package/src/reel/layout.ts

@@ -0,0 +1,602 @@
+// 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.
+
+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,
+});
+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,
+  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 is held: a pane or a column, 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. */
+export const Target = defineTaggedUnion({
+  Into: { columnId: Schema.String, index: Schema.Number },
+  Gap: { maybeBeforeColumnId: Schema.Option(Schema.String) },
+});
+export type Target = typeof Target.Type;
+
+// REQUEST
+
+/** 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
+ *  layout changed under it. `MovedPane`: a pane into a column, at `toIndex` among that
+ *  column's other panes. `PulledOutPane`: a pane into a column of its own, before a column
+ *  (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 },
+  ResizedPanes: {
+    columnId: Schema.String,
+    weights: Schema.Record(Schema.String, Schema.Number),
+  },
+});
+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;
+
+// LAYOUT
+
+/** 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 }>;
+
+const placesOf = (layout: Layout): ReadonlyArray<Place> =>
+  Array.flatMap(layout, (column, columnIndex) =>
+    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> =>
+  Option.flatMap(Array.get(layout, columnIndex), (column) =>
+    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 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> =>
+  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> =>
+  Option.map(Array.get(layout, columnIndex + 1), (column) => column.id);
+
+const meanWeight = (panes: ReadonlyArray<Pane>): number =>
+  Array.match(panes, {
+    onEmpty: () => 1,
+    onNonEmpty: (some) => Number.sumAll(Array.map(some, (pane) => pane.weight)) / some.length,
+  });
+
+const othersIn = (column: Column, paneId: string): ReadonlyArray<Pane> =>
+  Array.filter(column.panes, (pane) => pane.id !== paneId);
+
+const insertAt = <A>(items: ReadonlyArray<A>, index: number, item: A): Array.NonEmptyArray<A> => {
+  const [before, after] = Array.splitAt(
+    items,
+    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 }] : [];
+  });
+
+/** 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>,
+): 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 pullOutPane = (
+  layout: Layout,
+  paneId: 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));
+      const rest = without(layout, paneId);
+
+      if (isAlone && isWhereItIs) {
+        return layout;
+      }
+
+      return Option.match(gapIndex(rest, maybeBeforeColumnId), {
+        onNone: () => layout,
+        onSome: (gap) =>
+          insertAt(rest, gap, {
+            id: freshColumnId(rest, paneId),
+            width: from.column.width,
+            panes: [{ ...from.pane, weight: 1 }],
+          }),
+      });
+    },
+  });
+
+const moveColumn = (
+  layout: Layout,
+  columnId: string,
+  maybeBeforeColumnId: Option.Option<string>,
+): Layout => {
+  const rest = Array.filter(layout, (column) => column.id !== columnId);
+  return Option.match(
+    Option.all({
+      column: columnOf(layout, columnId),
+      gap: gapIndex(rest, maybeBeforeColumnId),
+    }),
+    {
+      onNone: () => layout,
+      onSome: ({ column, gap }) => insertAt(rest, gap, column),
+    },
+  );
+};
+
+const modifyColumn = (layout: Layout, columnId: string, f: (column: Column) => Column): Layout =>
+  Array.map(layout, (column) => (column.id === columnId ? f(column) : column));
+
+/**
+ * The layout once `request` is applied: what the reel asked, done the way every client does
+ * it. A pane that leaves its column takes the mean weight of the column it joins; a column
+ * left without panes goes; a pane pulled out keeps its old column's width, in a column named
+ * for it. A request naming a pane or column the layout no longer has changes nothing.
+ */
+export const apply = (layout: Layout, request: OutMessage): Layout =>
+  OutMessage.match(request, {
+    MovedPane: ({ paneId, toColumnId, toIndex }) => movePane(layout, paneId, toColumnId, toIndex),
+    PulledOutPane: ({ paneId, maybeBeforeColumnId }) =>
+      pullOutPane(layout, paneId, maybeBeforeColumnId),
+    MovedColumn: ({ columnId, maybeBeforeColumnId }) =>
+      moveColumn(layout, columnId, maybeBeforeColumnId),
+    ResizedColumn: ({ columnId, width }) =>
+      modifyColumn(layout, columnId, (column) => ({ ...column, width })),
+    ResizedPanes: ({ columnId, weights }) =>
+      modifyColumn(layout, columnId, (column) => ({
+        ...column,
+        panes: Array.map(column.panes, (pane) => ({
+          ...pane,
+          weight: Option.getOrElse(Record.get(weights, pane.id), () => pane.weight),
+        })),
+      })),
+  });
+
+// 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 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" },
+];
+
+const presetOf = (width: number) =>
+  Array.findFirst(PRESETS, (preset) => Math.abs(preset.width - width) < PRESET_TOLERANCE);
+
+const percent = (width: number): string => Math.round(width * 100).toLocaleString(LOCALE);
+
+export const widthWords = (width: number): string =>
+  Option.match(presetOf(width), {
+    onNone: () => `${percent(width)}% of the width`,
+    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(
+    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 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 =>
+  Array.reduce(Object.entries(fields), template, (text, [key, value]) =>
+    text.replaceAll(`{${key}}`, Predicate.isNumber(value) ? value.toLocaleString(LOCALE) : value),
+  );
+
+export const subjectWords = (layout: Layout, subject: Subject): Option.Option<string> =>
+  Subject.match(subject, {
+    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 }),
+      ),
+  });
+
+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);
+};
+
+/** Where `subject` sits in `layout`, in words. */
+export const whereWords = (layout: Layout, subject: Subject): Option.Option<string> =>
+  Subject.match(subject, {
+    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 }),
+      ),
+  });
+
+// 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));
+
+/** 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). */
+export const requestOf = (
+  layout: Layout,
+  subject: Subject,
+  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 })),
+        }),
+    }),
+    (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), {
+    onNone: () => WHERE_IT_WAS,
+    onSome: (request) =>
+      Option.getOrElse(whereWords(apply(layout, request), subject), () => 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> =>
+  Target.match(target, {
+    Into: ({ columnId }) => Option.some(columnId),
+    Gap: ({ maybeBeforeColumnId }) =>
+      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. A column steps from gap to gap.
+const stopOf = (layout: Layout, target: Target): Option.Option<number> =>
+  Target.match(target, {
+    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, subject: Subject, stop: number, row: number): Target =>
+  stop % 2 === 0
+    ? Target.Gap({
+        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, subject)) }),
+      });
+
+/** 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,
+  });
+
+const stepOnce = (layout: Layout, subject: Subject, 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("Right", () =>
+          targetAtStop(layout, subject, Math.min(stop + stride, layout.length * 2), row),
+        ),
+        Match.whenOr("Up", "Down", () =>
+          Target.match(target, {
+            Gap: () => target,
+            Into: ({ columnId }) =>
+              Option.match(columnOf(layout, columnId), {
+                onNone: () => target,
+                onSome: (column) =>
+                  Target.Into({
+                    columnId,
+                    index: Number.clamp(step === "Up" ? row - 1 : row + 1, {
+                      minimum: 0,
+                      maximum: roomIn(column, subject),
+                    }),
+                  }),
+              }),
+          }),
+        ),
+        Match.exhaustive,
+      ),
+  });
+};
+
+/** 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). */
+export const steppedTarget = (
+  layout: Layout,
+  subject: Subject,
+  target: Target,
+  step: Step,
+): Target => {
+  const origin = originOf(layout, subject);
+  // a target whose column has gone steps from where `subject` started instead
+  const start = isTargetPresent(layout, target) ? target : Option.getOrElse(origin, () => target);
+  const isStop = (candidate: Target): boolean =>
+    Option.isSome(requestOf(layout, subject, candidate)) ||
+    Option.exists(origin, (place) => Equal.equals(place, candidate));
+  const walk = (from: Target, left: number): Target => {
+    const next = stepOnce(layout, subject, from, step);
+    if (Equal.equals(next, from) || left === 0) {
+      return start;
+    }
+    return isStop(next) ? next : walk(next, left - 1);
+  };
+  return walk(start, layout.length * 2 + Array.length(placesOf(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;
+
+/** A column as a pointer reads it: its id, its left and right edges, and the vertical middles
+ *  of its slots, the held pane's left out. */
+export type ColumnBox = Readonly<{
+  id: string;
+  left: number;
+  right: number;
+  slotMiddles: ReadonlyArray<number>;
+}>;
+
+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. */
+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,
+              });
+            }
+          },
+        }),
+      ),
+  });
+
+// RESIZE
+
+/** 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 PRECISION = 10_000;
+
+const rounded = (value: number): number => Math.round(value * PRECISION) / PRECISION;
+
+/** 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. None when what it sizes is gone. */
+export const resizeOf = (
+  layout: Layout,
+  splitter: Splitter,
+  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 })),
+        }),
+      ),
+    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;
+          const floor = Math.min(total * SHARE_FLOOR, pair / 2);
+          const nextAbove = Number.clamp(above.weight + share * total, {
+            minimum: floor,
+            maximum: pair - floor,
+          });
+          return OutMessage.ResizedPanes({
+            columnId: column.id,
+            weights: { [above.id]: rounded(nextAbove), [below.id]: rounded(pair - nextAbove) },
+          });
+        }),
+      ),
+  });
+
+/** Whether what `splitter` sizes is still in `layout`. */
+export const isSplitterPresent = (layout: Layout, splitter: Splitter): boolean =>
+  Option.isSome(resizeOf(layout, splitter, 0));