@gjermundgaraba-designs/pixel-paper 0.18.0 → 0.20.0

package/dist/src/reel/reel.js

@@ -0,0 +1,922 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Array, Effect, Equal, Match, Number, Option, Order, Schema, Stream, String } from "effect";
+import * as Command from "foldkit/command";
+import { defineMessageUnion } from "foldkit/message";
+import * as Mount from "foldkit/mount";
+import * as Render from "foldkit/render";
+import { defineTaggedUnion } from "foldkit/schema";
+import { modifyFields } from "foldkit/struct";
+import { defineView } from "foldkit/submodel";
+import * as Subscription from "foldkit/subscription";
+import * as Announcer from "../announcer/announcer.js";
+import * as Button from "../button/button.js";
+import { LEFT_BUTTON, escapeKeys, markDragging, measureLift, pressingPointer, } from "../drag/drag.js";
+import * as Glyph from "../glyph/glyph.js";
+import * as IconButton from "../iconButton/iconButton.js";
+import { prefixKeys } from "../subscription/prefixKeys.js";
+import { OutMessage, Resize, Splitter, Step, Subject, Target, WHERE_IT_WAS, apply, columnOf, columnOfTarget, fill, firstPlace, isPresent, isSplitterPresent, isTargetPresent, landingWords, nextPreset, originOf, placeAt, placeOf, placeWords, requestOf, resizeOf, steppedTarget, subjectWords, targetAtPoint, whereWords, widthMark, widthWords, } from "./layout.js";
+// MODEL
+/** The words a reel says. `{pane}` is a pane's label, `{subject}` what is held (a pane, or a
+ *  column by its first pane), `{where}` a place and `{column}` a column's number. */
+const COPY = {
+    paneGrip: "Move {pane}",
+    columnGrip: "Move column {column}",
+    gripHelp: "Press space to pick it up. Arrow keys move it, space drops it, escape or tab puts it back.",
+    widthLabel: "Width of column {column}",
+    heightLabel: "Height of {pane}",
+    focused: "{pane}, {where}.",
+    moved: "{subject} moved to {where}.",
+    widened: "Column {column} takes {width}.",
+    pickedUp: "Picked up {subject}.",
+    pickedUpByKeyboard: "Picked up {subject}. Arrow keys move it, space drops it, escape or tab puts it back.",
+    over: "{subject}, {where}.",
+    dropped: "{subject} dropped at {where}.",
+    putBack: "{subject} put back where it was.",
+    cancelled: "Move cancelled. {subject} put back where it was.",
+    gone: "Move cancelled.",
+};
+/** The focused pane, with where it last sat, so focus finds a neighbour when it goes. */
+const Focus = Schema.Struct({ paneId: Schema.String, column: Schema.Number, row: Schema.Number });
+/** How something is held: by a pointer, pressed at (`pressX`, `pressY`) and now at (`x`,
+ *  `y`), carrying it once it has moved past the threshold; or by the keyboard, on its grip. */
+const By = defineTaggedUnion({
+    Pointer: {
+        pointerId: Schema.Number,
+        pressX: Schema.Number,
+        pressY: Schema.Number,
+        x: Schema.Number,
+        y: Schema.Number,
+        isCarrying: Schema.Boolean,
+    },
+    Keyboard: {},
+});
+/** What is held, how, and where it would land: none while a pointer is outside the reel. */
+const Held = Schema.Struct({
+    subject: Subject,
+    by: By,
+    maybeTarget: Schema.Option(Target),
+});
+/** A splitter a pointer drags, pressed at (`pressX`, `pressY`), with the resize it previews. */
+const Resizing = Schema.Struct({
+    splitter: Splitter,
+    pointerId: Schema.Number,
+    pressX: Schema.Number,
+    pressY: Schema.Number,
+    maybeResize: Schema.Option(Resize),
+});
+/** Schema for a reel: its id, the focused pane, what is held and a splitter being dragged. All
+ *  of it is this client's; the layout is the application's. */
+export const Model = Schema.Struct({
+    id: Schema.String,
+    maybeFocus: Schema.Option(Focus),
+    maybeHeld: Schema.Option(Held),
+    maybeResizing: Schema.Option(Resizing),
+});
+// MESSAGE
+const PointerAt = Schema.Struct({
+    clientX: Schema.Number,
+    clientY: Schema.Number,
+    maybeTarget: Schema.Option(Target),
+});
+/** Union of all Messages a reel can produce. */
+export const Message = defineMessageUnion({
+    PressedGrip: {
+        subject: Subject,
+        pointerId: Schema.Number,
+        clientX: Schema.Number,
+        clientY: Schema.Number,
+    },
+    PressedGripKey: { subject: Subject },
+    MovedPointer: PointerAt.fields,
+    ReleasedPointer: PointerAt.fields,
+    CancelledPointer: {},
+    SteppedHeld: { step: Step },
+    DroppedHeld: {},
+    LeftGrip: {},
+    PressedEscape: {},
+    FocusedPane: { paneId: Schema.String },
+    PressedSplitter: {
+        splitter: Splitter,
+        pointerId: Schema.Number,
+        clientX: Schema.Number,
+        clientY: Schema.Number,
+    },
+    MovedSplitter: { share: Schema.Number },
+    ReleasedSplitter: { share: Schema.Number },
+    CancelledSplitter: {},
+    PressedSplitterKey: { splitter: Splitter, share: Schema.Number },
+    CompletedAnnounceReel: {},
+    CompletedFocusPane: {},
+    CompletedRestoreFocus: {},
+    CompletedFocusGrip: {},
+    CompletedScrollIntoView: {},
+    CompletedSizeLiftedPane: {},
+});
+/** Creates a reel focused on its first pane, holding nothing, at rest. */
+export const init = (config) => (__foldkitBrandViewResult(({
+    id: config.id,
+    maybeFocus: Option.none(),
+    maybeHeld: Option.none(),
+    maybeResizing: Option.none(),
+}), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#init"));
+// ACCESSORS
+const focusedPlace = (model, layout) => __foldkitBrandViewResult((Option.orElse(Option.flatMap(model.maybeFocus, (focus) => __foldkitBrandViewResult((Option.orElse(placeOf(layout, focus.paneId), () => {
+    const column = Number.clamp(focus.column, { minimum: 0, maximum: layout.length - 1 });
+    const rows = Option.match(Array.get(layout, column), {
+        onNone: () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone"),
+        onSome: (found) => __foldkitBrandViewResult((found.panes.length), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome"),
+    });
+    return __foldkitBrandViewResult((placeAt(layout, column, Number.clamp(focus.row, { minimum: 0, maximum: rows - 1 }))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~2");
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous")), () => __foldkitBrandViewResult((firstPlace(layout)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~3"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#focusedPlace");
+/** The pane focus is on: the one last focused, or, when it has gone from `layout`, the pane
+ *  now nearest its place; the first pane before any is focused. None for an empty layout. */
+export const focusedPaneId = (model, layout) => __foldkitBrandViewResult((Option.map(focusedPlace(model, layout), ({ pane }) => __foldkitBrandViewResult((pane.id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~4"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#focusedPaneId");
+const isHolding = (model) => __foldkitBrandViewResult((Option.isSome(model.maybeHeld)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#isHolding");
+/** Whether `held` is carried: by the keyboard, or by a pointer past the threshold. */
+const isCarried = (held) => __foldkitBrandViewResult((By.match(held.by, { Pointer: ({ isCarrying }) => __foldkitBrandViewResult((isCarrying), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Pointer"), Keyboard: () => __foldkitBrandViewResult((true), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Keyboard") })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#isCarried");
+// DOM HOOKS
+const paneHook = (model, paneId) => __foldkitBrandViewResult((`${model.id}/pane/${paneId}`), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#paneHook");
+const columnHook = (model, columnId) => __foldkitBrandViewResult((`${model.id}/column/${columnId}`), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#columnHook");
+const subjectHook = (model, subject) => __foldkitBrandViewResult((Subject.match(subject, {
+    Pane: ({ paneId }) => __foldkitBrandViewResult((paneHook(model, paneId)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Pane"),
+    Column: ({ columnId }) => __foldkitBrandViewResult((columnHook(model, columnId)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Column"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#subjectHook");
+const scrollerOf = (reelHook) => __foldkitBrandViewResult((Option.fromNullishOr(document.querySelector(`[data-reel="${CSS.escape(reelHook)}"] > .reel-view`))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#scrollerOf");
+const paneElement = (hook) => __foldkitBrandViewResult((Option.fromNullishOr(document.querySelector(`[data-reel-pane="${CSS.escape(hook)}"]`))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#paneElement");
+/** Puts the keyboard in `pane`: on its control marked `data-reel-focus` (a terminal's input),
+ *  or on the pane itself, without scrolling the page. */
+const focusInto = (pane) => {
+    Option.getOrElse(Option.fromNullishOr(pane.querySelector("[data-reel-focus]")), () => __foldkitBrandViewResult((pane), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~5")).focus({ preventScroll: true });
+};
+// COMMAND
+/** Says a focus move, a move or a step of a drag through the page's live region (as
+ *  `Announcer.Announce` does). */
+export const AnnounceReel = Command.define("AnnounceReel", {
+    args: { text: Schema.String },
+    messages: [Message.CompletedAnnounceReel],
+    execute: ({ text }) => __foldkitBrandViewResult((Announcer.announce(text).pipe(Effect.as(Message.CompletedAnnounceReel()))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#execute"),
+});
+/** Focuses the pane `paneHook` names, unless focus is already inside it: the control in it
+ *  marked `data-reel-focus` (a terminal's input), or the pane itself. It does not scroll;
+ *  ScrollIntoView does. */
+export const FocusPane = Command.define("FocusPane", {
+    args: { paneHook: Schema.String },
+    messages: [Message.CompletedFocusPane],
+    execute: ({ paneHook: hook }) => __foldkitBrandViewResult((Effect.gen(function* () {
+        yield* Render.afterCommit;
+        yield* Effect.sync(() => {
+            Option.map(Option.filter(paneElement(hook), (pane) => __foldkitBrandViewResult((!pane.contains(document.activeElement)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~8")), focusInto);
+        });
+        return __foldkitBrandViewResult((Message.CompletedFocusPane()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~6");
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#execute~2"),
+});
+/** Focuses the pane `paneHook` names only where focus was lost (it left with the pane that
+ *  held it), so focus the reader put somewhere else stays there. */
+export const RestoreFocus = Command.define("RestoreFocus", {
+    args: { paneHook: Schema.String },
+    messages: [Message.CompletedRestoreFocus],
+    execute: ({ paneHook: hook }) => __foldkitBrandViewResult((Effect.gen(function* () {
+        yield* Render.afterCommit;
+        yield* Effect.sync(() => {
+            const active = document.activeElement;
+            if (active === null || active === document.body) {
+                Option.map(paneElement(hook), focusInto);
+            }
+        });
+        return __foldkitBrandViewResult((Message.CompletedRestoreFocus()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~9");
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#execute~3"),
+});
+/** Puts focus back on a column's grip once the render that moved its column is in the page:
+ *  a column's element moves with it, which takes focus off its grip. */
+export const FocusGrip = Command.define("FocusGrip", {
+    args: { gripHook: Schema.String },
+    messages: [Message.CompletedFocusGrip],
+    execute: ({ gripHook }) => __foldkitBrandViewResult((Effect.gen(function* () {
+        yield* Render.afterCommit;
+        yield* Effect.sync(() => {
+            document
+                .querySelector(`[data-reel-grip="${CSS.escape(gripHook)}"]`)
+                ?.focus({ preventScroll: true });
+        });
+        return __foldkitBrandViewResult((Message.CompletedFocusGrip()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~11");
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#execute~4"),
+});
+/** Scrolls the pane or column `hook` names into view, by the least distance either way, its
+ *  gutter kept by the stylesheet's `scroll-margin`, once the render that placed it is in the
+ *  page. It jumps: motion is stepped or instant, and a follow is instant. */
+export const ScrollIntoView = Command.define("ScrollIntoView", {
+    args: { hook: Schema.String },
+    messages: [Message.CompletedScrollIntoView],
+    execute: ({ hook }) => __foldkitBrandViewResult((Effect.gen(function* () {
+        yield* Render.afterCommit;
+        yield* Effect.sync(() => {
+            document
+                .querySelector(`[data-reel-pane="${CSS.escape(hook)}"], [data-reel-hook="${CSS.escape(hook)}"]`)
+                ?.scrollIntoView({ block: "nearest", inline: "nearest" });
+        });
+        return __foldkitBrandViewResult((Message.CompletedScrollIntoView()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~13");
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#execute~5"),
+});
+/** How far a pointer moves from its press before it carries what it pressed. */
+const CARRY_THRESHOLD = 5;
+const withHeld = (model, maybeHeld) => __foldkitBrandViewResult((modifyFields(model, { maybeHeld: () => __foldkitBrandViewResult((maybeHeld), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#maybeHeld") })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#withHeld");
+const withResizing = (model, maybeResizing) => __foldkitBrandViewResult((modifyFields(model, { maybeResizing: () => __foldkitBrandViewResult((maybeResizing), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#maybeResizing") })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#withResizing");
+const focusOn = (model, place) => __foldkitBrandViewResult((modifyFields(model, {
+    maybeFocus: () => __foldkitBrandViewResult((Option.some({ paneId: place.pane.id, column: place.columnIndex, row: place.row })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#maybeFocus"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#focusOn");
+const announce = (text) => __foldkitBrandViewResult((AnnounceReel({ text })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#announce");
+const heldWords = (layout, held) => __foldkitBrandViewResult((String.capitalize(Option.getOrElse(subjectWords(layout, held.subject), () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~15")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#heldWords");
+const scrollToTarget = (model, layout, target) => __foldkitBrandViewResult((Array.fromOption(Option.map(columnOfTarget(layout, target), (columnId) => __foldkitBrandViewResult((ScrollIntoView({ hook: columnHook(model, columnId) })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~16")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#scrollToTarget");
+/** Lets go of what is held: dropped at its target when it is carried and the drop changes
+ *  something (reported as the request), put back otherwise, said in `putBack`'s words. A
+ *  column dropped by the keyboard gets its grip's focus back. */
+const letGo = (model, layout, held, putBack) => {
+    const released = withHeld(model, Option.none());
+    if (!isCarried(held)) {
+        return __foldkitBrandViewResult(({ model: released }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#letGo");
+    }
+    const subject = heldWords(layout, held);
+    const maybeRequest = Option.flatMap(held.maybeTarget, (target) => __foldkitBrandViewResult((requestOf(layout, held.subject, target)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~17"));
+    // a column that moves takes focus off its grip; one put back never left its place
+    const refocus = held.subject._tag === "Column" && held.by._tag === "Keyboard"
+        ? [FocusGrip({ gripHook: subjectHook(model, held.subject) })]
+        : [];
+    return __foldkitBrandViewResult((Option.match(maybeRequest, {
+        onNone: () => (__foldkitBrandViewResult(({
+            model: released,
+            commands: [announce(fill(putBack, { subject }))],
+        }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~2")),
+        onSome: (request) => (__foldkitBrandViewResult(({
+            model: released,
+            commands: [
+                ...refocus,
+                announce(fill(COPY.dropped, {
+                    subject,
+                    where: Option.getOrElse(whereWords(apply(layout, request), held.subject), () => __foldkitBrandViewResult((WHERE_IT_WAS), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~18")),
+                })),
+            ],
+            outMessage: request,
+        }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~2")),
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#letGo");
+};
+const cancel = (model, layout, held) => __foldkitBrandViewResult((letGo(model, layout, { ...held, maybeTarget: Option.none() }, COPY.cancelled)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#cancel");
+const lift = (model, layout, subject, by) => __foldkitBrandViewResult((Option.match(Option.filter(originOf(layout, subject), () => __foldkitBrandViewResult((!isHolding(model) && Option.isNone(model.maybeResizing)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~19")), {
+    onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~3")),
+    onSome: (origin) => {
+        const held = { subject, by, maybeTarget: Option.some(origin) };
+        return __foldkitBrandViewResult(({
+            model: withHeld(model, Option.some(held)),
+            commands: by._tag === "Keyboard"
+                ? [announce(fill(COPY.pickedUpByKeyboard, { subject: heldWords(layout, held) }))]
+                : [],
+        }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~3");
+    },
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#lift");
+const movePointer = (model, layout, held, pointer) => __foldkitBrandViewResult((By.match(held.by, {
+    Keyboard: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Keyboard~2")),
+    Pointer: (by) => {
+        const isCarrying = by.isCarrying ||
+            Math.hypot(pointer.clientX - by.pressX, pointer.clientY - by.pressY) > CARRY_THRESHOLD;
+        const next = {
+            ...held,
+            by: By.Pointer({ ...by, x: pointer.clientX, y: pointer.clientY, isCarrying }),
+            maybeTarget: isCarrying ? pointer.maybeTarget : held.maybeTarget,
+        };
+        return __foldkitBrandViewResult(({
+            model: withHeld(model, Option.some(next)),
+            commands: isCarrying && !by.isCarrying
+                ? [announce(fill(COPY.pickedUp, { subject: heldWords(layout, held) }))]
+                : [],
+        }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Pointer~2");
+    },
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#movePointer");
+/** A keyboard step of what is held, resolved from the layout, with the reel scrolled to the
+ *  column it lands by. */
+const stepHeld = (model, layout, held, step) => __foldkitBrandViewResult((Option.match(Option.filter(held.maybeTarget, () => __foldkitBrandViewResult((held.by._tag === "Keyboard"), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~20")), {
+    onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~4")),
+    onSome: (target) => {
+        const next = steppedTarget(layout, held.subject, target, step);
+        if (Equal.equals(next, target)) {
+            return __foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~4");
+        }
+        return __foldkitBrandViewResult(({
+            model: withHeld(model, Option.some({ ...held, maybeTarget: Option.some(next) })),
+            commands: [
+                announce(fill(COPY.over, {
+                    subject: heldWords(layout, held),
+                    where: landingWords(layout, held.subject, next),
+                })),
+                ...scrollToTarget(model, layout, next),
+            ],
+        }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~4");
+    },
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#stepHeld");
+const whileHeld = (model, f) => __foldkitBrandViewResult((Option.match(model.maybeHeld, { onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~5")), onSome: f })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#whileHeld");
+const whileHeldBy = (model, by, f) => __foldkitBrandViewResult((whileHeld(model, (held) => (__foldkitBrandViewResult((held.by._tag === by ? f(held) : { model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~21")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#whileHeldBy");
+/** The resize a splitter dragged `share` of its scale asks for: previewed while it moves, and
+ *  asked for when it is let go. */
+const resizeSplitter = (model, layout, share, isLetGo) => __foldkitBrandViewResult((Option.match(model.maybeResizing, {
+    onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~6")),
+    onSome: (resizing) => {
+        const maybeResize = resizeOf(layout, resizing.splitter, share);
+        if (!isLetGo) {
+            return __foldkitBrandViewResult(({ model: withResizing(model, Option.some({ ...resizing, maybeResize })) }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~5");
+        }
+        return __foldkitBrandViewResult((Option.match(maybeResize, {
+            onNone: () => (__foldkitBrandViewResult(({ model: withResizing(model, Option.none()) }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~7")),
+            onSome: (resize) => (__foldkitBrandViewResult(({ model: withResizing(model, Option.none()), outMessage: resize }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~6")),
+        })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~5");
+    },
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#resizeSplitter");
+/** Processes a reel Message against the layout as the application holds it now, and returns
+ *  the next Model, Commands and OutMessage. */
+export const update = (model, message, context) => {
+    const { layout } = context;
+    return __foldkitBrandViewResult((Message.match(message, {
+        PressedGrip: ({ subject, pointerId, clientX, clientY }) => __foldkitBrandViewResult((lift(model, layout, subject, By.Pointer({
+            pointerId,
+            pressX: clientX,
+            pressY: clientY,
+            x: clientX,
+            y: clientY,
+            isCarrying: false,
+        }))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#PressedGrip"),
+        PressedGripKey: ({ subject }) => __foldkitBrandViewResult((lift(model, layout, subject, By.Keyboard())), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#PressedGripKey"),
+        MovedPointer: (pointer) => __foldkitBrandViewResult((whileHeldBy(model, "Pointer", (held) => __foldkitBrandViewResult((movePointer(model, layout, held, pointer)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~22"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#MovedPointer"),
+        ReleasedPointer: (pointer) => __foldkitBrandViewResult((whileHeldBy(model, "Pointer", (held) => __foldkitBrandViewResult((letGo(model, layout, isCarried(held) ? { ...held, maybeTarget: pointer.maybeTarget } : held, COPY.putBack)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~23"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#ReleasedPointer"),
+        CancelledPointer: () => __foldkitBrandViewResult((whileHeldBy(model, "Pointer", (held) => __foldkitBrandViewResult((letGo(model, layout, { ...held, maybeTarget: Option.none() }, COPY.putBack)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~24"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#CancelledPointer"),
+        SteppedHeld: ({ step }) => __foldkitBrandViewResult((whileHeldBy(model, "Keyboard", (held) => __foldkitBrandViewResult((stepHeld(model, layout, held, step)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~25"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#SteppedHeld"),
+        DroppedHeld: () => __foldkitBrandViewResult((whileHeldBy(model, "Keyboard", (held) => __foldkitBrandViewResult((letGo(model, layout, held, COPY.putBack)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~26"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#DroppedHeld"),
+        LeftGrip: () => __foldkitBrandViewResult((whileHeldBy(model, "Keyboard", (held) => __foldkitBrandViewResult((cancel(model, layout, held)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~27"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#LeftGrip"),
+        PressedEscape: () => __foldkitBrandViewResult((Option.isSome(model.maybeResizing)
+            ? { model: withResizing(model, Option.none()) }
+            : whileHeld(model, (held) => __foldkitBrandViewResult((cancel(model, layout, held)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~28"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#PressedEscape"),
+        FocusedPane: ({ paneId }) => __foldkitBrandViewResult((Option.match(Option.filter(placeOf(layout, paneId), () => __foldkitBrandViewResult((!Option.exists(model.maybeFocus, (focus) => __foldkitBrandViewResult((focus.paneId === paneId), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~30"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~29")), {
+            onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~8")),
+            onSome: (place) => (__foldkitBrandViewResult(({ model: focusOn(model, place) }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~7")),
+        })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#FocusedPane"),
+        PressedSplitter: ({ splitter, pointerId, clientX, clientY }) => __foldkitBrandViewResult((isHolding(model) || Option.isSome(model.maybeResizing) || !isSplitterPresent(layout, splitter)
+            ? { model }
+            : {
+                model: withResizing(model, Option.some({
+                    splitter,
+                    pointerId,
+                    pressX: clientX,
+                    pressY: clientY,
+                    maybeResize: Option.none(),
+                })),
+            }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#PressedSplitter"),
+        MovedSplitter: ({ share }) => __foldkitBrandViewResult((resizeSplitter(model, layout, share, false)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#MovedSplitter"),
+        ReleasedSplitter: ({ share }) => __foldkitBrandViewResult((resizeSplitter(model, layout, share, true)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#ReleasedSplitter"),
+        CancelledSplitter: () => (__foldkitBrandViewResult(({ model: withResizing(model, Option.none()) }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#CancelledSplitter")),
+        PressedSplitterKey: ({ splitter, share }) => __foldkitBrandViewResult((Option.match(resizeOf(layout, splitter, share), {
+            onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~9")),
+            onSome: (resize) => (__foldkitBrandViewResult(({ model, outMessage: resize }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~8")),
+        })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#PressedSplitterKey"),
+        CompletedAnnounceReel: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#CompletedAnnounceReel")),
+        CompletedFocusPane: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#CompletedFocusPane")),
+        CompletedRestoreFocus: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#CompletedRestoreFocus")),
+        CompletedFocusGrip: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#CompletedFocusGrip")),
+        CompletedScrollIntoView: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#CompletedScrollIntoView")),
+        CompletedSizeLiftedPane: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#CompletedSizeLiftedPane")),
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#update");
+};
+// CAPABILITIES
+/**
+ * Brings the reel in line with a layout that changed: call it whenever the application changes
+ * the layout, by a request it applied, another client's or one of its own (a pane closed). The
+ * focused pane's place is read again; when it has gone, focus moves to the pane now nearest
+ * where it was, and the keyboard follows where it went with the pane. A drag whose pane or
+ * column has gone is cancelled, and one whose target's column has gone aims where it started;
+ * a splitter whose column or pane has gone lets go.
+ */
+export const reconcile = (model, context) => {
+    const { layout } = context;
+    const isFocusGone = Option.exists(model.maybeFocus, (focus) => __foldkitBrandViewResult((Option.isNone(placeOf(layout, focus.paneId))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~31"));
+    const maybePlace = Option.filter(focusedPlace(model, layout), () => __foldkitBrandViewResult((Option.isSome(model.maybeFocus)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~32"));
+    const focused = Option.match(maybePlace, {
+        onNone: () => __foldkitBrandViewResult((model), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~10"),
+        onSome: (place) => __foldkitBrandViewResult((focusOn(model, place)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~9"),
+    });
+    const restore = Array.fromOption(Option.map(Option.filter(maybePlace, () => __foldkitBrandViewResult((isFocusGone), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~33")), (place) => __foldkitBrandViewResult((RestoreFocus({ paneHook: paneHook(model, place.pane.id) })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~34")));
+    const settled = Option.exists(model.maybeResizing, ({ splitter }) => __foldkitBrandViewResult((isSplitterPresent(layout, splitter)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~35"))
+        ? focused
+        : withResizing(focused, Option.none());
+    return __foldkitBrandViewResult((Option.match(settled.maybeHeld, {
+        onNone: () => (__foldkitBrandViewResult(({ model: settled, commands: restore }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~11")),
+        onSome: (held) => {
+            if (!isPresent(layout, held.subject)) {
+                return __foldkitBrandViewResult(({
+                    model: withHeld(settled, Option.none()),
+                    commands: [...restore, announce(COPY.gone)],
+                }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~10");
+            }
+            const maybeTarget = Option.orElse(Option.filter(held.maybeTarget, (target) => __foldkitBrandViewResult((isTargetPresent(layout, target)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~36")), () => (__foldkitBrandViewResult((held.by._tag === "Keyboard" ? originOf(layout, held.subject) : Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~37")));
+            return __foldkitBrandViewResult(({
+                model: withHeld(settled, Option.some({ ...held, maybeTarget })),
+                commands: restore,
+            }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~10");
+        },
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#reconcile");
+};
+/** What the application's keys ask of the reel. `Focus*`: focus the pane beside the focused
+ *  one. `MovePane*`: move the focused pane up or down its column, or into the column beside it
+ *  (past the first or last column, into a column of its own). `MoveColumn*`: move its column.
+ *  `CycleWidth`: its column's width to the next preset. `PullOut`: the pane into a column of
+ *  its own, right of its column. */
+export const Action = Schema.Literals([
+    "FocusLeft",
+    "FocusRight",
+    "FocusUp",
+    "FocusDown",
+    "MovePaneLeft",
+    "MovePaneRight",
+    "MovePaneUp",
+    "MovePaneDown",
+    "MoveColumnLeft",
+    "MoveColumnRight",
+    "CycleWidth",
+    "PullOut",
+]);
+const focusStep = (model, layout, place) => (__foldkitBrandViewResult(({
+    model: focusOn(model, place),
+    commands: [
+        FocusPane({ paneHook: paneHook(model, place.pane.id) }),
+        ScrollIntoView({ hook: paneHook(model, place.pane.id) }),
+        announce(fill(COPY.focused, { pane: place.pane.label, where: placeWords(layout, place) })),
+    ],
+}), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#focusStep"));
+/** Asks for `request` with focus kept on the pane it moves, at its new place, the reel
+ *  scrolled to it and the move said; nothing where it would change nothing. */
+const requestStep = (model, layout, place, subject, maybeRequest) => __foldkitBrandViewResult((Option.match(Option.filter(maybeRequest, (request) => __foldkitBrandViewResult((!Equal.equals(apply(layout, request), layout)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~38")), {
+    onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~12")),
+    onSome: (request) => {
+        const next = apply(layout, request);
+        const landing = Option.getOrElse(placeOf(next, place.pane.id), () => __foldkitBrandViewResult((place), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~39"));
+        const words = Option.getOrElse(subjectWords(layout, subject), () => __foldkitBrandViewResult((place.pane.label), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~40"));
+        const where = Option.getOrElse(whereWords(next, subject), () => __foldkitBrandViewResult((WHERE_IT_WAS), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~41"));
+        return __foldkitBrandViewResult(({
+            model: focusOn(model, landing),
+            commands: [
+                ScrollIntoView({ hook: paneHook(model, place.pane.id) }),
+                announce(fill(COPY.moved, { subject: String.capitalize(words), where })),
+            ],
+            outMessage: request,
+        }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~11");
+    },
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#requestStep");
+const columnIdAt = (layout, index) => __foldkitBrandViewResult((Option.map(Array.get(layout, index), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~42"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#columnIdAt");
+/**
+ * Does what the application's key for `action` asks, from the focused pane, against the
+ * layout as the application holds it: focus moves focus the pane and scroll the reel to it;
+ * moves report their request as the OutMessage, which the application applies, with focus
+ * kept on the pane. Each is said through the live region. Nothing happens while something is
+ * held, or where there is nowhere to go.
+ */
+export const perform = (model, action, context) => {
+    const { layout } = context;
+    return __foldkitBrandViewResult((Option.match(Option.filter(focusedPlace(model, layout), () => __foldkitBrandViewResult((!isHolding(model)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~43")), {
+        onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~13")),
+        onSome: (place) => {
+            const { column, columnIndex, row, pane } = place;
+            const rows = column.panes.length;
+            const paneId = pane.id;
+            const ask = (maybeRequest, subject = Subject.Pane({ paneId })) => __foldkitBrandViewResult((requestStep(model, layout, place, subject, maybeRequest)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#ask");
+            const focusAt = (toColumn, toRow) => __foldkitBrandViewResult((Option.match(Option.flatMap(Array.get(layout, toColumn), (found) => __foldkitBrandViewResult((placeAt(layout, toColumn, Number.clamp(toRow, { minimum: 0, maximum: found.panes.length - 1 }))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~44")), {
+                onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~14")),
+                onSome: (next) => __foldkitBrandViewResult((next.pane.id === paneId ? { model } : focusStep(model, layout, next)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~13"),
+            })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#focusAt");
+            const sideways = (toColumn, edge) => __foldkitBrandViewResult((ask(Option.match(Array.get(layout, toColumn), {
+                onSome: (found) => __foldkitBrandViewResult((Option.some(OutMessage.MovedPane({
+                    paneId,
+                    toColumnId: found.id,
+                    toIndex: Math.min(row, found.panes.length),
+                }))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~14"),
+                onNone: () => __foldkitBrandViewResult((Option.liftPredicate(OutMessage.PulledOutPane({ paneId, maybeBeforeColumnId: edge }), () => __foldkitBrandViewResult((rows > 1), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~45"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~15"),
+            }))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#sideways");
+            const moveColumn = (maybeBefore) => __foldkitBrandViewResult((ask(Option.map(maybeBefore, (maybeBeforeColumnId) => __foldkitBrandViewResult((OutMessage.MovedColumn({ columnId: column.id, maybeBeforeColumnId })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~46")), Subject.Column({ columnId: column.id }))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#moveColumn");
+            return __foldkitBrandViewResult((Match.value(action).pipe(Match.withReturnType(), Match.when("FocusLeft", () => __foldkitBrandViewResult((focusAt(columnIndex - 1, row)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~47")), Match.when("FocusRight", () => __foldkitBrandViewResult((focusAt(columnIndex + 1, row)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~48")), Match.when("FocusUp", () => (__foldkitBrandViewResult((row > 0 ? focusAt(columnIndex, row - 1) : { model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~49"))), Match.when("FocusDown", () => __foldkitBrandViewResult((focusAt(columnIndex, row + 1)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~50")), Match.when("MovePaneUp", () => __foldkitBrandViewResult((ask(Option.some(OutMessage.MovedPane({ paneId, toColumnId: column.id, toIndex: row - 1 })))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~51")), Match.when("MovePaneDown", () => __foldkitBrandViewResult((ask(Option.some(OutMessage.MovedPane({ paneId, toColumnId: column.id, toIndex: row + 1 })))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~52")), Match.when("MovePaneLeft", () => __foldkitBrandViewResult((sideways(columnIndex - 1, columnIdAt(layout, 0))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~53")), Match.when("MovePaneRight", () => __foldkitBrandViewResult((sideways(columnIndex + 1, Option.none())), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~54")), Match.when("MoveColumnLeft", () => __foldkitBrandViewResult((moveColumn(Option.map(columnIdAt(layout, columnIndex - 1), (before) => __foldkitBrandViewResult((Option.some(before)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~56")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~55")), Match.when("MoveColumnRight", () => __foldkitBrandViewResult((moveColumn(Option.map(columnIdAt(layout, columnIndex + 1), () => __foldkitBrandViewResult((columnIdAt(layout, columnIndex + 2)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~58")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~57")), Match.when("CycleWidth", () => {
+                const width = nextPreset(column.width);
+                return __foldkitBrandViewResult(({
+                    model,
+                    commands: [
+                        ScrollIntoView({ hook: paneHook(model, paneId) }),
+                        announce(fill(COPY.widened, { column: columnIndex + 1, width: widthWords(width) })),
+                    ],
+                    outMessage: OutMessage.ResizedColumn({ columnId: column.id, width }),
+                }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~59");
+            }), Match.when("PullOut", () => __foldkitBrandViewResult((ask(Option.liftPredicate(OutMessage.PulledOutPane({
+                paneId,
+                maybeBeforeColumnId: columnIdAt(layout, columnIndex + 1),
+            }), () => __foldkitBrandViewResult((rows > 1), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~61")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~60")), Match.exhaustive)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~12");
+        },
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#perform");
+};
+// SUBSCRIPTION
+/** How near the reel's edges a carried pane scrolls it, how fast, and the longest frame it
+ *  counts, so a tab coming back from the background does not jump. */
+const EDGE_SCROLL = 40;
+const EDGE_SCROLL_PIXELS_PER_MILLI = 0.8;
+const LONGEST_FRAME_MILLIS = 50;
+/** A column as the pointer reads it from the page: its edges, and the middles of its slots
+ *  but the held pane's. */
+const columnBoxOf = (element, subject) => {
+    const rect = element.getBoundingClientRect();
+    const heldId = Subject.match(subject, {
+        Pane: ({ paneId }) => __foldkitBrandViewResult((Option.some(paneId)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Pane~2"),
+        Column: () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Column~2"),
+    });
+    return __foldkitBrandViewResult(({
+        id: element.getAttribute("data-reel-column") ?? "",
+        left: rect.left,
+        right: rect.right,
+        slotMiddles: Array.map(Array.filter(Array.fromIterable(element.querySelectorAll("[data-reel-slot]")), (slot) => __foldkitBrandViewResult((!Option.contains(heldId, slot.getAttribute("data-reel-slot") ?? "")), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~62")), (slot) => {
+            const slotRect = slot.getBoundingClientRect();
+            return __foldkitBrandViewResult((slotRect.top + slotRect.height / 2), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~63");
+        }),
+    }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#columnBoxOf");
+};
+/** Where a pointer at (`clientX`, `clientY`) would drop `subject` in the reel `reelHook`
+ *  names, read from where its columns and their slots sit: none outside the reel. */
+const pointerTarget = (reelHook, subject, clientX, clientY) => __foldkitBrandViewResult((Option.map(Option.filter(scrollerOf(reelHook), (view) => {
+    const rect = view.getBoundingClientRect();
+    return (__foldkitBrandViewResult((clientX >= rect.left &&
+        clientX <= rect.right &&
+        clientY >= rect.top &&
+        clientY <= rect.bottom), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~64"));
+}), (view) => __foldkitBrandViewResult((targetAtPoint(subject, Array.map(Array.fromIterable(view.querySelectorAll("[data-reel-column]")), (element) => __foldkitBrandViewResult((columnBoxOf(element, subject)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~66")), clientX, clientY)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~65"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#pointerTarget");
+const PointerHold = Schema.Struct({
+    reelHook: Schema.String,
+    subject: Subject,
+    pointerId: Schema.Number,
+});
+const pointerAt = (hold, event) => (__foldkitBrandViewResult(({
+    clientX: event.clientX,
+    clientY: event.clientY,
+    maybeTarget: pointerTarget(hold.reelHook, hold.subject, event.clientX, event.clientY),
+}), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#pointerAt"));
+/** The pressing pointer's moves, release and cancel; another pointer's are not the reel's. */
+const pointerMessages = (hold) => __foldkitBrandViewResult((Stream.map(pressingPointer(hold.pointerId), (event) => __foldkitBrandViewResult((Match.value(event.type).pipe(Match.when("pointermove", () => __foldkitBrandViewResult((Message.MovedPointer(pointerAt(hold, event))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~68")), Match.when("pointerup", () => __foldkitBrandViewResult((Message.ReleasedPointer(pointerAt(hold, event))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~69")), Match.orElse(() => __foldkitBrandViewResult((Message.CancelledPointer()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~70")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~67"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#pointerMessages");
+/** Which way a pointer at `at` scrolls a box from `low` to `high`: towards the edge it is near. */
+const towards = (at, low, high) => {
+    if (at < low + EDGE_SCROLL) {
+        return __foldkitBrandViewResult((-1), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#towards");
+    }
+    else if (at > high - EDGE_SCROLL) {
+        return __foldkitBrandViewResult((1), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#towards");
+    }
+    else {
+        return __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#towards");
+    }
+};
+/** While a pointer carries a pane or a column near the reel's edges, the reel scrolls that way,
+ *  by the time each frame took, so a drop can reach a column or a place out of view. */
+const edgeScroll = (hold) => __foldkitBrandViewResult((Stream.callback(() => __foldkitBrandViewResult((Effect.acquireRelease(Effect.sync(() => {
+    const state = {
+        maybeAt: Option.none(),
+        frame: 0,
+        last: performance.now(),
+    };
+    const onMove = (event) => {
+        if (event.pointerId === hold.pointerId) {
+            state.maybeAt = Option.some({ x: event.clientX, y: event.clientY });
+        }
+    };
+    const step = (now) => {
+        const distance = Math.min(now - state.last, LONGEST_FRAME_MILLIS) * EDGE_SCROLL_PIXELS_PER_MILLI;
+        state.last = now;
+        Option.map(Option.all({ view: scrollerOf(hold.reelHook), at: state.maybeAt }), ({ view, at }) => {
+            const rect = view.getBoundingClientRect();
+            view.scrollLeft += towards(at.x, rect.left, rect.right) * distance;
+            view.scrollTop += towards(at.y, rect.top, rect.bottom) * distance;
+        });
+        state.frame = requestAnimationFrame(step);
+    };
+    document.addEventListener("pointermove", onMove);
+    state.frame = requestAnimationFrame(step);
+    return __foldkitBrandViewResult(({ state, onMove }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~72");
+}), ({ state, onMove }) => __foldkitBrandViewResult((Effect.sync(() => {
+    cancelAnimationFrame(state.frame);
+    document.removeEventListener("pointermove", onMove);
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~74")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~76")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~71"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#edgeScroll");
+const SplitterHold = Schema.Struct({
+    reelHook: Schema.String,
+    splitter: Splitter,
+    pointerId: Schema.Number,
+    pressX: Schema.Number,
+    pressY: Schema.Number,
+});
+const heightOf = (element) => __foldkitBrandViewResult((element.getBoundingClientRect().height), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#heightOf");
+/** The pixels a splitter's share is counted in, read when its drag begins: the reel's width
+ *  less a gutter for a width (a column is `width × (view − gutter) − gutter` wide), its
+ *  column's panes' height for a pane splitter. */
+const scaleOf = (hold) => __foldkitBrandViewResult((Option.getOrElse(Option.map(scrollerOf(hold.reelHook), (view) => __foldkitBrandViewResult((Splitter.match(hold.splitter, {
+    Width: () => __foldkitBrandViewResult((view.clientWidth -
+        Option.getOrElse(Option.map(Option.fromNullishOr(view.querySelector(".reel-gap")), (gap) => __foldkitBrandViewResult((gap.getBoundingClientRect().width), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~78")), () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~79"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Width"),
+    Split: ({ abovePaneId }) => __foldkitBrandViewResult((Number.sumAll(Array.map(Array.fromIterable(view
+        .querySelector(`[data-reel-slot="${CSS.escape(abovePaneId)}"]`)
+        ?.closest(".reel-column")
+        ?.querySelectorAll("[data-reel-slot]") ?? []), heightOf))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Split"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~77")), () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~80"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#scaleOf");
+/** The dragging pointer's moves, release and cancel, as shares of the splitter's scale. */
+const splitterMessages = (hold) => __foldkitBrandViewResult((Stream.suspend(() => {
+    const scale = scaleOf(hold);
+    const shareOf = (event) => {
+        const moved = hold.splitter._tag === "Width" ? event.clientX - hold.pressX : event.clientY - hold.pressY;
+        return __foldkitBrandViewResult((scale > 0 ? moved / scale : 0), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#shareOf");
+    };
+    return __foldkitBrandViewResult((Stream.map(pressingPointer(hold.pointerId), (event) => __foldkitBrandViewResult((Match.value(event.type).pipe(Match.when("pointermove", () => __foldkitBrandViewResult((Message.MovedSplitter({ share: shareOf(event) })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~83")), Match.when("pointerup", () => __foldkitBrandViewResult((Message.ReleasedSplitter({ share: shareOf(event) })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~84")), Match.orElse(() => __foldkitBrandViewResult((Message.CancelledSplitter()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~85")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~82"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~81");
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#splitterMessages");
+const pointerHoldOf = (model, isCarryingOnly) => __foldkitBrandViewResult((Option.flatMap(model.maybeHeld, ({ subject, by }) => __foldkitBrandViewResult((By.match(by, {
+    Keyboard: () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Keyboard~3"),
+    Pointer: ({ pointerId, isCarrying }) => __foldkitBrandViewResult((isCarryingOnly && !isCarrying
+        ? Option.none()
+        : Option.some({ reelHook: model.id, subject, pointerId })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Pointer~3"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~86"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#pointerHoldOf");
+const reelSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResult(({
+    pointer: entry({ maybeHold: Schema.Option(PointerHold) }, {
+        modelToDependencies: (model) => (__foldkitBrandViewResult(({ maybeHold: pointerHoldOf(model, false) }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#modelToDependencies")),
+        dependenciesToStream: ({ maybeHold }) => __foldkitBrandViewResult((Option.match(maybeHold, {
+            onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~16"),
+            onSome: (hold) => __foldkitBrandViewResult((Stream.merge(pointerMessages(hold), markDragging)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~15"),
+        })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#dependenciesToStream"),
+    }),
+    edge: entry({ maybeHold: Schema.Option(PointerHold) }, {
+        modelToDependencies: (model) => (__foldkitBrandViewResult(({ maybeHold: pointerHoldOf(model, true) }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#modelToDependencies~2")),
+        dependenciesToStream: ({ maybeHold }) => __foldkitBrandViewResult((Option.match(maybeHold, { onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~17"), onSome: edgeScroll })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#dependenciesToStream~2"),
+    }),
+    resize: entry({ maybeHold: Schema.Option(SplitterHold) }, {
+        modelToDependencies: (model) => (__foldkitBrandViewResult(({
+            maybeHold: Option.map(model.maybeResizing, ({ splitter, pointerId, pressX, pressY }) => (__foldkitBrandViewResult(({
+                reelHook: model.id,
+                splitter,
+                pointerId,
+                pressX,
+                pressY,
+            }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~88"))),
+        }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#modelToDependencies~3")),
+        dependenciesToStream: ({ maybeHold }) => __foldkitBrandViewResult((Option.match(maybeHold, {
+            onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~18"),
+            onSome: (hold) => __foldkitBrandViewResult((Stream.merge(splitterMessages(hold), markDragging)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~16"),
+        })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#dependenciesToStream~3"),
+    }),
+    escape: entry({ isHolding: Schema.Boolean }, {
+        modelToDependencies: (model) => (__foldkitBrandViewResult(({
+            isHolding: isHolding(model) || Option.isSome(model.maybeResizing),
+        }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#modelToDependencies~4")),
+        dependenciesToStream: ({ isHolding: isHoldingNow }) => __foldkitBrandViewResult((isHoldingNow ? escapeKeys(Message.PressedEscape()) : Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#dependenciesToStream~4"),
+    }),
+}), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~87")));
+/** A held pane or column follows the pointer (the reel scrolling near its edges), a dragged
+ *  splitter resizes, and Escape puts either back, before a dialog or the page sees it, from
+ *  listeners that run only while something is held. Lift them into the application's
+ *  Subscriptions, once per reel, behind a key prefix of the parent's: `subscriptions("tiles")`
+ *  is keyed `tilesPointer`, `tilesEdge`, `tilesResize` and `tilesEscape`. */
+export const subscriptions = (keyPrefix) => __foldkitBrandViewResult((prefixKeys(keyPrefix, reelSubscriptions)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#subscriptions");
+// MOUNT
+/** Sizes the copy that follows the pointer to what it lifts, and keeps the pointer where it
+ *  pressed. Measures the source once, when the copy appears. */
+export const SizeLiftedPane = Mount.define("SizeLiftedPane", {
+    args: { sourceSelector: Schema.String, pressX: Schema.Number, pressY: Schema.Number },
+    messages: [Message.CompletedSizeLiftedPane],
+    execute: ({ element, sourceSelector, pressX, pressY }) => __foldkitBrandViewResult((Effect.sync(() => {
+        measureLift(element, sourceSelector, pressX, pressY);
+        return __foldkitBrandViewResult((Message.CompletedSizeLiftedPane()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~89");
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#execute~6"),
+});
+const helpId = (model) => __foldkitBrandViewResult((`${model.id}-grip-help`), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#helpId");
+/** The share of the reel or the column a splitter's arrow key moves. */
+const SPLITTER_STEP = 0.05;
+const HELD_STEPS = {
+    ArrowUp: "Up",
+    ArrowDown: "Down",
+    ArrowLeft: "Left",
+    ArrowRight: "Right",
+};
+const isPlain = (modifiers) => __foldkitBrandViewResult((!modifiers.shiftKey && !modifiers.ctrlKey && !modifiers.altKey && !modifiers.metaKey), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#isPlain");
+const isDropKey = (key) => __foldkitBrandViewResult((key === " " || key === "Enter"), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#isDropKey");
+/** The anchor that pins a pane to its slot. Pane ids are the application's, so the name is
+ *  the pane's place in the id order, which the slot and the pane read from one list. */
+const anchorName = (index) => __foldkitBrandViewResult((`--reel-${index}`), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anchorName");
+/** The panes in their layer's order: by id, which no move changes. */
+const byId = Order.mapInput(Order.String, (pane) => __foldkitBrandViewResult((pane.id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~90"));
+/** Where a carried drop would land, marked: none where it would change nothing. */
+const markOf = (model, layout) => __foldkitBrandViewResult((Option.flatMap(Option.filter(model.maybeHeld, isCarried), (held) => __foldkitBrandViewResult((Option.filter(held.maybeTarget, (target) => __foldkitBrandViewResult((Option.isSome(requestOf(layout, held.subject, target))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~92"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~91"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#markOf");
+const heldPanesOf = (model, layout) => __foldkitBrandViewResult((new Set(Option.match(Option.filter(model.maybeHeld, isCarried), {
+    onNone: () => __foldkitBrandViewResult(([]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~19"),
+    onSome: ({ subject }) => __foldkitBrandViewResult((Subject.match(subject, {
+        Pane: ({ paneId }) => __foldkitBrandViewResult(([paneId]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Pane~3"),
+        Column: ({ columnId }) => __foldkitBrandViewResult((Option.match(columnOf(layout, columnId), {
+            onNone: () => __foldkitBrandViewResult(([]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~20"),
+            onSome: (column) => __foldkitBrandViewResult((Array.map(column.panes, (pane) => __foldkitBrandViewResult((pane.id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~93"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~18"),
+        })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Column~3"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~17"),
+}))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#heldPanesOf");
+const gripView = (model, subject, label, h) => {
+    const isIdleNow = !isHolding(model) && Option.isNone(model.maybeResizing);
+    const maybeHeldHere = Option.filter(model.maybeHeld, (held) => __foldkitBrandViewResult((Equal.equals(held.subject, subject)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~94"));
+    const isHeld = Option.exists(maybeHeldHere, isCarried);
+    const isKeyboardHeld = Option.exists(maybeHeldHere, (held) => __foldkitBrandViewResult((held.by._tag === "Keyboard"), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~95"));
+    // the keyboard holds an item on its grip: the keys are the grip's own, and focus leaving the
+    // grip puts the item back, so a field reached by Tab types as it should
+    const onGripKey = h.OnKeyDownPreventDefault((key, modifiers) => {
+        if (!isPlain(modifiers)) {
+            return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~96");
+        }
+        else if (isKeyboardHeld) {
+            return __foldkitBrandViewResult((isDropKey(key)
+                ? Option.some(Message.DroppedHeld())
+                : Option.map(Option.fromNullishOr(HELD_STEPS[key]), (step) => __foldkitBrandViewResult((Message.SteppedHeld({ step })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~97"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~96");
+        }
+        else {
+            return __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGripKey({ subject }), () => __foldkitBrandViewResult((isIdleNow && isDropKey(key)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~98"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~96");
+        }
+    });
+    const onGripPress = h.OnPointerDown((_pointerType, button, _screenX, _screenY, _time, clientX, clientY, pointerId) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGrip({ subject, pointerId, clientX, clientY }), () => __foldkitBrandViewResult((isIdleNow && button === LEFT_BUTTON), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~100"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~99"));
+    return __foldkitBrandViewResult((IconButton.view({
+        glyph: "grip",
+        label,
+        isQuiet: true,
+        attributes: [
+            h.DataAttribute("reel-grip", subjectHook(model, subject)),
+            h.AriaRoleDescription("draggable"),
+            h.AriaDescribedBy(helpId(model)),
+            Button.pressedAttribute(isHeld, h),
+            onGripKey,
+            onGripPress,
+            ...(isKeyboardHeld ? [h.OnBlur(Message.LeftGrip())] : []),
+        ],
+    }, h)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#gripView");
+};
+/** A splitter's handlers: a pointer drags it, and its arrows (the side ones for a width, up
+ *  and down for a height), unmodified, step it; a modified arrow is the application's. */
+const splitterAttributes = (model, splitter, h) => {
+    const [less, more] = splitter._tag === "Width" ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+    return __foldkitBrandViewResult(([
+        h.OnPointerDown((_pointerType, button, _screenX, _screenY, _time, clientX, clientY, pointerId) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedSplitter({ splitter, pointerId, clientX, clientY }), () => __foldkitBrandViewResult((button === LEFT_BUTTON && !isHolding(model) && Option.isNone(model.maybeResizing)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~102"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~101")),
+        h.OnKeyDownPreventDefault((key, modifiers) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedSplitterKey({
+            splitter,
+            share: key === more ? SPLITTER_STEP : -SPLITTER_STEP,
+        }), () => __foldkitBrandViewResult((isPlain(modifiers) && (key === less || key === more)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~104"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~103")),
+    ]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#splitterAttributes");
+};
+const dropClass = (info, column, paneId) => __foldkitBrandViewResult((Option.match(Option.flatMap(info.maybeMark, (mark) => {
+    if (mark._tag !== "Into" || mark.columnId !== column.id) {
+        return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~105");
+    }
+    const others = Array.filter(column.panes, (pane) => __foldkitBrandViewResult((!info.heldPaneIds.has(pane.id)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~106"));
+    return __foldkitBrandViewResult((Option.orElse(Option.map(Option.filter(Array.get(others, mark.index), (pane) => __foldkitBrandViewResult((pane.id === paneId), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~107")), () => __foldkitBrandViewResult((" drop-before"), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~108")), () => __foldkitBrandViewResult((Option.map(Option.filter(Array.last(others), (pane) => __foldkitBrandViewResult((mark.index >= others.length && pane.id === paneId), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~110")), () => __foldkitBrandViewResult((" drop-after"), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~111"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~109"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~105");
+}), { onNone: () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~21"), onSome: (mark) => __foldkitBrandViewResult((mark), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~19") })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#dropClass");
+const isGapMarked = (info, maybeBeforeColumnId) => __foldkitBrandViewResult((Option.exists(info.maybeMark, (mark) => __foldkitBrandViewResult((mark._tag === "Gap" && Equal.equals(mark.maybeBeforeColumnId, maybeBeforeColumnId)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~112"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#isGapMarked");
+const slotView = (info, anchors, column, pane, h) => __foldkitBrandViewResult((h.keyed("div")(pane.id, [
+    h.Class(`reel-slot${dropClass(info, column, pane.id)}`),
+    h.DataAttribute("reel-slot", pane.id),
+    h.Style({ "--reel-weight": `${pane.weight}`, "--reel-anchor": anchors.get(pane.id) ?? "none" }),
+])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#slotView");
+const splitView = (model, above, share, h) => __foldkitBrandViewResult((h.keyed("div")(`split:${above.id}`, [
+    h.Class("reel-split"),
+    h.Role("separator"),
+    h.AriaOrientation("horizontal"),
+    h.AriaLabel(fill(COPY.heightLabel, { pane: above.label })),
+    h.AriaValuemin(0),
+    h.AriaValuemax(100),
+    h.AriaValuenow(Math.round(share * 100)),
+    h.Tabindex(0),
+    h.DataAttribute("reel-split", above.id),
+    ...splitterAttributes(model, Splitter.Split({ abovePaneId: above.id }), h),
+])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#splitView");
+const columnView = (info, anchors, column, index, h) => {
+    const { model, layout } = info;
+    const total = Number.sumAll(Array.map(column.panes, (pane) => __foldkitBrandViewResult((pane.weight), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~113")));
+    const stack = Array.flatMap(column.panes, (pane, row) => __foldkitBrandViewResult(([
+        ...Array.fromOption(Option.map(Array.get(column.panes, row - 1), (above) => __foldkitBrandViewResult((splitView(model, above, total > 0 ? above.weight / total : 0, h)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~115"))),
+        slotView(info, anchors, column, pane, h),
+    ]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~114"));
+    const maybeNextId = Option.map(Array.get(layout, index + 1), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~116"));
+    return __foldkitBrandViewResult(([
+        h.keyed("div")(`column:${column.id}`, [
+            h.Class("reel-column"),
+            h.DataAttribute("reel-column", column.id),
+            h.DataAttribute("reel-hook", columnHook(model, column.id)),
+            h.Style({ "--reel-width": `${column.width}` }),
+        ], [
+            h.div([h.Class("reel-column-head")], [
+                gripView(model, Subject.Column({ columnId: column.id }), fill(COPY.columnGrip, { column: index + 1 }), h),
+                h.span([h.Class("reel-width"), h.AriaHidden(true)], [widthMark(column.width)]),
+            ]),
+            ...stack,
+        ]),
+        h.keyed("div")(`resize:${column.id}`, [
+            h.Class(`reel-gap reel-resize${isGapMarked(info, maybeNextId) ? " drop-here" : ""}`),
+            h.Role("separator"),
+            h.AriaOrientation("vertical"),
+            h.AriaLabel(fill(COPY.widthLabel, { column: index + 1 })),
+            h.AriaValuemin(0),
+            h.AriaValuemax(100),
+            h.AriaValuenow(Math.round(column.width * 100)),
+            h.AriaValuetext(widthWords(column.width)),
+            h.Tabindex(0),
+            h.DataAttribute("reel-resize", column.id),
+            ...splitterAttributes(model, Splitter.Width({ columnId: column.id }), h),
+        ]),
+    ]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#columnView");
+};
+const paneLayerView = (info, panes, anchors, h) => {
+    const { model } = info;
+    // NOTE: the panes keep one order in the page, by id, whatever the layout: a move changes
+    // only where each is anchored, so no pane's element is taken out and put back, which would
+    // drop focus, a terminal's scroll and whatever a Mount holds inside it.
+    return __foldkitBrandViewResult((h.div([h.Class("reel-panes")], Array.map(panes, (pane) => {
+        const isFocused = Option.contains(info.maybeFocusedId, pane.id);
+        const isHeld = info.heldPaneIds.has(pane.id);
+        return __foldkitBrandViewResult((h.keyed("div")(pane.id, [
+            h.Class(`reel-pane${isFocused ? " focused" : ""}${isHeld ? " drag-dim" : ""}`),
+            h.DataAttribute("reel-pane", paneHook(model, pane.id)),
+            h.Style({ "--reel-anchor": anchors.get(pane.id) ?? "none" }),
+            h.Tabindex(-1),
+            h.OnFocusEnter(Message.FocusedPane({ paneId: pane.id })),
+        ], [
+            info.toPaneView(pane, {
+                grip: gripView(model, Subject.Pane({ paneId: pane.id }), fill(COPY.paneGrip, { pane: pane.label }), h),
+                id: `${model.id}-${pane.id}`,
+            }),
+        ])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~117");
+    }))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#paneLayerView");
+};
+/** The copy a pointer carries: the held panes' title bars, drawn by the reel from their
+ *  labels, so whatever a pane holds (a terminal, a canvas) is never built twice. */
+const liftedCopyView = (info, h) => {
+    const { model, layout } = info;
+    return __foldkitBrandViewResult((Array.fromOption(Option.flatMap(model.maybeHeld, (held) => __foldkitBrandViewResult((By.match(held.by, {
+        Keyboard: () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Keyboard~4"),
+        Pointer: ({ isCarrying, pressX, pressY, x, y }) => __foldkitBrandViewResult((Option.liftPredicate(h.div([
+            h.Class("reel-lift"),
+            h.Style({ transform: `translate3d(${x}px, ${y}px, 0)` }),
+            h.AriaHidden(true),
+            h.Inert(true),
+            h.OnMount(SizeLiftedPane({
+                sourceSelector: Subject.match(held.subject, {
+                    Pane: () => __foldkitBrandViewResult((`[data-reel-pane="${CSS.escape(subjectHook(model, held.subject))}"]`), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Pane~4"),
+                    Column: () => __foldkitBrandViewResult((`[data-reel-hook="${CSS.escape(subjectHook(model, held.subject))}"]`), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Column~4"),
+                }),
+                pressX,
+                pressY,
+            })),
+        ], [
+            h.div([h.Class("reel-lifted")], Array.map(Array.filter(Array.flatMap(layout, (column) => __foldkitBrandViewResult((column.panes), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~119")), (pane) => __foldkitBrandViewResult((info.heldPaneIds.has(pane.id)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~120")), (pane) => __foldkitBrandViewResult((h.div([h.Class("panel window")], [
+                h.div([h.Class("panel-tb")], [
+                    h.span([h.Class("panel-lead")], [
+                        h.span([h.Class("iconbtn quiet")], [Glyph.view({ name: "grip" }, h)]),
+                    ]),
+                    h.h2([], [pane.label]),
+                ]),
+            ])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~121"))),
+        ]), () => __foldkitBrandViewResult((isCarrying), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~122"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Pointer~4"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~118")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#liftedCopyView");
+};
+/** The layout as it prints, with a dragged splitter's resize shown before it is asked for. */
+const previewed = (model, layout) => __foldkitBrandViewResult((Option.match(Option.flatMap(model.maybeResizing, ({ maybeResize }) => __foldkitBrandViewResult((maybeResize), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~123")), { onNone: () => __foldkitBrandViewResult((layout), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~22"), onSome: (resize) => __foldkitBrandViewResult((apply(layout, resize)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~20") })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#previewed");
+/**
+ * A row of columns wider than the view when it must be, each a stack of panes, scrolled
+ * sideways, and down where a column is taller than the view: `div.reel` holding the scroller
+ * `div.reel-view`, whose `div.reel-track` lays out the columns (`div.reel-column`, each a head
+ * with its grip and width, then a slot per pane with a splitter between) with a splitter after
+ * each, and the panes themselves in `div.reel-panes`, each pinned to its slot by anchor
+ * positioning. The reel takes its height from whatever holds it. The layout is the parent's;
+ * each pane renders through `toPaneView`.
+ *
+ * A pane's grip, or a column's, lifts it under a pointer or the keyboard: Space or Enter picks
+ * it up, the arrows move it (left and right through the gaps and columns, up and down among a
+ * column's panes), Space drops it, and Escape or Tab puts it back. A drop reports what it asks
+ * of the layout as the OutMessage. Lift `subscriptions(keyPrefix)` into the application's, or
+ * nothing follows the pointer, and call `reconcile` whenever the layout changes.
+ */
+export const view = defineView((model, viewInputs, h) => {
+    const { label, toPaneView } = viewInputs;
+    const layout = previewed(model, viewInputs.layout);
+    const panes = Array.sort(Array.flatMap(layout, (column) => __foldkitBrandViewResult((column.panes), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~125")), byId);
+    const anchors = new Map(Array.map(panes, (pane, index) => __foldkitBrandViewResult(([pane.id, anchorName(index)]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~126")));
+    const info = {
+        model,
+        layout,
+        toPaneView,
+        maybeFocusedId: focusedPaneId(model, layout),
+        maybeMark: markOf(model, layout),
+        heldPaneIds: heldPanesOf(model, layout),
+    };
+    return __foldkitBrandViewResult((h.div([h.Class("reel"), h.Role("group"), h.AriaLabel(label), h.DataAttribute("reel", model.id)], [
+        h.div([h.Class("reel-view")], [
+            h.div([h.Class("reel-track")], [
+                h.keyed("div")("gap:start", [
+                    h.Class(`reel-gap${isGapMarked(info, Option.map(Array.head(layout), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~127")))
+                        ? " drop-here"
+                        : ""}`),
+                ]),
+                ...Array.flatMap(layout, (column, index) => __foldkitBrandViewResult((columnView(info, anchors, column, index, h)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~128")),
+                paneLayerView(info, panes, anchors, h),
+            ]),
+        ]),
+        h.p([h.Id(helpId(model)), h.Class("sr-only")], [COPY.gripHelp]),
+        ...liftedCopyView(info, h),
+    ])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~124");
+});