@gjermundgaraba-designs/pixel-paper 0.20.1 → 0.22.0

package/dist/src/reel/reel.js

@@ -10,17 +10,18 @@ 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 { LEFT_BUTTON, escapeKeys, markDragging, measureLift, pointerMessages as dragMessages, splitterAttributes, } from "../drag/drag.js";
 import * as Glyph from "../glyph/glyph.js";
 import * as IconButton from "../iconButton/iconButton.js";
+import { isPlain } from "../keys/keys.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";
+import { OutMessage, Resize, Splitter, Step, Subject, Target, WHERE_IT_WAS, apply, columnOfTarget, fill, firstPlace, isSplitterPresent, isTargetPresent, landingWords, nextPreset, originOf, placeAt, placeOf, placeWords, requestOf, resizeOf, steppedTarget, subjectWords, targetAtPoint, whereWords, 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. */
+/** The words a reel says. `{pane}` is a pane's label, `{subject}` what moves (the held pane,
+ *  or a column a key moves, 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}",
@@ -50,9 +51,9 @@ const By = defineTaggedUnion({
     },
     Keyboard: {},
 });
-/** What is held, how, and where it would land: none while a pointer is outside the reel. */
+/** The pane held, how, and where it would land: none while a pointer is outside the reel. */
 const Held = Schema.Struct({
-    subject: Subject,
+    paneId: Schema.String,
     by: By,
     maybeTarget: Schema.Option(Target),
 });
@@ -81,12 +82,12 @@ const PointerAt = Schema.Struct({
 /** Union of all Messages a reel can produce. */
 export const Message = defineMessageUnion({
     PressedGrip: {
-        subject: Subject,
+        paneId: Schema.String,
         pointerId: Schema.Number,
         clientX: Schema.Number,
         clientY: Schema.Number,
     },
-    PressedGripKey: { subject: Subject },
+    PressedGripKey: { paneId: Schema.String },
     MovedPointer: PointerAt.fields,
     ReleasedPointer: PointerAt.fields,
     CancelledPointer: {},
@@ -108,7 +109,6 @@ export const Message = defineMessageUnion({
     CompletedAnnounceReel: {},
     CompletedFocusPane: {},
     CompletedRestoreFocus: {},
-    CompletedFocusGrip: {},
     CompletedScrollIntoView: {},
     CompletedSizeLiftedPane: {},
 });
@@ -137,10 +137,6 @@ const isCarried = (held) => __foldkitBrandViewResult((By.match(held.by, { Pointe
 // 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),
@@ -186,21 +182,6 @@ export const RestoreFocus = Command.define("RestoreFocus", {
         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. */
@@ -214,8 +195,8 @@ export const ScrollIntoView = Command.define("ScrollIntoView", {
                 .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"),
+        return __foldkitBrandViewResult((Message.CompletedScrollIntoView()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~11");
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#execute~4"),
 });
 /** How far a pointer moves from its press before it carries what it pressed. */
 const CARRY_THRESHOLD = 5;
@@ -225,22 +206,17 @@ 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 heldWords = (layout, held) => __foldkitBrandViewResult((String.capitalize(Option.getOrElse(subjectWords(layout, Subject.Pane({ paneId: held.paneId })), () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~13")))), "@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~14")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#scrollToTarget");
+/** Lets go of the held pane: 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. */
 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) })]
-        : [];
+    const maybeRequest = Option.flatMap(held.maybeTarget, (target) => __foldkitBrandViewResult((requestOf(layout, held.paneId, target)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~15"));
     return __foldkitBrandViewResult((Option.match(maybeRequest, {
         onNone: () => (__foldkitBrandViewResult(({
             model: released,
@@ -249,10 +225,9 @@ const letGo = (model, layout, held, putBack) => {
         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")),
+                    where: Option.getOrElse(whereWords(apply(layout, request), Subject.Pane({ paneId: held.paneId })), () => __foldkitBrandViewResult((WHERE_IT_WAS), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~16")),
                 })),
             ],
             outMessage: request,
@@ -260,10 +235,10 @@ const letGo = (model, layout, held, putBack) => {
     })), "@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")), {
+const lift = (model, layout, paneId, by) => __foldkitBrandViewResult((Option.match(Option.filter(originOf(layout, paneId), () => __foldkitBrandViewResult((!isHolding(model) && Option.isNone(model.maybeResizing)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~17")), {
     onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~3")),
     onSome: (origin) => {
-        const held = { subject, by, maybeTarget: Option.some(origin) };
+        const held = { paneId, by, maybeTarget: Option.some(origin) };
         return __foldkitBrandViewResult(({
             model: withHeld(model, Option.some(held)),
             commands: by._tag === "Keyboard"
@@ -292,10 +267,10 @@ const movePointer = (model, layout, held, pointer) => __foldkitBrandViewResult((
 })), "@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")), {
+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~18")), {
     onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~4")),
     onSome: (target) => {
-        const next = steppedTarget(layout, held.subject, target, step);
+        const next = steppedTarget(layout, held.paneId, target, step);
         if (Equal.equals(next, target)) {
             return __foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~4");
         }
@@ -304,7 +279,7 @@ const stepHeld = (model, layout, held, step) => __foldkitBrandViewResult((Option
             commands: [
                 announce(fill(COPY.over, {
                     subject: heldWords(layout, held),
-                    where: landingWords(layout, held.subject, next),
+                    where: landingWords(layout, held.paneId, next),
                 })),
                 ...scrollToTarget(model, layout, next),
             ],
@@ -312,7 +287,7 @@ const stepHeld = (model, layout, held, step) => __foldkitBrandViewResult((Option
     },
 })), "@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");
+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~19")))), "@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, {
@@ -333,7 +308,7 @@ const resizeSplitter = (model, layout, share, isLetGo) => __foldkitBrandViewResu
 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({
+        PressedGrip: ({ paneId, pointerId, clientX, clientY }) => __foldkitBrandViewResult((lift(model, layout, paneId, By.Pointer({
             pointerId,
             pressX: clientX,
             pressY: clientY,
@@ -341,17 +316,17 @@ export const update = (model, message, context) => {
             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"),
+        PressedGripKey: ({ paneId }) => __foldkitBrandViewResult((lift(model, layout, paneId, 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~20"))), "@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~21"))), "@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~22"))), "@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~23"))), "@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~24"))), "@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~25"))), "@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")), {
+            : whileHeld(model, (held) => __foldkitBrandViewResult((cancel(model, layout, held)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~26"))), "@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~28"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~27")), {
             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"),
@@ -376,7 +351,6 @@ export const update = (model, message, context) => {
         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");
@@ -386,32 +360,32 @@ export const update = (model, message, context) => {
  * 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;
+ * where it was, and the keyboard follows where it went with the pane. A drag whose pane 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 isFocusGone = Option.exists(model.maybeFocus, (focus) => __foldkitBrandViewResult((Option.isNone(placeOf(layout, focus.paneId))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~29"));
+    const maybePlace = Option.filter(focusedPlace(model, layout), () => __foldkitBrandViewResult((Option.isSome(model.maybeFocus)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~30"));
     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"))
+    const restore = Array.fromOption(Option.map(Option.filter(maybePlace, () => __foldkitBrandViewResult((isFocusGone), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~31")), (place) => __foldkitBrandViewResult((RestoreFocus({ paneHook: paneHook(model, place.pane.id) })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~32")));
+    const settled = Option.exists(model.maybeResizing, ({ splitter }) => __foldkitBrandViewResult((isSplitterPresent(layout, splitter)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~33"))
         ? 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)) {
+            if (Option.isNone(placeOf(layout, held.paneId))) {
                 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")));
+            const maybeTarget = Option.orElse(Option.filter(held.maybeTarget, (target) => __foldkitBrandViewResult((isTargetPresent(layout, target)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~34")), () => (__foldkitBrandViewResult((held.by._tag === "Keyboard" ? originOf(layout, held.paneId) : Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~35")));
             return __foldkitBrandViewResult(({
                 model: withHeld(settled, Option.some({ ...held, maybeTarget })),
                 commands: restore,
@@ -448,13 +422,13 @@ const focusStep = (model, layout, place) => (__foldkitBrandViewResult(({
 }), "@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")), {
+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~36")), {
     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"));
+        const landing = Option.getOrElse(placeOf(next, place.pane.id), () => __foldkitBrandViewResult((place), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~37"));
+        const words = Option.getOrElse(subjectWords(layout, subject), () => __foldkitBrandViewResult((place.pane.label), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~38"));
+        const where = Option.getOrElse(whereWords(next, subject), () => __foldkitBrandViewResult((WHERE_IT_WAS), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~39"));
         return __foldkitBrandViewResult(({
             model: focusOn(model, landing),
             commands: [
@@ -465,7 +439,7 @@ const requestStep = (model, layout, place, subject, maybeRequest) => __foldkitBr
         }), "@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");
+const columnIdAt = (layout, index) => __foldkitBrandViewResult((Option.map(Array.get(layout, index), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~40"))), "@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;
@@ -475,14 +449,14 @@ const columnIdAt = (layout, index) => __foldkitBrandViewResult((Option.map(Array
  */
 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")), {
+    return __foldkitBrandViewResult((Option.match(Option.filter(focusedPlace(model, layout), () => __foldkitBrandViewResult((!isHolding(model)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~41")), {
         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")), {
+            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~42")), {
                 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");
@@ -492,10 +466,10 @@ export const perform = (model, action, context) => {
                     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"),
+                onNone: () => __foldkitBrandViewResult((Option.liftPredicate(OutMessage.PulledOutPane({ paneId, maybeBeforeColumnId: edge }), () => __foldkitBrandViewResult((rows > 1), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~43"))), "@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 moveColumn = (maybeBefore) => __foldkitBrandViewResult((ask(Option.map(maybeBefore, (maybeBeforeColumnId) => __foldkitBrandViewResult((OutMessage.MovedColumn({ columnId: column.id, maybeBeforeColumnId })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~44")), 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~45")), Match.when("FocusRight", () => __foldkitBrandViewResult((focusAt(columnIndex + 1, row)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~46")), Match.when("FocusUp", () => (__foldkitBrandViewResult((row > 0 ? focusAt(columnIndex, row - 1) : { model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~47"))), Match.when("FocusDown", () => __foldkitBrandViewResult((focusAt(columnIndex, row + 1)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~48")), 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~49")), 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~50")), Match.when("MovePaneLeft", () => __foldkitBrandViewResult((sideways(columnIndex - 1, columnIdAt(layout, 0))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~51")), Match.when("MovePaneRight", () => __foldkitBrandViewResult((sideways(columnIndex + 1, Option.none())), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~52")), 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~54")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~53")), 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~56")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~55")), Match.when("CycleWidth", () => {
                 const width = nextPreset(column.width);
                 return __foldkitBrandViewResult(({
                     model,
@@ -504,11 +478,11 @@ export const perform = (model, action, context) => {
                         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");
+                }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~57");
             }), 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");
+            }), () => __foldkitBrandViewResult((rows > 1), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~59")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~58")), Match.exhaustive)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~12");
         },
     })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#perform");
 };
@@ -520,43 +494,43 @@ 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 columnBoxOf = (element, heldId) => {
     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) => {
+        slotMiddles: Array.map(Array.filter(Array.fromIterable(element.querySelectorAll("[data-reel-slot]")), (slot) => __foldkitBrandViewResult((slot.getAttribute("data-reel-slot") !== heldId), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~60")), (slot) => {
             const slotRect = slot.getBoundingClientRect();
-            return __foldkitBrandViewResult((slotRect.top + slotRect.height / 2), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~63");
+            return __foldkitBrandViewResult((slotRect.top + slotRect.height / 2), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~61");
         }),
     }), "@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) => {
+/** Where a pointer at (`clientX`, `clientY`) would drop the pane `paneId` in the reel
+ *  `reelHook` names, read from where its columns and their slots sit: none outside the reel. */
+const pointerTarget = (reelHook, paneId, 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");
+        clientY <= rect.bottom), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~62"));
+}), (view) => __foldkitBrandViewResult((targetAtPoint(Array.map(Array.fromIterable(view.querySelectorAll("[data-reel-column]")), (element) => __foldkitBrandViewResult((columnBoxOf(element, paneId)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~64")), clientX, clientY)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~63"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#pointerTarget");
 const PointerHold = Schema.Struct({
     reelHook: Schema.String,
-    subject: Subject,
+    paneId: Schema.String,
     pointerId: Schema.Number,
 });
 const pointerAt = (hold, event) => (__foldkitBrandViewResult(({
     clientX: event.clientX,
     clientY: event.clientY,
-    maybeTarget: pointerTarget(hold.reelHook, hold.subject, event.clientX, event.clientY),
+    maybeTarget: pointerTarget(hold.reelHook, hold.paneId, 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");
+const pointerMessages = (hold) => __foldkitBrandViewResult((dragMessages(hold.pointerId, {
+    moved: (event) => __foldkitBrandViewResult((Message.MovedPointer(pointerAt(hold, event))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#moved"),
+    released: (event) => __foldkitBrandViewResult((Message.ReleasedPointer(pointerAt(hold, event))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#released"),
+    cancelled: () => __foldkitBrandViewResult((Message.CancelledPointer()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#cancelled"),
+})), "@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) {
@@ -569,7 +543,7 @@ const towards = (at, low, high) => {
         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,
+/** While a pointer carries a pane 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 = {
@@ -594,11 +568,11 @@ const edgeScroll = (hold) => __foldkitBrandViewResult((Stream.callback(() => __f
     };
     document.addEventListener("pointermove", onMove);
     state.frame = requestAnimationFrame(step);
-    return __foldkitBrandViewResult(({ state, onMove }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~72");
+    return __foldkitBrandViewResult(({ state, onMove }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~66");
 }), ({ 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");
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~68")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~70")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~65"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#edgeScroll");
 const SplitterHold = Schema.Struct({
     reelHook: Schema.String,
     splitter: Splitter,
@@ -612,12 +586,12 @@ const heightOf = (element) => __foldkitBrandViewResult((element.getBoundingClien
  *  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"),
+        Option.getOrElse(Option.map(Option.fromNullishOr(view.querySelector(".reel-gap")), (gap) => __foldkitBrandViewResult((gap.getBoundingClientRect().width), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~72")), () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~73"))), "@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");
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~71")), () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~74"))), "@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);
@@ -625,14 +599,18 @@ const splitterMessages = (hold) => __foldkitBrandViewResult((Stream.suspend(() =
         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");
+    return __foldkitBrandViewResult((dragMessages(hold.pointerId, {
+        moved: (event) => __foldkitBrandViewResult((Message.MovedSplitter({ share: shareOf(event) })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#moved~2"),
+        released: (event) => __foldkitBrandViewResult((Message.ReleasedSplitter({ share: shareOf(event) })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#released~2"),
+        cancelled: () => __foldkitBrandViewResult((Message.CancelledSplitter()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#cancelled~2"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~75");
 })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#splitterMessages");
-const pointerHoldOf = (model, isCarryingOnly) => __foldkitBrandViewResult((Option.flatMap(model.maybeHeld, ({ subject, by }) => __foldkitBrandViewResult((By.match(by, {
+const pointerHoldOf = (model, isCarryingOnly) => __foldkitBrandViewResult((Option.flatMap(model.maybeHeld, ({ paneId, 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");
+        : Option.some({ reelHook: model.id, paneId, pointerId })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Pointer~3"),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~76"))), "@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")),
@@ -653,7 +631,7 @@ const reelSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResu
                 pointerId,
                 pressX,
                 pressY,
-            }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~88"))),
+            }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~78"))),
         }), "@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"),
@@ -666,8 +644,8 @@ const reelSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResu
         }), "@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
+}), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~77")));
+/** A held pane 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")`
@@ -681,8 +659,8 @@ export const SizeLiftedPane = Mount.define("SizeLiftedPane", {
     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"),
+        return __foldkitBrandViewResult((Message.CompletedSizeLiftedPane()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~79");
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#execute~5"),
 });
 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. */
@@ -693,52 +671,42 @@ const HELD_STEPS = {
     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"));
+const byId = Order.mapInput(Order.String, (pane) => __foldkitBrandViewResult((pane.id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~80"));
 /** 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 markOf = (model, layout) => __foldkitBrandViewResult((Option.flatMap(Option.filter(model.maybeHeld, isCarried), (held) => __foldkitBrandViewResult((Option.filter(held.maybeTarget, (target) => __foldkitBrandViewResult((Option.isSome(requestOf(layout, held.paneId, target))), "@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#markOf");
+const carriedIdOf = (model) => __foldkitBrandViewResult((Option.map(Option.filter(model.maybeHeld, isCarried), ({ paneId }) => __foldkitBrandViewResult((paneId), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~83"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#carriedIdOf");
+const gripView = (model, pane, 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 maybeHeldHere = Option.filter(model.maybeHeld, (held) => __foldkitBrandViewResult((held.paneId === pane.id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~84"));
     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"));
+    const isKeyboardHeld = Option.exists(maybeHeldHere, (held) => __foldkitBrandViewResult((held.by._tag === "Keyboard"), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~85"));
     // 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");
+            return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~86");
         }
         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");
+                : Option.map(Option.fromNullishOr(HELD_STEPS[key]), (step) => __foldkitBrandViewResult((Message.SteppedHeld({ step })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~87"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~86");
         }
         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");
+            return __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGripKey({ paneId: pane.id }), () => __foldkitBrandViewResult((isIdleNow && isDropKey(key)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~88"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~86");
         }
     });
-    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"));
+    const onGripPress = h.OnPointerDown((_pointerType, button, _screenX, _screenY, _time, clientX, clientY, pointerId) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGrip({ paneId: pane.id, pointerId, clientX, clientY }), () => __foldkitBrandViewResult((isIdleNow && button === LEFT_BUTTON), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~90"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~89"));
     return __foldkitBrandViewResult((IconButton.view({
         glyph: "grip",
-        label,
+        label: fill(COPY.paneGrip, { pane: pane.label }),
         isQuiet: true,
         attributes: [
-            h.DataAttribute("reel-grip", subjectHook(model, subject)),
+            h.DataAttribute("reel-grip", paneHook(model, pane.id)),
             h.AriaRoleDescription("draggable"),
             h.AriaDescribedBy(helpId(model)),
             Button.pressedAttribute(isHeld, h),
@@ -748,26 +716,21 @@ const gripView = (model, subject, label, h) => {
         ],
     }, 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");
-};
+/** A splitter's handlers: a pointer drags it, and its arrows step it by `SPLITTER_STEP`. */
+const reelSplitterAttributes = (model, splitter, h) => __foldkitBrandViewResult((splitterAttributes({
+    orientation: splitter._tag === "Width" ? "vertical" : "horizontal",
+    isIdle: !isHolding(model) && Option.isNone(model.maybeResizing),
+    onPress: (pointerId, clientX, clientY) => __foldkitBrandViewResult((Message.PressedSplitter({ splitter, pointerId, clientX, clientY })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onPress"),
+    onStep: (direction) => __foldkitBrandViewResult((Message.PressedSplitterKey({ splitter, share: direction * SPLITTER_STEP })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onStep"),
+}, h)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#reelSplitterAttributes");
 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");
+        return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~91");
     }
-    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 others = Array.filter(column.panes, (pane) => __foldkitBrandViewResult((!Option.contains(info.maybeCarriedId, pane.id)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~92"));
+    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~93")), () => __foldkitBrandViewResult((" drop-before"), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~94")), () => __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~96")), () => __foldkitBrandViewResult((" drop-after"), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~97"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~95"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~91");
+}), { onNone: () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~19"), onSome: (mark) => __foldkitBrandViewResult((mark), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~17") })), "@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~98"))), "@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),
@@ -776,40 +739,32 @@ const slotView = (info, anchors, column, pane, h) => __foldkitBrandViewResult((h
 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),
+    ...reelSplitterAttributes(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 total = Number.sumAll(Array.map(column.panes, (pane) => __foldkitBrandViewResult((pane.weight), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~99")));
     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"))),
+        ...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~101"))),
         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"));
+    ]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~100"));
+    const maybeNextId = Option.map(Array.get(layout, index + 1), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~102"));
     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,
-        ]),
+        ], 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),
@@ -817,7 +772,7 @@ const columnView = (info, anchors, column, index, h) => {
             h.AriaValuetext(widthWords(column.width)),
             h.Tabindex(0),
             h.DataAttribute("reel-resize", column.id),
-            ...splitterAttributes(model, Splitter.Width({ columnId: column.id }), h),
+            ...reelSplitterAttributes(model, Splitter.Width({ columnId: column.id }), h),
         ]),
     ]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#columnView");
 };
@@ -828,7 +783,7 @@ const paneLayerView = (info, panes, anchors, h) => {
     // 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);
+        const isHeld = Option.contains(info.maybeCarriedId, 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)),
@@ -837,14 +792,14 @@ const paneLayerView = (info, panes, anchors, h) => {
             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),
+                grip: gripView(model, pane, h),
                 id: `${model.id}-${pane.id}`,
             }),
-        ])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~117");
+        ])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~103");
     }))), "@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. */
+/** The copy a pointer carries: the held pane's title bar, drawn by the reel from its label,
+ *  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, {
@@ -855,68 +810,62 @@ const liftedCopyView = (info, h) => {
             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"),
-                }),
+                sourceSelector: `[data-reel-pane="${CSS.escape(paneHook(model, held.paneId))}"]`,
                 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 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]),
+                    h.span([h.Class("panel-lead")], [h.span([h.Class("iconbtn quiet")], [Glyph.view({ name: "grip" }, h)])]),
+                    h.h2([], [heldWords(layout, held)]),
                 ]),
-            ])), "@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");
+            ]),
+        ]), () => __foldkitBrandViewResult((isCarrying), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~105"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Pointer~4"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~104")))), "@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");
+const previewed = (model, layout) => __foldkitBrandViewResult((Option.match(Option.flatMap(model.maybeResizing, ({ maybeResize }) => __foldkitBrandViewResult((maybeResize), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~106")), { onNone: () => __foldkitBrandViewResult((layout), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~20"), onSome: (resize) => __foldkitBrandViewResult((apply(layout, resize)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~18") })), "@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`.
+ * `div.reel-view`, whose `div.reel-track` lays out the columns (`div.reel-column`, 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
+ * A pane's grip 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 panes = Array.sort(Array.flatMap(layout, (column) => __foldkitBrandViewResult((column.panes), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~108")), byId);
+    const anchors = new Map(Array.map(panes, (pane, index) => __foldkitBrandViewResult(([pane.id, anchorName(index)]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~109")));
     const info = {
         model,
         layout,
         toPaneView,
         maybeFocusedId: focusedPaneId(model, layout),
         maybeMark: markOf(model, layout),
-        heldPaneIds: heldPanesOf(model, layout),
+        maybeCarriedId: carriedIdOf(model),
     };
     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")))
+                    h.Class(`reel-gap${isGapMarked(info, Option.map(Array.head(layout), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~110")))
                         ? " drop-here"
                         : ""}`),
                 ]),
-                ...Array.flatMap(layout, (column, index) => __foldkitBrandViewResult((columnView(info, anchors, column, index, h)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~128")),
+                ...Array.flatMap(layout, (column, index) => __foldkitBrandViewResult((columnView(info, anchors, column, index, h)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~111")),
                 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");
+    ])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~107");
 });