@gjermundgaraba-designs/pixel-paper 0.18.0 → 0.19.0

package/dist/src/reel/layout.js

@@ -0,0 +1,370 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+// 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.js";
+// 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,
+});
+/** 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),
+});
+/** Schema for a reel's layout: its columns, left to right. The application's to keep. */
+export const Layout = Schema.Array(Column);
+/** What is held: a pane or a column, by its id. */
+export const Subject = defineTaggedUnion({
+    Pane: { paneId: Schema.String },
+    Column: { columnId: Schema.String },
+});
+/** 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) },
+});
+// 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),
+    },
+});
+/** 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 },
+});
+/** A resize: a column's width, or its panes' weights. */
+export const Resize = Schema.Union([OutMessage.ResizedColumn, OutMessage.ResizedPanes]);
+const placesOf = (layout) => __foldkitBrandViewResult((Array.flatMap(layout, (column, columnIndex) => __foldkitBrandViewResult((Array.map(column.panes, (pane, row) => (__foldkitBrandViewResult(({ column, columnIndex, row, pane }), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~2")))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#placesOf");
+export const placeOf = (layout, paneId) => __foldkitBrandViewResult((Array.findFirst(placesOf(layout), (place) => __foldkitBrandViewResult((place.pane.id === paneId), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~3"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#placeOf");
+export const placeAt = (layout, columnIndex, row) => __foldkitBrandViewResult((Option.flatMap(Array.get(layout, columnIndex), (column) => __foldkitBrandViewResult((Option.map(Array.get(column.panes, row), (pane) => (__foldkitBrandViewResult(({ column, columnIndex, row, pane }), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~5")))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~4"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#placeAt");
+export const firstPlace = (layout) => __foldkitBrandViewResult((placeAt(layout, 0, 0)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#firstPlace");
+export const columnIndexOf = (layout, columnId) => __foldkitBrandViewResult((Array.findFirstIndex(layout, (column) => __foldkitBrandViewResult((column.id === columnId), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~6"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#columnIndexOf");
+export const columnOf = (layout, columnId) => __foldkitBrandViewResult((Array.findFirst(layout, (column) => __foldkitBrandViewResult((column.id === columnId), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~7"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#columnOf");
+/** The id of the column after the one at `columnIndex`: none after the last. */
+const nextColumnId = (layout, columnIndex) => __foldkitBrandViewResult((Option.map(Array.get(layout, columnIndex + 1), (column) => __foldkitBrandViewResult((column.id), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~8"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#nextColumnId");
+const meanWeight = (panes) => __foldkitBrandViewResult((Array.match(panes, {
+    onEmpty: () => __foldkitBrandViewResult((1), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onEmpty"),
+    onNonEmpty: (some) => __foldkitBrandViewResult((Number.sumAll(Array.map(some, (pane) => __foldkitBrandViewResult((pane.weight), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~9"))) / some.length), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onNonEmpty"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#meanWeight");
+const othersIn = (column, paneId) => __foldkitBrandViewResult((Array.filter(column.panes, (pane) => __foldkitBrandViewResult((pane.id !== paneId), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~10"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#othersIn");
+const insertAt = (items, index, item) => {
+    const [before, after] = Array.splitAt(items, Number.clamp(index, { minimum: 0, maximum: items.length }));
+    return __foldkitBrandViewResult((Array.appendAll(Array.append(before, item), after)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#insertAt");
+};
+/** `layout` with the pane `paneId` taken out, and any column it leaves empty gone. */
+const without = (layout, paneId) => __foldkitBrandViewResult((Array.flatMap(layout, (column) => {
+    const others = othersIn(column, paneId);
+    return __foldkitBrandViewResult((Array.isReadonlyArrayNonEmpty(others) ? [{ ...column, panes: others }] : []), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~11");
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#without");
+/** Where a column goes when it is put before `maybeBeforeColumnId`: none when that column is
+ *  not in `layout`. */
+const gapIndex = (layout, maybeBeforeColumnId) => __foldkitBrandViewResult((Option.match(maybeBeforeColumnId, {
+    onNone: () => __foldkitBrandViewResult((Option.some(layout.length)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onNone"),
+    onSome: (columnId) => __foldkitBrandViewResult((columnIndexOf(layout, columnId)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#gapIndex");
+/** 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, paneId, suffix = 1) => {
+    const candidate = suffix === 1 ? paneId : `${paneId}/${suffix}`;
+    return __foldkitBrandViewResult((Array.some(layout, (column) => __foldkitBrandViewResult((column.id === candidate), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~12"))
+        ? freshColumnId(layout, paneId, suffix + 1)
+        : candidate), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#freshColumnId");
+};
+const movePane = (layout, paneId, toColumnId, toIndex) => __foldkitBrandViewResult((Option.match(Option.all({ from: placeOf(layout, paneId), to: columnOf(layout, toColumnId) }), {
+    onNone: () => __foldkitBrandViewResult((layout), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onNone~2"),
+    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 __foldkitBrandViewResult((Array.flatMap(layout, (column) => __foldkitBrandViewResult((column.id === toColumnId ? [{ ...column, panes }] : without([column], paneId)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~13"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome~2");
+    },
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#movePane");
+const pullOutPane = (layout, paneId, maybeBeforeColumnId) => __foldkitBrandViewResult((Option.match(placeOf(layout, paneId), {
+    onNone: () => __foldkitBrandViewResult((layout), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onNone~3"),
+    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 __foldkitBrandViewResult((layout), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome~3");
+        }
+        return __foldkitBrandViewResult((Option.match(gapIndex(rest, maybeBeforeColumnId), {
+            onNone: () => __foldkitBrandViewResult((layout), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onNone~4"),
+            onSome: (gap) => __foldkitBrandViewResult((insertAt(rest, gap, {
+                id: freshColumnId(rest, paneId),
+                width: from.column.width,
+                panes: [{ ...from.pane, weight: 1 }],
+            })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome~4"),
+        })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome~3");
+    },
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#pullOutPane");
+const moveColumn = (layout, columnId, maybeBeforeColumnId) => {
+    const rest = Array.filter(layout, (column) => __foldkitBrandViewResult((column.id !== columnId), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~14"));
+    return __foldkitBrandViewResult((Option.match(Option.all({
+        column: columnOf(layout, columnId),
+        gap: gapIndex(rest, maybeBeforeColumnId),
+    }), {
+        onNone: () => __foldkitBrandViewResult((layout), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onNone~5"),
+        onSome: ({ column, gap }) => __foldkitBrandViewResult((insertAt(rest, gap, column)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome~5"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#moveColumn");
+};
+const modifyColumn = (layout, columnId, f) => __foldkitBrandViewResult((Array.map(layout, (column) => (__foldkitBrandViewResult((column.id === columnId ? f(column) : column), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~15")))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#modifyColumn");
+/**
+ * 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, request) => __foldkitBrandViewResult((OutMessage.match(request, {
+    MovedPane: ({ paneId, toColumnId, toIndex }) => __foldkitBrandViewResult((movePane(layout, paneId, toColumnId, toIndex)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#MovedPane"),
+    PulledOutPane: ({ paneId, maybeBeforeColumnId }) => __foldkitBrandViewResult((pullOutPane(layout, paneId, maybeBeforeColumnId)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#PulledOutPane"),
+    MovedColumn: ({ columnId, maybeBeforeColumnId }) => __foldkitBrandViewResult((moveColumn(layout, columnId, maybeBeforeColumnId)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#MovedColumn"),
+    ResizedColumn: ({ columnId, width }) => __foldkitBrandViewResult((modifyColumn(layout, columnId, (column) => (__foldkitBrandViewResult(({ ...column, width }), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~16")))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#ResizedColumn"),
+    ResizedPanes: ({ columnId, weights }) => __foldkitBrandViewResult((modifyColumn(layout, columnId, (column) => (__foldkitBrandViewResult(({
+        ...column,
+        panes: Array.map(column.panes, (pane) => (__foldkitBrandViewResult(({
+            ...pane,
+            weight: Option.getOrElse(Record.get(weights, pane.id), () => __foldkitBrandViewResult((pane.weight), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~19")),
+        }), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~18"))),
+    }), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~17")))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#ResizedPanes"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#apply");
+// 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 = [
+    { 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) => __foldkitBrandViewResult((Array.findFirst(PRESETS, (preset) => __foldkitBrandViewResult((Math.abs(preset.width - width) < PRESET_TOLERANCE), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~20"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#presetOf");
+const percent = (width) => __foldkitBrandViewResult((Math.round(width * 100).toLocaleString(LOCALE)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#percent");
+export const widthWords = (width) => __foldkitBrandViewResult((Option.match(presetOf(width), {
+    onNone: () => __foldkitBrandViewResult((`${percent(width)}% of the width`), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onNone~6"),
+    onSome: ({ words }) => __foldkitBrandViewResult((words), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome~6"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#widthWords");
+export const widthMark = (width) => __foldkitBrandViewResult((Option.match(presetOf(width), {
+    onNone: () => __foldkitBrandViewResult((`${percent(width)}%`), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onNone~7"),
+    onSome: ({ mark }) => __foldkitBrandViewResult((mark), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome~7"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#widthMark");
+/** The next preset wider than `width`, or the narrowest past the widest. */
+export const nextPreset = (width) => __foldkitBrandViewResult((Option.getOrElse(Array.findFirst(PRESETS, (preset) => __foldkitBrandViewResult((preset.width > width + PRESET_TOLERANCE), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~21")), () => __foldkitBrandViewResult((Array.headNonEmpty(PRESETS)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~22")).width), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#nextPreset");
+// 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, fields) => __foldkitBrandViewResult((Array.reduce(Object.entries(fields), template, (text, [key, value]) => __foldkitBrandViewResult((text.replaceAll(`{${key}}`, Predicate.isNumber(value) ? value.toLocaleString(LOCALE) : value)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~23"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#fill");
+export const subjectWords = (layout, subject) => __foldkitBrandViewResult((Subject.match(subject, {
+    Pane: ({ paneId }) => __foldkitBrandViewResult((Option.map(placeOf(layout, paneId), ({ pane }) => __foldkitBrandViewResult((pane.label), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~24"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Pane"),
+    Column: ({ columnId }) => __foldkitBrandViewResult((Option.map(columnOf(layout, columnId), (column) => __foldkitBrandViewResult((fill(WORDS.columnSubject, { pane: Array.headNonEmpty(column.panes).label })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~25"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Column"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#subjectWords");
+export const placeWords = (layout, place) => {
+    const rows = place.column.panes.length;
+    const fields = {
+        column: place.columnIndex + 1,
+        columns: layout.length,
+        row: place.row + 1,
+        rows,
+    };
+    return __foldkitBrandViewResult((rows > 1 ? fill(WORDS.stackedPlace, fields) : fill(WORDS.place, fields)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#placeWords");
+};
+/** Where `subject` sits in `layout`, in words. */
+export const whereWords = (layout, subject) => __foldkitBrandViewResult((Subject.match(subject, {
+    Pane: ({ paneId }) => __foldkitBrandViewResult((Option.map(placeOf(layout, paneId), (place) => __foldkitBrandViewResult((placeWords(layout, place)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~26"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Pane~2"),
+    Column: ({ columnId }) => __foldkitBrandViewResult((Option.map(columnIndexOf(layout, columnId), (column) => __foldkitBrandViewResult((fill(WORDS.place, { column: column + 1, columns: layout.length })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~27"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Column~2"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#whereWords");
+// TARGETS
+/** Where `subject` is now, as a target: a pane at its place, a column in the gap before
+ *  itself. */
+export const originOf = (layout, subject) => __foldkitBrandViewResult((Subject.match(subject, {
+    Pane: ({ paneId }) => __foldkitBrandViewResult((Option.map(placeOf(layout, paneId), ({ column, row }) => __foldkitBrandViewResult((Target.Into({ columnId: column.id, index: row })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~28"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Pane~3"),
+    Column: ({ columnId }) => __foldkitBrandViewResult((Option.map(columnIndexOf(layout, columnId), () => __foldkitBrandViewResult((Target.Gap({ maybeBeforeColumnId: Option.some(columnId) })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~29"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Column~3"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#originOf");
+export const isPresent = (layout, subject) => __foldkitBrandViewResult((Option.isSome(originOf(layout, subject))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#isPresent");
+/** 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, subject, target) => __foldkitBrandViewResult((Option.filter(Subject.match(subject, {
+    Pane: ({ paneId }) => __foldkitBrandViewResult((Option.some(Target.match(target, {
+        Into: ({ columnId, index }) => __foldkitBrandViewResult((OutMessage.MovedPane({ paneId, toColumnId: columnId, toIndex: index })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Into"),
+        Gap: ({ maybeBeforeColumnId }) => __foldkitBrandViewResult((OutMessage.PulledOutPane({ paneId, maybeBeforeColumnId })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Gap"),
+    }))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Pane~4"),
+    Column: ({ columnId }) => __foldkitBrandViewResult((Target.match(target, {
+        Into: () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Into~2"),
+        Gap: ({ maybeBeforeColumnId }) => __foldkitBrandViewResult((Option.some(OutMessage.MovedColumn({ columnId, maybeBeforeColumnId }))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Gap~2"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Column~4"),
+}), (request) => __foldkitBrandViewResult((!Equal.equals(apply(layout, request), layout)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~30"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#requestOf");
+/** Where `subject` would be once dropped at `target`, in words. */
+export const landingWords = (layout, subject, target) => __foldkitBrandViewResult((Option.match(requestOf(layout, subject, target), {
+    onNone: () => __foldkitBrandViewResult((WHERE_IT_WAS), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onNone~8"),
+    onSome: (request) => __foldkitBrandViewResult((Option.getOrElse(whereWords(apply(layout, request), subject), () => __foldkitBrandViewResult((WHERE_IT_WAS), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~31"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome~8"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#landingWords");
+/** 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, target) => __foldkitBrandViewResult((Target.match(target, {
+    Into: ({ columnId }) => __foldkitBrandViewResult((Option.some(columnId)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Into~3"),
+    Gap: ({ maybeBeforeColumnId }) => __foldkitBrandViewResult((Option.orElse(maybeBeforeColumnId, () => __foldkitBrandViewResult((Option.map(Array.last(layout), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~33"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~32"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Gap~3"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#columnOfTarget");
+export const Step = Schema.Literals(["Up", "Down", "Left", "Right"]);
+// 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, target) => __foldkitBrandViewResult((Target.match(target, {
+    Into: ({ columnId }) => __foldkitBrandViewResult((Option.map(columnIndexOf(layout, columnId), (column) => __foldkitBrandViewResult((column * 2 + 1), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~34"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Into~4"),
+    Gap: ({ maybeBeforeColumnId }) => __foldkitBrandViewResult((Option.map(gapIndex(layout, maybeBeforeColumnId), (gap) => __foldkitBrandViewResult((gap * 2), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~35"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Gap~4"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#stopOf");
+/** Whether the column `target` names (into it, or the gap before it) is still in `layout`. */
+export const isTargetPresent = (layout, target) => __foldkitBrandViewResult((Option.isSome(stopOf(layout, target))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#isTargetPresent");
+const targetAtStop = (layout, subject, stop, row) => __foldkitBrandViewResult((stop % 2 === 0
+    ? Target.Gap({
+        maybeBeforeColumnId: Option.map(Array.get(layout, stop / 2), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~36")),
+    })
+    : Option.match(Array.get(layout, (stop - 1) / 2), {
+        onNone: () => __foldkitBrandViewResult((Target.Gap({ maybeBeforeColumnId: Option.none() })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onNone~9"),
+        onSome: (column) => __foldkitBrandViewResult((Target.Into({ columnId: column.id, index: Math.min(row, roomIn(column, subject)) })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome~9"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#targetAtStop");
+/** The last index `subject` may take among a column's panes. */
+const roomIn = (column, subject) => __foldkitBrandViewResult((Subject.match(subject, {
+    Pane: ({ paneId }) => __foldkitBrandViewResult((othersIn(column, paneId).length), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Pane~5"),
+    Column: () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Column~5"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#roomIn");
+const stepOnce = (layout, subject, target, step) => {
+    const row = Target.match(target, { Into: ({ index }) => __foldkitBrandViewResult((index), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Into~5"), Gap: () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Gap~5") });
+    const stride = subject._tag === "Column" ? 2 : 1;
+    return __foldkitBrandViewResult((Option.match(stopOf(layout, target), {
+        onNone: () => __foldkitBrandViewResult((target), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onNone~10"),
+        onSome: (stop) => __foldkitBrandViewResult((Match.value(step).pipe(Match.withReturnType(), Match.when("Left", () => __foldkitBrandViewResult((targetAtStop(layout, subject, Math.max(stop - stride, 0), row)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~37")), Match.when("Right", () => __foldkitBrandViewResult((targetAtStop(layout, subject, Math.min(stop + stride, layout.length * 2), row)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~38")), Match.whenOr("Up", "Down", () => __foldkitBrandViewResult((Target.match(target, {
+            Gap: () => __foldkitBrandViewResult((target), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Gap~6"),
+            Into: ({ columnId }) => __foldkitBrandViewResult((Option.match(columnOf(layout, columnId), {
+                onNone: () => __foldkitBrandViewResult((target), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onNone~11"),
+                onSome: (column) => __foldkitBrandViewResult((Target.Into({
+                    columnId,
+                    index: Number.clamp(step === "Up" ? row - 1 : row + 1, {
+                        minimum: 0,
+                        maximum: roomIn(column, subject),
+                    }),
+                })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome~11"),
+            })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Into~6"),
+        })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~39")), Match.exhaustive)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome~10"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#stepOnce");
+};
+/** 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, subject, target, step) => {
+    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, () => __foldkitBrandViewResult((target), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~40"));
+    const isStop = (candidate) => __foldkitBrandViewResult((Option.isSome(requestOf(layout, subject, candidate)) ||
+        Option.exists(origin, (place) => __foldkitBrandViewResult((Equal.equals(place, candidate)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~41"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#isStop");
+    const walk = (from, left) => {
+        const next = stepOnce(layout, subject, from, step);
+        if (Equal.equals(next, from) || left === 0) {
+            return __foldkitBrandViewResult((start), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#walk");
+        }
+        return __foldkitBrandViewResult((isStop(next) ? next : walk(next, left - 1)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#walk");
+    };
+    return __foldkitBrandViewResult((walk(start, layout.length * 2 + Array.length(placesOf(layout)))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#steppedTarget");
+};
+/** 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 gapBefore = (columns, gap) => __foldkitBrandViewResult((Target.Gap({ maybeBeforeColumnId: Option.map(Array.get(columns, gap), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~42")) })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#gapBefore");
+/** 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, columns, clientX, clientY) => __foldkitBrandViewResult((Subject.match(subject, {
+    Column: () => __foldkitBrandViewResult((gapBefore(columns, Array.filter(columns, ({ left, right }) => __foldkitBrandViewResult(((left + right) / 2 < clientX), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~43")).length)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Column~6"),
+    Pane: () => __foldkitBrandViewResult((pipe(Array.findFirstIndex(columns, ({ right }) => __foldkitBrandViewResult((clientX <= right), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~44")), Option.flatMap((index) => __foldkitBrandViewResult((Option.map(Array.get(columns, index), (box) => (__foldkitBrandViewResult(({ index, box }), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~46")))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~45")), Option.match({
+        onNone: () => __foldkitBrandViewResult((gapBefore(columns, columns.length)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onNone~12"),
+        onSome: ({ index, box: { id, left, right, slotMiddles } }) => {
+            const band = Math.min((right - left) * EDGE_SHARE, EDGE_MAX);
+            if (clientX < left + band) {
+                return __foldkitBrandViewResult((gapBefore(columns, index)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome~12");
+            }
+            else if (clientX > right - band) {
+                return __foldkitBrandViewResult((gapBefore(columns, index + 1)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome~12");
+            }
+            else {
+                return __foldkitBrandViewResult((Target.Into({
+                    columnId: id,
+                    index: Array.filter(slotMiddles, (middle) => __foldkitBrandViewResult((middle < clientY), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~47")).length,
+                })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome~12");
+            }
+        },
+    }))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Pane~6"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#targetAtPoint");
+// 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) => __foldkitBrandViewResult((Math.round(value * PRECISION) / PRECISION), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#rounded");
+/** 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, splitter, share) => __foldkitBrandViewResult((Splitter.match(splitter, {
+    Width: ({ columnId }) => __foldkitBrandViewResult((Option.map(columnOf(layout, columnId), (column) => __foldkitBrandViewResult((OutMessage.ResizedColumn({
+        columnId,
+        width: rounded(Number.clamp(column.width + share, { minimum: WIDTH_FLOOR, maximum: 1 })),
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~48"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Width"),
+    Split: ({ abovePaneId }) => __foldkitBrandViewResult((Option.flatMap(placeOf(layout, abovePaneId), ({ column, row, pane: above }) => __foldkitBrandViewResult((Option.map(Array.get(column.panes, row + 1), (below) => {
+        const total = Number.sumAll(Array.map(column.panes, ({ weight }) => __foldkitBrandViewResult((weight), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~51")));
+        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 __foldkitBrandViewResult((OutMessage.ResizedPanes({
+            columnId: column.id,
+            weights: { [above.id]: rounded(nextAbove), [below.id]: rounded(pair - nextAbove) },
+        })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~50");
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~49"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Split"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#resizeOf");
+/** Whether what `splitter` sizes is still in `layout`. */
+export const isSplitterPresent = (layout, splitter) => __foldkitBrandViewResult((Option.isSome(resizeOf(layout, splitter, 0))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#isSplitterPresent");