@gjermundgaraba-designs/pixel-paper 0.24.0 → 0.26.0

package/dist/src/reel/reel.js

@@ -28,6 +28,7 @@ const COPY = {
     widthLabel: "Width of column {column}",
     heightLabel: "Height of {pane}",
     focused: "{pane}, {where}.",
+    focusedTab: "{pane}, tab {tab} of {tabs}.",
     moved: "{subject} moved to {where}.",
     widened: "Column {column} takes {width}.",
     pickedUp: "Picked up {subject}.",
@@ -75,6 +76,10 @@ export const Model = Schema.Struct({
     maybeHeld: Schema.Option(Held),
     maybeResizing: Schema.Option(Resizing),
 });
+/** How a reel shows its panes: side by side in their columns (`Strip`), or one at a time at
+ *  the reel's full size under a tab per pane (`Tabs`). The application holds it and passes it
+ *  in; the layout is the same in both. */
+export const Arrangement = Schema.Literals(["Strip", "Tabs"]);
 // MESSAGE
 const PointerAt = Schema.Struct({
     clientX: Schema.Number,
@@ -98,6 +103,8 @@ export const Message = defineMessageUnion({
     LeftGrip: {},
     PressedEscape: {},
     FocusedPane: { paneId: Schema.String },
+    PressedTab: { paneId: Schema.String },
+    SteppedTab: { paneId: Schema.String },
     PressedSplitter: {
         splitter: Splitter,
         pointerId: Schema.Number,
@@ -110,6 +117,7 @@ export const Message = defineMessageUnion({
     PressedSplitterKey: { splitter: Splitter, share: Schema.Number },
     CompletedAnnounceReel: {},
     CompletedFocusPane: {},
+    CompletedFocusTab: {},
     CompletedRestoreFocus: {},
     CompletedScrollIntoView: {},
     CompletedSizeLiftedPane: {},
@@ -141,6 +149,7 @@ 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 tabHook = (model, paneId) => __foldkitBrandViewResult((`${model.id}/tab/${paneId}`), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#tabHook");
 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),
@@ -170,6 +179,19 @@ export const FocusPane = Command.define("FocusPane", {
         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 tab `tabHook` names, for a tab the arrows step to: the keyboard stays in the
+ *  tab list until the reader goes into the pane. */
+export const FocusTab = Command.define("FocusTab", {
+    args: { tabHook: Schema.String },
+    messages: [Message.CompletedFocusTab],
+    execute: ({ tabHook: hook }) => __foldkitBrandViewResult((Effect.gen(function* () {
+        yield* Render.afterCommit;
+        yield* Effect.sync(() => {
+            document.querySelector(`[data-reel-tab="${CSS.escape(hook)}"]`)?.focus();
+        });
+        return __foldkitBrandViewResult((Message.CompletedFocusTab()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~9");
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#execute~3"),
+});
 /** 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", {
@@ -183,8 +205,8 @@ export const RestoreFocus = Command.define("RestoreFocus", {
                 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"),
+        return __foldkitBrandViewResult((Message.CompletedRestoreFocus()), "@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
@@ -199,8 +221,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~11");
-    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#execute~4"),
+        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;
@@ -210,9 +232,9 @@ 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 heldLabel = (layout, held) => __foldkitBrandViewResult((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#heldLabel");
+const heldLabel = (layout, held) => __foldkitBrandViewResult((Option.getOrElse(subjectWords(layout, Subject.Pane({ paneId: held.paneId })), () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~15"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#heldLabel");
 const heldWords = (layout, held) => __foldkitBrandViewResult((String.capitalize(heldLabel(layout, held))), "@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");
+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 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) => {
@@ -221,7 +243,7 @@ const letGo = (model, layout, held, putBack) => {
         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.paneId, target)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~15"));
+    const maybeRequest = Option.flatMap(held.maybeTarget, (target) => __foldkitBrandViewResult((requestOf(layout, held.paneId, target)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~17"));
     return __foldkitBrandViewResult((Option.match(maybeRequest, {
         onNone: () => (__foldkitBrandViewResult(({
             model: released,
@@ -232,7 +254,7 @@ const letGo = (model, layout, held, putBack) => {
             commands: [
                 announce(fill(COPY.dropped, {
                     subject,
-                    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")),
+                    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~18")),
                 })),
             ],
             outMessage: request,
@@ -240,7 +262,7 @@ 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, paneId, by) => __foldkitBrandViewResult((Option.match(Option.filter(originOf(layout, paneId), () => __foldkitBrandViewResult((isIdle(model)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~17")), {
+const lift = (model, layout, paneId, by) => __foldkitBrandViewResult((Option.match(Option.filter(originOf(layout, paneId), () => __foldkitBrandViewResult((isIdle(model)), "@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 = { paneId, by, maybeTarget: Option.some(origin) };
@@ -272,7 +294,7 @@ 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~18")), {
+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.paneId, target, step);
@@ -292,7 +314,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~19")))), "@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~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, {
@@ -308,6 +330,12 @@ const resizeSplitter = (model, layout, share, isLetGo) => __foldkitBrandViewResu
         })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~5");
     },
 })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#resizeSplitter");
+/** Shows the pane `paneId` under its tab and moves the keyboard as `focus` says: into the
+ *  pane for a press, onto the tab for an arrow. */
+const selectTab = (model, layout, paneId, focus) => __foldkitBrandViewResult((Option.match(placeOf(layout, paneId), {
+    onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~8")),
+    onSome: (place) => (__foldkitBrandViewResult(({ model: focusOn(model, place), commands: [focus] }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~7")),
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#selectTab");
 /** 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) => {
@@ -322,18 +350,20 @@ export const update = (model, message, context) => {
             isCarrying: false,
         }))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#PressedGrip"),
         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"),
+        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~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")),
+            : 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"),
+        PressedTab: ({ paneId }) => __foldkitBrandViewResult((selectTab(model, layout, paneId, FocusPane({ paneHook: paneHook(model, paneId) }))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#PressedTab"),
+        SteppedTab: ({ paneId }) => __foldkitBrandViewResult((selectTab(model, layout, paneId, FocusTab({ tabHook: tabHook(model, paneId) }))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#SteppedTab"),
+        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~9")),
+            onSome: (place) => (__foldkitBrandViewResult(({ model: focusOn(model, place) }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~8")),
         })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#FocusedPane"),
         PressedSplitter: ({ splitter, pointerId, clientX, clientY }) => __foldkitBrandViewResult((!isIdle(model) || !isSplitterPresent(layout, splitter)
             ? { model }
@@ -350,11 +380,12 @@ export const update = (model, message, context) => {
         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")),
+            onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~10")),
+            onSome: (resize) => (__foldkitBrandViewResult(({ model, outMessage: resize }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~9")),
         })), "@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")),
+        CompletedFocusTab: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#CompletedFocusTab")),
         CompletedRestoreFocus: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#CompletedRestoreFocus")),
         CompletedScrollIntoView: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#CompletedScrollIntoView")),
         CompletedSizeLiftedPane: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#CompletedSizeLiftedPane")),
@@ -371,30 +402,30 @@ export const update = (model, message, context) => {
  */
 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~29"));
-    const maybePlace = Option.filter(focusedPlace(model, layout), () => __foldkitBrandViewResult((Option.isSome(model.maybeFocus)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~30"));
+    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"),
+        onNone: () => __foldkitBrandViewResult((model), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~11"),
+        onSome: (place) => __foldkitBrandViewResult((focusOn(model, place)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~10"),
     });
-    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"))
+    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")),
+        onNone: () => (__foldkitBrandViewResult(({ model: settled, commands: restore }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~12")),
         onSome: (held) => {
             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");
+                }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~11");
             }
-            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")));
+            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.paneId) : 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#onSome~11");
         },
     })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#reconcile");
 };
@@ -427,13 +458,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((isChange(layout, request)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~36")), {
-    onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~12")),
+const requestStep = (model, layout, place, subject, maybeRequest) => __foldkitBrandViewResult((Option.match(Option.filter(maybeRequest, (request) => __foldkitBrandViewResult((isChange(layout, request)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~38")), {
+    onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~13")),
     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~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"));
+        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: [
@@ -441,40 +472,73 @@ const requestStep = (model, layout, place, subject, maybeRequest) => __foldkitBr
                 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#onSome~12");
     },
 })), "@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~40"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#columnIdAt");
+/** The panes in the order their tabs print: column by column, and down each column. */
+const readingOrder = (layout) => __foldkitBrandViewResult((Array.flatMap(layout, (column) => __foldkitBrandViewResult((column.panes), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~42"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#readingOrder");
+/** How far each focus key steps through the tabs: left and up to the one before, right and
+ *  down to the one after. */
+const TAB_STEPS = {
+    FocusLeft: -1,
+    FocusUp: -1,
+    FocusRight: 1,
+    FocusDown: 1,
+};
+/** `perform` while the panes print as tabs: a focus key moves to the tab beside the focused
+ *  pane's, past neither end; there is no column to move or size. */
+const performTabbed = (model, action, layout) => {
+    const panes = readingOrder(layout);
+    const maybeNext = Option.flatMap(Option.all({
+        step: Option.fromUndefinedOr(TAB_STEPS[action]),
+        index: Option.flatMap(focusedPaneId(model, layout), (paneId) => __foldkitBrandViewResult((Array.findFirstIndex(panes, (pane) => __foldkitBrandViewResult((pane.id === paneId), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~44"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~43")),
+    }), ({ step, index }) => __foldkitBrandViewResult((Option.flatMap(Array.get(panes, index + step), (pane) => __foldkitBrandViewResult((Option.map(placeOf(layout, pane.id), (place) => (__foldkitBrandViewResult(({ place, tab: index + step + 1 }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~47")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~46"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~45"));
+    return __foldkitBrandViewResult((Option.match(Option.filter(maybeNext, () => __foldkitBrandViewResult((!isHolding(model)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~48")), {
+        onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~14")),
+        onSome: ({ place, tab }) => (__foldkitBrandViewResult(({
+            model: focusOn(model, place),
+            commands: [
+                FocusPane({ paneHook: paneHook(model, place.pane.id) }),
+                announce(fill(COPY.focusedTab, { pane: place.pane.label, tab, tabs: panes.length })),
+            ],
+        }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~13")),
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#performTabbed");
+};
+const columnIdAt = (layout, index) => __foldkitBrandViewResult((Option.map(Array.get(layout, index), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~49"))), "@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.
+ * held, or where there is nowhere to go. Under tabs, only the focus keys act, stepping from tab
+ * to tab.
  */
 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~41")), {
-        onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~13")),
+    const { layout, arrangement = "Strip" } = context;
+    if (arrangement === "Tabs") {
+        return __foldkitBrandViewResult((performTabbed(model, action, layout)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#perform");
+    }
+    return __foldkitBrandViewResult((Option.match(Option.filter(focusedPlace(model, layout), () => __foldkitBrandViewResult((!isHolding(model)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~50")), {
+        onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~15")),
         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~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"),
+            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~51")), {
+                onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~16")),
+                onSome: (next) => __foldkitBrandViewResult((next.pane.id === paneId ? { model } : focusStep(model, layout, next)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~15"),
             })), "@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~43"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~15"),
+                }))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~16"),
+                onNone: () => __foldkitBrandViewResult((Option.liftPredicate(OutMessage.PulledOutPane({ paneId, maybeBeforeColumnId: edge }), () => __foldkitBrandViewResult((rows > 1), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~52"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~17"),
             }))), "@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~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 moveColumn = (maybeBefore) => __foldkitBrandViewResult((ask(Option.map(maybeBefore, (maybeBeforeColumnId) => __foldkitBrandViewResult((OutMessage.MovedColumn({ columnId: column.id, maybeBeforeColumnId })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~53")), 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~54")), Match.when("FocusRight", () => __foldkitBrandViewResult((focusAt(columnIndex + 1, row)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~55")), Match.when("FocusUp", () => (__foldkitBrandViewResult((row > 0 ? focusAt(columnIndex, row - 1) : { model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~56"))), Match.when("FocusDown", () => __foldkitBrandViewResult((focusAt(columnIndex, row + 1)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~57")), 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~58")), 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~59")), Match.when("MovePaneLeft", () => __foldkitBrandViewResult((sideways(columnIndex - 1, columnIdAt(layout, 0))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~60")), Match.when("MovePaneRight", () => __foldkitBrandViewResult((sideways(columnIndex + 1, Option.none())), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~61")), 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~63")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~62")), 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~65")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~64")), Match.when("CycleWidth", () => {
                 const width = nextPreset(column.width);
                 return __foldkitBrandViewResult(({
                     model,
@@ -483,11 +547,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~57");
+                }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~66");
             }), 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~59")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~58")), Match.exhaustive)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~12");
+            }), () => __foldkitBrandViewResult((rows > 1), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~68")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~67")), Match.exhaustive)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~14");
         },
     })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#perform");
 };
@@ -507,9 +571,9 @@ const columnBoxOf = (element) => {
     }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#columnBoxOf");
 };
 /** The middles of a column's slots but the held pane's. */
-const slotMiddlesOf = (element, heldId) => __foldkitBrandViewResult((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 slotMiddlesOf = (element, heldId) => __foldkitBrandViewResult((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~69")), (slot) => {
     const slotRect = slot.getBoundingClientRect();
-    return __foldkitBrandViewResult((slotRect.top + slotRect.height / 2), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~61");
+    return __foldkitBrandViewResult((slotRect.top + slotRect.height / 2), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~70");
 })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#slotMiddlesOf");
 /** Where a pointer at (`clientX`, `clientY`) would drop the pane `paneId` in the reel
  *  `reelHook` names, read from where its columns sit and the slots of the one it is over: none
@@ -519,13 +583,13 @@ const pointerTarget = (reelHook, paneId, clientX, clientY) => __foldkitBrandView
     return (__foldkitBrandViewResult((clientX >= rect.left &&
         clientX <= rect.right &&
         clientY >= rect.top &&
-        clientY <= rect.bottom), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~62"));
+        clientY <= rect.bottom), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~71"));
 }), (view) => {
     const columns = Array.fromIterable(view.querySelectorAll("[data-reel-column]"));
     return __foldkitBrandViewResult((targetAtPoint(Array.map(columns, columnBoxOf), clientX, clientY, (index) => __foldkitBrandViewResult((Option.match(Array.get(columns, index), {
-        onNone: () => __foldkitBrandViewResult(([]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~16"),
-        onSome: (column) => __foldkitBrandViewResult((slotMiddlesOf(column, paneId)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~15"),
-    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~64"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~63");
+        onNone: () => __foldkitBrandViewResult(([]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~18"),
+        onSome: (column) => __foldkitBrandViewResult((slotMiddlesOf(column, paneId)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~17"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~73"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~72");
 })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#pointerTarget");
 const PointerHold = Schema.Struct({
     reelHook: Schema.String,
@@ -548,7 +612,7 @@ const pointerMessages = (hold) => __foldkitBrandViewResult((Stream.callback((que
     };
     const readMove = () => {
         cancelAnimationFrame(state.frame);
-        Option.map(state.maybeMove, (event) => __foldkitBrandViewResult((offer(Message.MovedPointer(pointerAt(hold, event)))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~67"));
+        Option.map(state.maybeMove, (event) => __foldkitBrandViewResult((offer(Message.MovedPointer(pointerAt(hold, event)))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~76"));
         state.maybeMove = Option.none();
     };
     const onMove = (event) => {
@@ -575,13 +639,13 @@ const pointerMessages = (hold) => __foldkitBrandViewResult((Stream.callback((que
     document.addEventListener("pointermove", onMove);
     document.addEventListener("pointerup", onUp);
     document.addEventListener("pointercancel", onCancel);
-    return __foldkitBrandViewResult(({ state, onMove, onUp, onCancel }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~66");
+    return __foldkitBrandViewResult(({ state, onMove, onUp, onCancel }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~75");
 }), ({ state, onMove, onUp, onCancel }) => __foldkitBrandViewResult((Effect.sync(() => {
     cancelAnimationFrame(state.frame);
     document.removeEventListener("pointermove", onMove);
     document.removeEventListener("pointerup", onUp);
     document.removeEventListener("pointercancel", onCancel);
-})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~68"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~65"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#pointerMessages");
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~77"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~74"))), "@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) {
@@ -619,11 +683,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~71");
+    return __foldkitBrandViewResult(({ state, onMove }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~80");
 }), ({ state, onMove }) => __foldkitBrandViewResult((Effect.sync(() => {
     cancelAnimationFrame(state.frame);
     document.removeEventListener("pointermove", onMove);
-})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~73")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~75")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~70"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#edgeScroll");
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~82")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~84")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~79"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#edgeScroll");
 const SplitterHold = Schema.Struct({
     reelHook: Schema.String,
     splitter: Splitter,
@@ -637,12 +701,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~77")), () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~78"))), "@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~86")), () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~87"))), "@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~76")), () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~79"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#scaleOf");
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~85")), () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~88"))), "@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);
@@ -654,25 +718,25 @@ const splitterMessages = (hold) => __foldkitBrandViewResult((Stream.suspend(() =
         moved: (event) => __foldkitBrandViewResult((Message.MovedSplitter({ share: shareOf(event) })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#moved"),
         released: (event) => __foldkitBrandViewResult((Message.ReleasedSplitter({ share: shareOf(event) })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#released"),
         cancelled: () => __foldkitBrandViewResult((Message.CancelledSplitter()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#cancelled"),
-    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~80");
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~89");
 })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#splitterMessages");
 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, paneId, pointerId })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Pointer~3"),
-})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~81"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#pointerHoldOf");
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~90"))), "@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~17"),
-            onSome: (hold) => __foldkitBrandViewResult((Stream.merge(pointerMessages(hold), markDragging)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~16"),
+            onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~19"),
+            onSome: (hold) => __foldkitBrandViewResult((Stream.merge(pointerMessages(hold), markDragging)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~18"),
         })), "@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~18"), onSome: edgeScroll })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#dependenciesToStream~2"),
+        dependenciesToStream: ({ maybeHold }) => __foldkitBrandViewResult((Option.match(maybeHold, { onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~20"), onSome: edgeScroll })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#dependenciesToStream~2"),
     }),
     resize: entry({ maybeHold: Schema.Option(SplitterHold) }, {
         modelToDependencies: (model) => (__foldkitBrandViewResult(({
@@ -682,11 +746,11 @@ const reelSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResu
                 pointerId,
                 pressX,
                 pressY,
-            }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~83"))),
+            }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~92"))),
         }), "@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~19"),
-            onSome: (hold) => __foldkitBrandViewResult((Stream.merge(splitterMessages(hold), markDragging)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~17"),
+            onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~21"),
+            onSome: (hold) => __foldkitBrandViewResult((Stream.merge(splitterMessages(hold), markDragging)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~19"),
         })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#dependenciesToStream~3"),
     }),
     escape: entry({ isHolding: Schema.Boolean }, {
@@ -695,7 +759,7 @@ 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~82")));
+}), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~91")));
 /** 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
@@ -710,8 +774,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~84");
-    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#execute~5"),
+        return __foldkitBrandViewResult((Message.CompletedSizeLiftedPane()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~93");
+    })), "@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. */
@@ -723,34 +787,36 @@ const HELD_STEPS = {
     ArrowRight: "Right",
 };
 const isDropKey = (key) => __foldkitBrandViewResult((key === " " || key === "Enter"), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#isDropKey");
+/** The anchor every pane is pinned to under tabs: the one slot, the reel's full size. */
+const STAGE_ANCHOR = "--reel-stage";
 /** 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~85"));
+const byId = Order.mapInput(Order.String, (pane) => __foldkitBrandViewResult((pane.id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~94"));
 /** 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.paneId, target))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~87"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~86"))), "@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~88"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#carriedIdOf");
+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~96"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~95"))), "@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~97"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#carriedIdOf");
 const gripView = (model, pane, h) => {
-    const maybeHeldHere = Option.filter(model.maybeHeld, (held) => __foldkitBrandViewResult((held.paneId === pane.id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~89"));
+    const maybeHeldHere = Option.filter(model.maybeHeld, (held) => __foldkitBrandViewResult((held.paneId === pane.id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~98"));
     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~90"));
+    const isKeyboardHeld = Option.exists(maybeHeldHere, (held) => __foldkitBrandViewResult((held.by._tag === "Keyboard"), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~99"));
     // 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~91");
+            return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~100");
         }
         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~92"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~91");
+                : Option.map(Option.fromNullishOr(HELD_STEPS[key]), (step) => __foldkitBrandViewResult((Message.SteppedHeld({ step })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~101"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~100");
         }
         else {
-            return __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGripKey({ paneId: pane.id }), () => __foldkitBrandViewResult((isIdle(model) && isDropKey(key)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~93"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~91");
+            return __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGripKey({ paneId: pane.id }), () => __foldkitBrandViewResult((isIdle(model) && isDropKey(key)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~102"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~100");
         }
     });
-    const onGripPress = h.OnPointerDown((_pointerType, button, _screenX, _screenY, _time, clientX, clientY, pointerId) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGrip({ paneId: pane.id, pointerId, clientX, clientY }), () => __foldkitBrandViewResult((isIdle(model) && button === LEFT_BUTTON), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~95"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~94"));
+    const onGripPress = h.OnPointerDown((_pointerType, button, _screenX, _screenY, _time, clientX, clientY, pointerId) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGrip({ paneId: pane.id, pointerId, clientX, clientY }), () => __foldkitBrandViewResult((isIdle(model) && button === LEFT_BUTTON), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~104"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~103"));
     return __foldkitBrandViewResult((IconButton.view({
         glyph: "grip",
         label: fill(COPY.paneGrip, { pane: pane.label }),
@@ -777,17 +843,17 @@ const reelSplitterAttributes = (model, splitter, h) => __foldkitBrandViewResult(
  *  land before, or the last one when it would land at the end, the carried pane left out. */
 const dropMarkOf = (info, column) => __foldkitBrandViewResult((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~96");
+        return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~105");
     }
-    const others = Array.filter(column.panes, (pane) => __foldkitBrandViewResult((!Option.contains(info.maybeCarriedId, pane.id)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~97"));
+    const others = Array.filter(column.panes, (pane) => __foldkitBrandViewResult((!Option.contains(info.maybeCarriedId, pane.id)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~106"));
     return __foldkitBrandViewResult((Option.orElse(Option.map(Array.get(others, mark.index), ({ id }) => (__foldkitBrandViewResult(({
         paneId: id,
         markClass: " drop-before",
-    }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~98"))), () => __foldkitBrandViewResult((Option.map(Option.filter(Array.last(others), () => __foldkitBrandViewResult((mark.index >= others.length), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~100")), ({ id }) => (__foldkitBrandViewResult(({ paneId: id, markClass: " drop-after" }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~101")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~99"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~96");
+    }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~107"))), () => __foldkitBrandViewResult((Option.map(Option.filter(Array.last(others), () => __foldkitBrandViewResult((mark.index >= others.length), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~109")), ({ id }) => (__foldkitBrandViewResult(({ paneId: id, markClass: " drop-after" }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~110")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~108"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~105");
 })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#dropMarkOf");
-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~102"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#isGapMarked");
+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~111"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#isGapMarked");
 const slotView = (anchors, maybeDropMark, pane, h) => __foldkitBrandViewResult((h.keyed("div")(pane.id, [
-    h.Class(`reel-slot${Option.match(Option.filter(maybeDropMark, ({ paneId }) => __foldkitBrandViewResult((paneId === pane.id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~103")), { onNone: () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~20"), onSome: ({ markClass }) => __foldkitBrandViewResult((markClass), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~18") })}`),
+    h.Class(`reel-slot${Option.match(Option.filter(maybeDropMark, ({ paneId }) => __foldkitBrandViewResult((paneId === pane.id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~112")), { onNone: () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~22"), onSome: ({ markClass }) => __foldkitBrandViewResult((markClass), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~20") })}`),
     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");
@@ -804,13 +870,13 @@ const splitView = (model, above, share, h) => __foldkitBrandViewResult((h.keyed(
 ])), "@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~104")));
+    const total = Number.sumAll(Array.map(column.panes, (pane) => __foldkitBrandViewResult((pane.weight), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~113")));
     const maybeDropMark = dropMarkOf(info, column);
     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~106"))),
+        ...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(anchors, maybeDropMark, pane, h),
-    ]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~105"));
-    const maybeNextId = Option.map(Array.get(layout, index + 1), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~107"));
+    ]), "@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"),
@@ -834,24 +900,28 @@ const columnView = (info, anchors, column, index, h) => {
 };
 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.
+    // NOTE: the panes keep one order in the page, by id, whatever the layout or the arrangement:
+    // a move or a change to tabs 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. Under tabs the panes behind the focused one are hidden, not removed, and
+    // keep their size, so a terminal sized by its box is not resized as the tabs change.
     return __foldkitBrandViewResult((h.div([h.Class("reel-panes")], Array.map(panes, (pane) => {
         const isFocused = Option.contains(info.maybeFocusedId, pane.id);
         const isHeld = Option.contains(info.maybeCarriedId, pane.id);
+        const isBehind = info.isTabbed && !isFocused;
         return __foldkitBrandViewResult((h.keyed("div")(pane.id, [
-            h.Class(`reel-pane${isFocused ? " focused" : ""}${isHeld ? " drag-dim" : ""}`),
+            h.Class(`reel-pane${isFocused ? " focused" : ""}${isHeld ? " drag-dim" : ""}${isBehind ? " behind" : ""}`),
             h.DataAttribute("reel-pane", paneHook(model, pane.id)),
             h.Style({ "--reel-anchor": anchors.get(pane.id) ?? "none" }),
             h.Tabindex(-1),
+            ...(isBehind ? [h.Inert(true)] : []),
             h.OnFocusEnter(Message.FocusedPane({ paneId: pane.id })),
         ], [
             info.toPaneView(pane, {
-                grip: gripView(model, pane, h),
+                lead: info.isTabbed ? [] : [gripView(model, pane, h)],
                 id: `${model.id}-${pane.id}`,
             }),
-        ])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~108");
+        ])), "@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 pane's title bar, drawn by the reel from its label,
@@ -877,11 +947,35 @@ const liftedCopyView = (info, h) => {
                     h.h2([], [heldLabel(layout, held)]),
                 ]),
             ]),
-        ]), () => __foldkitBrandViewResult((isCarrying), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~110"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Pointer~4"),
-    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~109")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#liftedCopyView");
+        ]), () => __foldkitBrandViewResult((isCarrying), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~119"))), "@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 tab list under tabs: a tab per pane in reading order, the focused pane's selected. A
+ *  press shows its pane and puts the keyboard in it; the side arrows (wrapping), Home and End
+ *  select as they move and keep the keyboard on the tabs, only the selected tab being in the
+ *  Tab order. A modified arrow is the application's. */
+const tabListView = (info, label, toTabLeadView, h) => {
+    const { model, layout } = info;
+    const panes = readingOrder(layout);
+    const stepTo = (index) => __foldkitBrandViewResult((Option.map(Array.get(panes, (index + panes.length) % panes.length), ({ id }) => __foldkitBrandViewResult((Message.SteppedTab({ paneId: id })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~120"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#stepTo");
+    const keyOf = (index, key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.when("ArrowLeft", () => __foldkitBrandViewResult((stepTo(index - 1)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~121")), Match.when("ArrowRight", () => __foldkitBrandViewResult((stepTo(index + 1)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~122")), Match.when("Home", () => __foldkitBrandViewResult((stepTo(0)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~123")), Match.when("End", () => __foldkitBrandViewResult((stepTo(panes.length - 1)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~124")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~125")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#keyOf");
+    return __foldkitBrandViewResult((h.div([h.Class("nav tabs reel-tabs"), h.Role("tablist"), h.AriaLabel(label)], Array.map(panes, (pane, index) => {
+        const isSelected = Option.contains(info.maybeFocusedId, pane.id);
+        return __foldkitBrandViewResult((h.keyed("button")(pane.id, [
+            h.Type("button"),
+            h.Role("tab"),
+            h.AriaSelected(isSelected),
+            h.AriaControls(`${model.id}-${pane.id}`),
+            h.Tabindex(isSelected ? 0 : -1),
+            h.DataAttribute("reel-tab", tabHook(model, pane.id)),
+            h.OnClick(Message.PressedTab({ paneId: pane.id })),
+            h.OnKeyDownPreventDefault((key, modifiers) => __foldkitBrandViewResult((isPlain(modifiers) ? keyOf(index, key) : Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~127")),
+        ], [...toTabLeadView(pane), h.span([h.Class("reel-tab-words")], [pane.label])])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~126");
+    }))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#tabListView");
 };
+const NO_TAB_LEAD = () => __foldkitBrandViewResult(([]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#NO_TAB_LEAD");
 /** 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~111")), { onNone: () => __foldkitBrandViewResult((layout), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~21"), onSome: (resize) => __foldkitBrandViewResult((apply(layout, resize)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~19") })), "@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~128")), { onNone: () => __foldkitBrandViewResult((layout), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~23"), onSome: (resize) => __foldkitBrandViewResult((apply(layout, resize)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~21") })), "@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
@@ -895,33 +989,56 @@ const previewed = (model, layout) => __foldkitBrandViewResult((Option.match(Opti
  * 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.
+ *
+ * Under tabs (`arrangement: "Tabs"`) the reel is `div.reel.tabbed`: a `div.nav.tabs.reel-tabs`
+ * tab list over the scroller, whose track holds one `div.reel-slot.reel-stage` at the reel's
+ * full size where the columns were. Every pane is pinned to it, the focused one shown and the
+ * others `.behind`, hidden and inert; there are no grips and no splitters.
  */
 export const view = defineView((model, viewInputs, h) => {
-    const { label, toPaneView } = viewInputs;
+    const { label, toPaneView, arrangement = "Strip", toTabLeadView = NO_TAB_LEAD } = viewInputs;
+    const isTabbed = arrangement === "Tabs";
     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~113")), byId);
-    const anchors = new Map(Array.map(panes, (pane, index) => __foldkitBrandViewResult(([pane.id, anchorName(index)]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~114")));
+    const panes = Array.sort(Array.flatMap(layout, (column) => __foldkitBrandViewResult((column.panes), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~130")), byId);
+    const anchors = new Map(Array.map(panes, (pane, index) => __foldkitBrandViewResult(([pane.id, isTabbed ? STAGE_ANCHOR : anchorName(index)]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~131")));
     const info = {
         model,
         layout,
+        isTabbed,
         toPaneView,
         maybeFocusedId: focusedPaneId(model, layout),
         maybeMark: markOf(model, layout),
         maybeCarriedId: carriedIdOf(model),
     };
-    return __foldkitBrandViewResult((h.div([h.Class("reel"), h.Role("group"), h.AriaLabel(label), h.DataAttribute("reel", model.id)], [
+    const strip = () => __foldkitBrandViewResult(([
+        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~132")))
+                ? " drop-here"
+                : ""}`),
+        ]),
+        ...Array.flatMap(layout, (column, index) => __foldkitBrandViewResult((columnView(info, anchors, column, index, h)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~133")),
+    ]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#strip");
+    return __foldkitBrandViewResult((h.div([
+        h.Class(isTabbed ? "reel tabbed" : "reel"),
+        h.Role("group"),
+        h.AriaLabel(label),
+        h.DataAttribute("reel", model.id),
+    ], [
+        ...(isTabbed ? [tabListView(info, label, toTabLeadView, h)] : []),
         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~115")))
-                        ? " drop-here"
-                        : ""}`),
-                ]),
-                ...Array.flatMap(layout, (column, index) => __foldkitBrandViewResult((columnView(info, anchors, column, index, h)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~116")),
+                ...(isTabbed
+                    ? [
+                        h.div([
+                            h.Class("reel-slot reel-stage"),
+                            h.Style({ "--reel-anchor": STAGE_ANCHOR }),
+                        ]),
+                    ]
+                    : strip()),
                 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~112");
+    ])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~129");
 });