@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.1

package/dist/reel/reel.js

@@ -0,0 +1,1019 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { announce as announce$1 } from "../announcer/announcer.js";
+import { view as view$1 } from "../glyph/glyph.js";
+import { pressedAttribute } from "../button/button.js";
+import { isPlain } from "../keys/keys.js";
+import { escapeKeys, markDragging, measureLift, pointerMessages as pointerMessages$1, splitterAttributes } from "../drag/drag.js";
+import { view as view$2 } from "../icon-button/icon-button.js";
+import { prefixKeys } from "../subscription/prefix-keys.js";
+import { htmlElement } from "../dom/html-element.js";
+import { OutMessage, Resize, Splitter, Step, Subject, Target, WHERE_IT_WAS, apply, columnOfTarget, fill, firstPlace, isChange, isSplitterPresent, isTargetPresent, landingWords, nextPreset, originOf, placeAt, placeOf, placeWords, requestOf, resizeOf, steppedTarget, subjectWords, targetAtPoint, whereWords, widthWords } from "./layout.js";
+import { Array, Effect, Equal, Match, Number, Option, Order, Queue, Record, Schema, Stream, String } from "effect";
+import * as Command from "foldkit/command";
+import { defineMessageUnion } from "foldkit/message";
+import * as Render from "foldkit/render";
+import * as Mount from "foldkit/mount";
+import { modifyFields } from "foldkit/struct";
+import { defineView } from "foldkit/submodel";
+import * as Subscription from "foldkit/subscription";
+import { defineTaggedUnion } from "foldkit/schema";
+// src/reel/reel.ts
+const KEYBOARD_MOVES = "Arrow keys move it, space drops it, escape or tab puts it back.";
+const COPY = {
+	paneGrip: "Move {pane}",
+	gripHelp: `Press space to pick it up. ${KEYBOARD_MOVES}`,
+	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}.",
+	pickedUpByKeyboard: `Picked up {subject}. ${KEYBOARD_MOVES}`,
+	over: "{subject}, {where}.",
+	dropped: "{subject} dropped at {where}.",
+	putBack: "{subject} put back where it was.",
+	cancelled: "Move cancelled. {subject} put back where it was.",
+	gone: "Move cancelled."
+};
+const Focus = Schema.Struct({
+	paneId: Schema.String,
+	column: Schema.Finite,
+	row: Schema.Finite
+});
+const By = defineTaggedUnion({
+	Pointer: {
+		pointerId: Schema.Finite,
+		pressX: Schema.Finite,
+		pressY: Schema.Finite,
+		x: Schema.Finite,
+		y: Schema.Finite,
+		isCarrying: Schema.Boolean
+	},
+	Keyboard: {}
+});
+const Held = Schema.Struct({
+	paneId: Schema.String,
+	by: By,
+	maybeTarget: Schema.Option(Target)
+});
+const Resizing = Schema.Struct({
+	splitter: Splitter,
+	pointerId: Schema.Finite,
+	pressX: Schema.Finite,
+	pressY: Schema.Finite,
+	maybeResize: Schema.Option(Resize)
+});
+/** Schema for a reel: its id, the focused pane, what is held and a splitter being dragged. All
+*  of it is this client's; the layout is the application's. */
+const Model = Schema.Struct({
+	id: Schema.String,
+	maybeFocus: Schema.Option(Focus),
+	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. */
+const Arrangement = Schema.Literals(["Strip", "Tabs"]);
+const PointerAt = Schema.Struct({
+	clientX: Schema.Finite,
+	clientY: Schema.Finite,
+	maybeTarget: Schema.Option(Target)
+});
+/** Union of all Messages a reel can produce. */
+const Message = defineMessageUnion({
+	PressedGrip: {
+		paneId: Schema.String,
+		pointerId: Schema.Finite,
+		clientX: Schema.Finite,
+		clientY: Schema.Finite
+	},
+	PressedGripKey: { paneId: Schema.String },
+	MovedPointer: PointerAt.fields,
+	ReleasedPointer: PointerAt.fields,
+	CancelledPointer: {},
+	SteppedHeld: { step: Step },
+	DroppedHeld: {},
+	LeftGrip: {},
+	PressedEscape: {},
+	FocusedPane: { paneId: Schema.String },
+	PressedTab: { paneId: Schema.String },
+	SteppedTab: { paneId: Schema.String },
+	PressedSplitter: {
+		splitter: Splitter,
+		pointerId: Schema.Finite,
+		clientX: Schema.Finite,
+		clientY: Schema.Finite
+	},
+	MovedSplitter: { share: Schema.Finite },
+	ReleasedSplitter: { share: Schema.Finite },
+	CancelledSplitter: {},
+	PressedSplitterKey: {
+		splitter: Splitter,
+		share: Schema.Finite
+	},
+	CompletedAnnounceReel: {},
+	CompletedFocusPane: {},
+	CompletedFocusTab: {},
+	CompletedRestoreFocus: {},
+	CompletedScrollIntoView: {},
+	CompletedSizeLiftedPane: {}
+});
+/** Creates a reel focused on its first pane, holding nothing, at rest. */
+const init = (config) => (__foldkitBrandViewResult(({
+	id: config.id,
+	maybeFocus: Option.none(),
+	maybeHeld: Option.none(),
+	maybeResizing: Option.none()
+}), "@gjermundgaraba/pixel-paper/reel/reel.js#init"));
+const focusedPlace = (model, layout) => __foldkitBrandViewResult((Option.orElse(Option.flatMap(model.maybeFocus, (focus) => __foldkitBrandViewResult((Option.orElse(placeOf(layout, focus.paneId), () => {
+	const column = Number.clamp(focus.column, {
+		minimum: 0,
+		maximum: layout.length - 1
+	});
+	const rows = Option.match(Array.get(layout, column), {
+		onNone: () => __foldkitBrandViewResult((0), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone"),
+		onSome: (found) => __foldkitBrandViewResult((found.panes.length), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome")
+	});
+	return __foldkitBrandViewResult((placeAt(layout, column, Number.clamp(focus.row, {
+		minimum: 0,
+		maximum: rows - 1
+	}))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~2");
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous")), () => __foldkitBrandViewResult((firstPlace(layout)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~3"))), "@gjermundgaraba/pixel-paper/reel/reel.js#focusedPlace");
+/** The pane focus is on: the one last focused, or, when it has gone from `layout`, the pane
+*  now nearest its place; the first pane before any is focused. None for an empty layout. */
+const focusedPaneId = (model, layout) => __foldkitBrandViewResult((Option.map(focusedPlace(model, layout), ({ pane }) => __foldkitBrandViewResult((pane.id), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~4"))), "@gjermundgaraba/pixel-paper/reel/reel.js#focusedPaneId");
+const isHolding = (model) => __foldkitBrandViewResult((Option.isSome(model.maybeHeld)), "@gjermundgaraba/pixel-paper/reel/reel.js#isHolding");
+const isIdle = (model) => __foldkitBrandViewResult((!isHolding(model) && Option.isNone(model.maybeResizing)), "@gjermundgaraba/pixel-paper/reel/reel.js#isIdle");
+const isCarried = (held) => __foldkitBrandViewResult((By.match(held.by, {
+	Pointer: ({ isCarrying }) => __foldkitBrandViewResult((isCarrying), "@gjermundgaraba/pixel-paper/reel/reel.js#Pointer"),
+	Keyboard: () => __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/reel/reel.js#Keyboard")
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#isCarried");
+const paneHook = (model, paneId) => __foldkitBrandViewResult((`${model.id}/pane/${paneId}`), "@gjermundgaraba/pixel-paper/reel/reel.js#paneHook");
+const columnHook = (model, columnId) => __foldkitBrandViewResult((`${model.id}/column/${columnId}`), "@gjermundgaraba/pixel-paper/reel/reel.js#columnHook");
+const tabHook = (model, paneId) => __foldkitBrandViewResult((`${model.id}/tab/${paneId}`), "@gjermundgaraba/pixel-paper/reel/reel.js#tabHook");
+const scrollerOf = (reelHook) => __foldkitBrandViewResult((htmlElement(`[data-reel="${CSS.escape(reelHook)}"] > .reel-view`)), "@gjermundgaraba/pixel-paper/reel/reel.js#scrollerOf");
+const paneElement = (hook) => __foldkitBrandViewResult((htmlElement(`[data-reel-pane="${CSS.escape(hook)}"]`)), "@gjermundgaraba/pixel-paper/reel/reel.js#paneElement");
+const focusInto = (pane) => {
+	Option.getOrElse(htmlElement("[data-reel-focus]", pane), () => __foldkitBrandViewResult((pane), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~5")).focus({ preventScroll: true });
+};
+/** Says a focus move, a move or a step of a drag through the page's live region (as
+*  `Announcer.Announce` does). */
+const AnnounceReel = Command.define("AnnounceReel", {
+	args: { text: Schema.String },
+	messages: [Message.CompletedAnnounceReel],
+	execute: ({ text }) => __foldkitBrandViewResult((announce$1(text).pipe(Effect.as(Message.CompletedAnnounceReel()))), "@gjermundgaraba/pixel-paper/reel/reel.js#execute")
+});
+/** Focuses the pane `paneHook` names, unless focus is already inside it: the control in it
+*  marked `data-reel-focus` (a terminal's input), or the pane itself. It does not scroll;
+*  ScrollIntoView does. */
+const FocusPane = Command.define("FocusPane", {
+	args: { paneHook: Schema.String },
+	messages: [Message.CompletedFocusPane],
+	execute: ({ paneHook: hook }) => __foldkitBrandViewResult((Effect.gen(function* () {
+		yield* Render.afterCommit;
+		yield* Effect.sync(() => {
+			Option.map(Option.filter(paneElement(hook), (pane) => __foldkitBrandViewResult((!pane.contains(document.activeElement)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~8")), focusInto);
+		});
+		return __foldkitBrandViewResult((Message.CompletedFocusPane()), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~6");
+	})), "@gjermundgaraba/pixel-paper/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. */
+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(() => {
+			Option.map(htmlElement(`[data-reel-tab="${CSS.escape(hook)}"]`), (tab) => {
+				tab.focus();
+			});
+		});
+		return __foldkitBrandViewResult((Message.CompletedFocusTab()), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~9");
+	})), "@gjermundgaraba/pixel-paper/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. */
+const RestoreFocus = Command.define("RestoreFocus", {
+	args: { paneHook: Schema.String },
+	messages: [Message.CompletedRestoreFocus],
+	execute: ({ paneHook: hook }) => __foldkitBrandViewResult((Effect.gen(function* () {
+		yield* Render.afterCommit;
+		yield* Effect.sync(() => {
+			const active = document.activeElement;
+			if (active === null || active === document.body) Option.map(paneElement(hook), focusInto);
+		});
+		return __foldkitBrandViewResult((Message.CompletedRestoreFocus()), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~12");
+	})), "@gjermundgaraba/pixel-paper/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. */
+const ScrollIntoView = Command.define("ScrollIntoView", {
+	args: { hook: Schema.String },
+	messages: [Message.CompletedScrollIntoView],
+	execute: ({ hook }) => __foldkitBrandViewResult((Effect.gen(function* () {
+		yield* Render.afterCommit;
+		yield* Effect.sync(() => {
+			document.querySelector(`[data-reel-pane="${CSS.escape(hook)}"], [data-reel-hook="${CSS.escape(hook)}"]`)?.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+		});
+		return __foldkitBrandViewResult((Message.CompletedScrollIntoView()), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~14");
+	})), "@gjermundgaraba/pixel-paper/reel/reel.js#execute~5")
+});
+const CARRY_THRESHOLD = 5;
+const withHeld = (model, maybeHeld) => __foldkitBrandViewResult((modifyFields(model, { maybeHeld: () => __foldkitBrandViewResult((maybeHeld), "@gjermundgaraba/pixel-paper/reel/reel.js#maybeHeld") })), "@gjermundgaraba/pixel-paper/reel/reel.js#withHeld");
+const withResizing = (model, maybeResizing) => __foldkitBrandViewResult((modifyFields(model, { maybeResizing: () => __foldkitBrandViewResult((maybeResizing), "@gjermundgaraba/pixel-paper/reel/reel.js#maybeResizing") })), "@gjermundgaraba/pixel-paper/reel/reel.js#withResizing");
+const focusOn = (model, place) => __foldkitBrandViewResult((modifyFields(model, { maybeFocus: () => __foldkitBrandViewResult((Option.some({
+	paneId: place.pane.id,
+	column: place.columnIndex,
+	row: place.row
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#maybeFocus") })), "@gjermundgaraba/pixel-paper/reel/reel.js#focusOn");
+const announce = (text) => __foldkitBrandViewResult((AnnounceReel({ text })), "@gjermundgaraba/pixel-paper/reel/reel.js#announce");
+const heldLabel = (layout, held) => __foldkitBrandViewResult((Option.getOrElse(subjectWords(layout, Subject.Pane({ paneId: held.paneId })), () => __foldkitBrandViewResult((""), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~16"))), "@gjermundgaraba/pixel-paper/reel/reel.js#heldLabel");
+const heldWords = (layout, held) => __foldkitBrandViewResult((String.capitalize(heldLabel(layout, held))), "@gjermundgaraba/pixel-paper/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/pixel-paper/reel/reel.js#anonymous~17")))), "@gjermundgaraba/pixel-paper/reel/reel.js#scrollToTarget");
+const letGo = (model, layout, held, putBack) => {
+	const released = withHeld(model, Option.none());
+	if (!isCarried(held)) return __foldkitBrandViewResult(({ model: released }), "@gjermundgaraba/pixel-paper/reel/reel.js#letGo");
+	const subject = heldWords(layout, held);
+	const maybeRequest = Option.flatMap(held.maybeTarget, (target) => __foldkitBrandViewResult((requestOf(layout, held.paneId, target)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~18"));
+	return __foldkitBrandViewResult((Option.match(maybeRequest, {
+		onNone: () => (__foldkitBrandViewResult(({
+			model: released,
+			commands: [announce(fill(putBack, { subject }))]
+		}), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~2")),
+		onSome: (request) => (__foldkitBrandViewResult(({
+			model: released,
+			commands: [announce(fill(COPY.dropped, {
+				subject,
+				where: Option.getOrElse(whereWords(apply(layout, request), Subject.Pane({ paneId: held.paneId })), () => __foldkitBrandViewResult((WHERE_IT_WAS), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~19"))
+			}))],
+			outMessage: request
+		}), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~2"))
+	})), "@gjermundgaraba/pixel-paper/reel/reel.js#letGo");
+};
+const cancel = (model, layout, held) => __foldkitBrandViewResult((letGo(model, layout, {
+	...held,
+	maybeTarget: Option.none()
+}, COPY.cancelled)), "@gjermundgaraba/pixel-paper/reel/reel.js#cancel");
+const lift = (model, layout, paneId, by) => __foldkitBrandViewResult((Option.match(Option.filter(originOf(layout, paneId), () => __foldkitBrandViewResult((isIdle(model)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~20")), {
+	onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~3")),
+	onSome: (origin) => {
+		const held = {
+			paneId,
+			by,
+			maybeTarget: Option.some(origin)
+		};
+		return __foldkitBrandViewResult(({
+			model: withHeld(model, Option.some(held)),
+			commands: by._tag === "Keyboard" ? [announce(fill(COPY.pickedUpByKeyboard, { subject: heldWords(layout, held) }))] : []
+		}), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~3");
+	}
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#lift");
+const movePointer = (model, layout, held, pointer) => __foldkitBrandViewResult((By.match(held.by, {
+	Keyboard: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#Keyboard~2")),
+	Pointer: (by) => {
+		const isCarrying = by.isCarrying || Math.hypot(pointer.clientX - by.pressX, pointer.clientY - by.pressY) > CARRY_THRESHOLD;
+		const next = {
+			...held,
+			by: By.Pointer({
+				...by,
+				x: pointer.clientX,
+				y: pointer.clientY,
+				isCarrying
+			}),
+			maybeTarget: isCarrying ? pointer.maybeTarget : held.maybeTarget
+		};
+		return __foldkitBrandViewResult(({
+			model: withHeld(model, Option.some(next)),
+			commands: isCarrying && !by.isCarrying ? [announce(fill(COPY.pickedUp, { subject: heldWords(layout, held) }))] : []
+		}), "@gjermundgaraba/pixel-paper/reel/reel.js#Pointer~2");
+	}
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#movePointer");
+const stepHeld = (model, layout, held, step) => __foldkitBrandViewResult((Option.match(Option.filter(held.maybeTarget, () => __foldkitBrandViewResult((held.by._tag === "Keyboard"), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~21")), {
+	onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~4")),
+	onSome: (target) => {
+		const next = steppedTarget(layout, held.paneId, target, step);
+		if (Equal.equals(next, target)) return __foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~4");
+		return __foldkitBrandViewResult(({
+			model: withHeld(model, Option.some({
+				...held,
+				maybeTarget: Option.some(next)
+			})),
+			commands: [announce(fill(COPY.over, {
+				subject: heldWords(layout, held),
+				where: landingWords(layout, held.paneId, next)
+			})), ...scrollToTarget(model, layout, next)]
+		}), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~4");
+	}
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#stepHeld");
+const whileHeld = (model, f) => __foldkitBrandViewResult((Option.match(model.maybeHeld, {
+	onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~5")),
+	onSome: f
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#whileHeld");
+const whileHeldBy = (model, by, f) => __foldkitBrandViewResult((whileHeld(model, (held) => __foldkitBrandViewResult((held.by._tag === by ? f(held) : { model }), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~22"))), "@gjermundgaraba/pixel-paper/reel/reel.js#whileHeldBy");
+const resizeSplitter = (model, layout, share, isLetGo) => __foldkitBrandViewResult((Option.match(model.maybeResizing, {
+	onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~6")),
+	onSome: (resizing) => {
+		const maybeResize = resizeOf(layout, resizing.splitter, share);
+		if (!isLetGo) return __foldkitBrandViewResult(({ model: withResizing(model, Option.some({
+			...resizing,
+			maybeResize
+		})) }), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~5");
+		return __foldkitBrandViewResult((Option.match(maybeResize, {
+			onNone: () => (__foldkitBrandViewResult(({ model: withResizing(model, Option.none()) }), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~7")),
+			onSome: (resize) => (__foldkitBrandViewResult(({
+				model: withResizing(model, Option.none()),
+				outMessage: resize
+			}), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~6"))
+		})), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~5");
+	}
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#resizeSplitter");
+const selectTab = (model, layout, paneId, focus) => __foldkitBrandViewResult((Option.match(placeOf(layout, paneId), {
+	onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~8")),
+	onSome: (place) => (__foldkitBrandViewResult(({
+		model: focusOn(model, place),
+		commands: [focus]
+	}), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~7"))
+})), "@gjermundgaraba/pixel-paper/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. */
+const update = (model, message, context) => {
+	const { layout } = context;
+	return __foldkitBrandViewResult((Message.match(message, {
+		PressedGrip: ({ paneId, pointerId, clientX, clientY }) => __foldkitBrandViewResult((lift(model, layout, paneId, By.Pointer({
+			pointerId,
+			pressX: clientX,
+			pressY: clientY,
+			x: clientX,
+			y: clientY,
+			isCarrying: false
+		}))), "@gjermundgaraba/pixel-paper/reel/reel.js#PressedGrip"),
+		PressedGripKey: ({ paneId }) => __foldkitBrandViewResult((lift(model, layout, paneId, By.Keyboard())), "@gjermundgaraba/pixel-paper/reel/reel.js#PressedGripKey"),
+		MovedPointer: (pointer) => __foldkitBrandViewResult((whileHeldBy(model, "Pointer", (held) => __foldkitBrandViewResult((movePointer(model, layout, held, pointer)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~23"))), "@gjermundgaraba/pixel-paper/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/pixel-paper/reel/reel.js#anonymous~24"))), "@gjermundgaraba/pixel-paper/reel/reel.js#ReleasedPointer"),
+		CancelledPointer: () => __foldkitBrandViewResult((whileHeldBy(model, "Pointer", (held) => __foldkitBrandViewResult((letGo(model, layout, {
+			...held,
+			maybeTarget: Option.none()
+		}, COPY.putBack)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~25"))), "@gjermundgaraba/pixel-paper/reel/reel.js#CancelledPointer"),
+		SteppedHeld: ({ step }) => __foldkitBrandViewResult((whileHeldBy(model, "Keyboard", (held) => __foldkitBrandViewResult((stepHeld(model, layout, held, step)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~26"))), "@gjermundgaraba/pixel-paper/reel/reel.js#SteppedHeld"),
+		DroppedHeld: () => __foldkitBrandViewResult((whileHeldBy(model, "Keyboard", (held) => __foldkitBrandViewResult((letGo(model, layout, held, COPY.putBack)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~27"))), "@gjermundgaraba/pixel-paper/reel/reel.js#DroppedHeld"),
+		LeftGrip: () => __foldkitBrandViewResult((whileHeldBy(model, "Keyboard", (held) => __foldkitBrandViewResult((cancel(model, layout, held)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~28"))), "@gjermundgaraba/pixel-paper/reel/reel.js#LeftGrip"),
+		PressedEscape: () => __foldkitBrandViewResult((Option.isSome(model.maybeResizing) ? { model: withResizing(model, Option.none()) } : whileHeld(model, (held) => __foldkitBrandViewResult((cancel(model, layout, held)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~29"))), "@gjermundgaraba/pixel-paper/reel/reel.js#PressedEscape"),
+		PressedTab: ({ paneId }) => __foldkitBrandViewResult((selectTab(model, layout, paneId, FocusPane({ paneHook: paneHook(model, paneId) }))), "@gjermundgaraba/pixel-paper/reel/reel.js#PressedTab"),
+		SteppedTab: ({ paneId }) => __foldkitBrandViewResult((selectTab(model, layout, paneId, FocusTab({ tabHook: tabHook(model, paneId) }))), "@gjermundgaraba/pixel-paper/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/pixel-paper/reel/reel.js#anonymous~31"))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~30")), {
+			onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~9")),
+			onSome: (place) => (__foldkitBrandViewResult(({ model: focusOn(model, place) }), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~8"))
+		})), "@gjermundgaraba/pixel-paper/reel/reel.js#FocusedPane"),
+		PressedSplitter: ({ splitter, pointerId, clientX, clientY }) => __foldkitBrandViewResult((!isIdle(model) || !isSplitterPresent(layout, splitter) ? { model } : { model: withResizing(model, Option.some({
+			splitter,
+			pointerId,
+			pressX: clientX,
+			pressY: clientY,
+			maybeResize: Option.none()
+		})) }), "@gjermundgaraba/pixel-paper/reel/reel.js#PressedSplitter"),
+		MovedSplitter: ({ share }) => __foldkitBrandViewResult((resizeSplitter(model, layout, share, false)), "@gjermundgaraba/pixel-paper/reel/reel.js#MovedSplitter"),
+		ReleasedSplitter: ({ share }) => __foldkitBrandViewResult((resizeSplitter(model, layout, share, true)), "@gjermundgaraba/pixel-paper/reel/reel.js#ReleasedSplitter"),
+		CancelledSplitter: () => (__foldkitBrandViewResult(({ model: withResizing(model, Option.none()) }), "@gjermundgaraba/pixel-paper/reel/reel.js#CancelledSplitter")),
+		PressedSplitterKey: ({ splitter, share }) => __foldkitBrandViewResult((Option.match(resizeOf(layout, splitter, share), {
+			onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~10")),
+			onSome: (resize) => (__foldkitBrandViewResult(({
+				model,
+				outMessage: resize
+			}), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~9"))
+		})), "@gjermundgaraba/pixel-paper/reel/reel.js#PressedSplitterKey"),
+		CompletedAnnounceReel: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#CompletedAnnounceReel")),
+		CompletedFocusPane: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#CompletedFocusPane")),
+		CompletedFocusTab: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#CompletedFocusTab")),
+		CompletedRestoreFocus: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#CompletedRestoreFocus")),
+		CompletedScrollIntoView: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#CompletedScrollIntoView")),
+		CompletedSizeLiftedPane: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#CompletedSizeLiftedPane"))
+	})), "@gjermundgaraba/pixel-paper/reel/reel.js#update");
+};
+/**
+* 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 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.
+*/
+const reconcile = (model, context) => {
+	const { layout } = context;
+	const isFocusGone = Option.exists(model.maybeFocus, (focus) => __foldkitBrandViewResult((Option.isNone(placeOf(layout, focus.paneId))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~32"));
+	const maybePlace = Option.filter(focusedPlace(model, layout), () => __foldkitBrandViewResult((Option.isSome(model.maybeFocus)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~33"));
+	const focused = Option.match(maybePlace, {
+		onNone: () => __foldkitBrandViewResult((model), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~11"),
+		onSome: (place) => __foldkitBrandViewResult((focusOn(model, place)), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~10")
+	});
+	const restore = Array.fromOption(Option.map(Option.filter(maybePlace, () => __foldkitBrandViewResult((isFocusGone), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~34")), (place) => __foldkitBrandViewResult((RestoreFocus({ paneHook: paneHook(model, place.pane.id) })), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~35")));
+	const settled = Option.exists(model.maybeResizing, ({ splitter }) => __foldkitBrandViewResult((isSplitterPresent(layout, splitter)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~36")) ? focused : withResizing(focused, Option.none());
+	return __foldkitBrandViewResult((Option.match(settled.maybeHeld, {
+		onNone: () => (__foldkitBrandViewResult(({
+			model: settled,
+			commands: restore
+		}), "@gjermundgaraba/pixel-paper/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/pixel-paper/reel/reel.js#onSome~11");
+			const maybeTarget = Option.orElse(Option.filter(held.maybeTarget, (target) => __foldkitBrandViewResult((isTargetPresent(layout, target)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~37")), () => __foldkitBrandViewResult((held.by._tag === "Keyboard" ? originOf(layout, held.paneId) : Option.none()), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~38"));
+			return __foldkitBrandViewResult(({
+				model: withHeld(settled, Option.some({
+					...held,
+					maybeTarget
+				})),
+				commands: restore
+			}), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~11");
+		}
+	})), "@gjermundgaraba/pixel-paper/reel/reel.js#reconcile");
+};
+/** What the application's keys ask of the reel. `Focus*`: focus the pane beside the focused
+*  one. `MovePane*`: move the focused pane up or down its column, or into the column beside it
+*  (past the first or last column, into a column of its own). `MoveColumn*`: move its column.
+*  `CycleWidth`: its column's width to the next preset. `PullOut`: the pane into a column of
+*  its own, right of its column. */
+const Action = Schema.Literals([
+	"FocusLeft",
+	"FocusRight",
+	"FocusUp",
+	"FocusDown",
+	"MovePaneLeft",
+	"MovePaneRight",
+	"MovePaneUp",
+	"MovePaneDown",
+	"MoveColumnLeft",
+	"MoveColumnRight",
+	"CycleWidth",
+	"PullOut"
+]);
+const focusStep = (model, layout, place) => (__foldkitBrandViewResult(({
+	model: focusOn(model, place),
+	commands: [
+		FocusPane({ paneHook: paneHook(model, place.pane.id) }),
+		ScrollIntoView({ hook: paneHook(model, place.pane.id) }),
+		announce(fill(COPY.focused, {
+			pane: place.pane.label,
+			where: placeWords(layout, place)
+		}))
+	]
+}), "@gjermundgaraba/pixel-paper/reel/reel.js#focusStep"));
+const requestStep = (model, layout, place, subject, maybeRequest) => __foldkitBrandViewResult((Option.match(Option.filter(maybeRequest, (request) => __foldkitBrandViewResult((isChange(layout, request)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~39")), {
+	onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~13")),
+	onSome: (request) => {
+		const next = apply(layout, request);
+		const landing = Option.getOrElse(placeOf(next, place.pane.id), () => __foldkitBrandViewResult((place), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~40"));
+		const words = Option.getOrElse(subjectWords(layout, subject), () => __foldkitBrandViewResult((place.pane.label), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~41"));
+		const where = Option.getOrElse(whereWords(next, subject), () => __foldkitBrandViewResult((WHERE_IT_WAS), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~42"));
+		return __foldkitBrandViewResult(({
+			model: focusOn(model, landing),
+			commands: [ScrollIntoView({ hook: paneHook(model, place.pane.id) }), announce(fill(COPY.moved, {
+				subject: String.capitalize(words),
+				where
+			}))],
+			outMessage: request
+		}), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~12");
+	}
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#requestStep");
+const readingOrder = (layout) => __foldkitBrandViewResult((Array.flatMap(layout, (column) => __foldkitBrandViewResult((column.panes), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~43"))), "@gjermundgaraba/pixel-paper/reel/reel.js#readingOrder");
+const TAB_STEPS = {
+	FocusLeft: -1,
+	FocusUp: -1,
+	FocusRight: 1,
+	FocusDown: 1
+};
+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/pixel-paper/reel/reel.js#anonymous~45"))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~44"))
+	}), ({ 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/pixel-paper/reel/reel.js#anonymous~48")))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~47"))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~46"));
+	return __foldkitBrandViewResult((Option.match(Option.filter(maybeNext, () => __foldkitBrandViewResult((!isHolding(model)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~49")), {
+		onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/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/pixel-paper/reel/reel.js#onSome~13"))
+	})), "@gjermundgaraba/pixel-paper/reel/reel.js#performTabbed");
+};
+const columnIdAt = (layout, index) => __foldkitBrandViewResult((Option.map(Array.get(layout, index), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~50"))), "@gjermundgaraba/pixel-paper/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. Under tabs, only the focus keys act, stepping from tab
+* to tab.
+*/
+const perform = (model, action, context) => {
+	const { layout, arrangement = "Strip" } = context;
+	if (arrangement === "Tabs") return __foldkitBrandViewResult((performTabbed(model, action, layout)), "@gjermundgaraba/pixel-paper/reel/reel.js#perform");
+	return __foldkitBrandViewResult((Option.match(Option.filter(focusedPlace(model, layout), () => __foldkitBrandViewResult((!isHolding(model)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~51")), {
+		onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/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/pixel-paper/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/pixel-paper/reel/reel.js#anonymous~52")), {
+				onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~16")),
+				onSome: (next) => __foldkitBrandViewResult((next.pane.id === paneId ? { model } : focusStep(model, layout, next)), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~15")
+			})), "@gjermundgaraba/pixel-paper/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/pixel-paper/reel/reel.js#onSome~16"),
+				onNone: () => __foldkitBrandViewResult((Option.liftPredicate(OutMessage.PulledOutPane({
+					paneId,
+					maybeBeforeColumnId: edge
+				}), () => __foldkitBrandViewResult((rows > 1), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~53"))), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~17")
+			}))), "@gjermundgaraba/pixel-paper/reel/reel.js#sideways");
+			const moveColumn = (maybeBefore) => __foldkitBrandViewResult((ask(Option.map(maybeBefore, (maybeBeforeColumnId) => __foldkitBrandViewResult((OutMessage.MovedColumn({
+				columnId: column.id,
+				maybeBeforeColumnId
+			})), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~54")), Subject.Column({ columnId: column.id }))), "@gjermundgaraba/pixel-paper/reel/reel.js#moveColumn");
+			return __foldkitBrandViewResult((Match.value(action).pipe(Match.withReturnType(), Match.when("FocusLeft", () => __foldkitBrandViewResult((focusAt(columnIndex - 1, row)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~55")), Match.when("FocusRight", () => __foldkitBrandViewResult((focusAt(columnIndex + 1, row)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~56")), Match.when("FocusUp", () => __foldkitBrandViewResult((row > 0 ? focusAt(columnIndex, row - 1) : { model }), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~57")), Match.when("FocusDown", () => __foldkitBrandViewResult((focusAt(columnIndex, row + 1)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~58")), Match.when("MovePaneUp", () => __foldkitBrandViewResult((ask(Option.some(OutMessage.MovedPane({
+				paneId,
+				toColumnId: column.id,
+				toIndex: row - 1
+			})))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~59")), Match.when("MovePaneDown", () => __foldkitBrandViewResult((ask(Option.some(OutMessage.MovedPane({
+				paneId,
+				toColumnId: column.id,
+				toIndex: row + 1
+			})))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~60")), Match.when("MovePaneLeft", () => __foldkitBrandViewResult((sideways(columnIndex - 1, columnIdAt(layout, 0))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~61")), Match.when("MovePaneRight", () => __foldkitBrandViewResult((sideways(columnIndex + 1, Option.none())), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~62")), Match.when("MoveColumnLeft", () => __foldkitBrandViewResult((moveColumn(Option.map(columnIdAt(layout, columnIndex - 1), (before) => __foldkitBrandViewResult((Option.some(before)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~64")))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~63")), Match.when("MoveColumnRight", () => __foldkitBrandViewResult((moveColumn(Option.map(columnIdAt(layout, columnIndex + 1), () => __foldkitBrandViewResult((columnIdAt(layout, columnIndex + 2)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~66")))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~65")), Match.when("CycleWidth", () => {
+				const width = nextPreset(column.width);
+				return __foldkitBrandViewResult(({
+					model,
+					commands: [ScrollIntoView({ hook: paneHook(model, paneId) }), announce(fill(COPY.widened, {
+						column: columnIndex + 1,
+						width: widthWords(width)
+					}))],
+					outMessage: OutMessage.ResizedColumn({
+						columnId: column.id,
+						width
+					})
+				}), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~67");
+			}), Match.when("PullOut", () => __foldkitBrandViewResult((ask(Option.liftPredicate(OutMessage.PulledOutPane({
+				paneId,
+				maybeBeforeColumnId: columnIdAt(layout, columnIndex + 1)
+			}), () => __foldkitBrandViewResult((rows > 1), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~69")))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~68")), Match.exhaustive)), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~14");
+		}
+	})), "@gjermundgaraba/pixel-paper/reel/reel.js#perform");
+};
+const EDGE_SCROLL = 40;
+const EDGE_SCROLL_PIXELS_PER_MILLI = .8;
+const LONGEST_FRAME_MILLIS = 50;
+const columnBoxOf = (element) => {
+	const rect = element.getBoundingClientRect();
+	return __foldkitBrandViewResult(({
+		id: element.dataset["reelColumn"] ?? "",
+		left: rect.left,
+		right: rect.right
+	}), "@gjermundgaraba/pixel-paper/reel/reel.js#columnBoxOf");
+};
+const slotMiddlesOf = (element, heldId) => __foldkitBrandViewResult((Array.map(Array.filter(Array.fromIterable(element.querySelectorAll("[data-reel-slot]")), (slot) => __foldkitBrandViewResult((slot.dataset["reelSlot"] !== heldId), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~70")), (slot) => {
+	const slotRect = slot.getBoundingClientRect();
+	return __foldkitBrandViewResult((slotRect.top + slotRect.height / 2), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~71");
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#slotMiddlesOf");
+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/pixel-paper/reel/reel.js#anonymous~72");
+}), (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/pixel-paper/reel/reel.js#onNone~18"),
+		onSome: (column) => __foldkitBrandViewResult((slotMiddlesOf(column, paneId)), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~17")
+	})), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~74"))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~73");
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#pointerTarget");
+const PointerHold = Schema.Struct({
+	reelHook: Schema.String,
+	paneId: Schema.String,
+	pointerId: Schema.Finite
+});
+const pointerAt = (hold, event) => (__foldkitBrandViewResult(({
+	clientX: event.clientX,
+	clientY: event.clientY,
+	maybeTarget: pointerTarget(hold.reelHook, hold.paneId, event.clientX, event.clientY)
+}), "@gjermundgaraba/pixel-paper/reel/reel.js#pointerAt"));
+const pointerMessages = (hold) => __foldkitBrandViewResult((Stream.callback((queue) => __foldkitBrandViewResult((Effect.acquireRelease(Effect.sync(() => {
+	const state = {
+		maybeMove: Option.none(),
+		frame: 0
+	};
+	const readMove = () => {
+		cancelAnimationFrame(state.frame);
+		Option.map(state.maybeMove, (event) => {
+			Queue.offerUnsafe(queue, Message.MovedPointer(pointerAt(hold, event)));
+		});
+		state.maybeMove = Option.none();
+	};
+	const onMove = (event) => {
+		if (event.pointerId === hold.pointerId) {
+			if (Option.isNone(state.maybeMove)) state.frame = requestAnimationFrame(readMove);
+			state.maybeMove = Option.some(event);
+		}
+	};
+	const onUp = (event) => {
+		if (event.pointerId === hold.pointerId) {
+			readMove();
+			Queue.offerUnsafe(queue, Message.ReleasedPointer(pointerAt(hold, event)));
+		}
+	};
+	const onCancel = (event) => {
+		if (event.pointerId === hold.pointerId) {
+			cancelAnimationFrame(state.frame);
+			state.maybeMove = Option.none();
+			Queue.offerUnsafe(queue, Message.CancelledPointer());
+		}
+	};
+	document.addEventListener("pointermove", onMove);
+	document.addEventListener("pointerup", onUp);
+	document.addEventListener("pointercancel", onCancel);
+	return __foldkitBrandViewResult(({
+		state,
+		onMove,
+		onUp,
+		onCancel
+	}), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~76");
+}), ({ state, onMove, onUp, onCancel }) => __foldkitBrandViewResult((Effect.sync(() => {
+	cancelAnimationFrame(state.frame);
+	document.removeEventListener("pointermove", onMove);
+	document.removeEventListener("pointerup", onUp);
+	document.removeEventListener("pointercancel", onCancel);
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~78"))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~75"))), "@gjermundgaraba/pixel-paper/reel/reel.js#pointerMessages");
+const towards = (at, low, high) => {
+	if (at < low + EDGE_SCROLL) return __foldkitBrandViewResult((-1), "@gjermundgaraba/pixel-paper/reel/reel.js#towards");
+	else if (at > high - EDGE_SCROLL) return __foldkitBrandViewResult((1), "@gjermundgaraba/pixel-paper/reel/reel.js#towards");
+	return __foldkitBrandViewResult((0), "@gjermundgaraba/pixel-paper/reel/reel.js#towards");
+};
+const edgeScroll = (hold) => __foldkitBrandViewResult((Stream.callback(() => __foldkitBrandViewResult((Effect.acquireRelease(Effect.sync(() => {
+	const state = {
+		maybeAt: Option.none(),
+		frame: 0,
+		last: performance.now()
+	};
+	const onMove = (event) => {
+		if (event.pointerId === hold.pointerId) state.maybeAt = Option.some({
+			x: event.clientX,
+			y: event.clientY
+		});
+	};
+	const step = (now) => {
+		const distance = Math.min(now - state.last, LONGEST_FRAME_MILLIS) * EDGE_SCROLL_PIXELS_PER_MILLI;
+		state.last = now;
+		Option.map(Option.all({
+			view: scrollerOf(hold.reelHook),
+			at: state.maybeAt
+		}), ({ view, at }) => {
+			const rect = view.getBoundingClientRect();
+			view.scrollLeft += towards(at.x, rect.left, rect.right) * distance;
+			view.scrollTop += towards(at.y, rect.top, rect.bottom) * distance;
+		});
+		state.frame = requestAnimationFrame(step);
+	};
+	document.addEventListener("pointermove", onMove);
+	state.frame = requestAnimationFrame(step);
+	return __foldkitBrandViewResult(({
+		state,
+		onMove
+	}), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~81");
+}), ({ state, onMove }) => __foldkitBrandViewResult((Effect.sync(() => {
+	cancelAnimationFrame(state.frame);
+	document.removeEventListener("pointermove", onMove);
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~83")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~85")))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~80"))), "@gjermundgaraba/pixel-paper/reel/reel.js#edgeScroll");
+const SplitterHold = Schema.Struct({
+	reelHook: Schema.String,
+	splitter: Splitter,
+	pointerId: Schema.Finite,
+	pressX: Schema.Finite,
+	pressY: Schema.Finite
+});
+const heightOf = (element) => __foldkitBrandViewResult((element.getBoundingClientRect().height), "@gjermundgaraba/pixel-paper/reel/reel.js#heightOf");
+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/pixel-paper/reel/reel.js#anonymous~87")), () => __foldkitBrandViewResult((0), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~88"))), "@gjermundgaraba/pixel-paper/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/pixel-paper/reel/reel.js#Split")
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~86")), () => __foldkitBrandViewResult((0), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~89"))), "@gjermundgaraba/pixel-paper/reel/reel.js#scaleOf");
+const splitterMessages = (hold) => __foldkitBrandViewResult((Stream.suspend(() => {
+	const scale = scaleOf(hold);
+	const shareOf = (event) => {
+		const moved = hold.splitter._tag === "Width" ? event.clientX - hold.pressX : event.clientY - hold.pressY;
+		return __foldkitBrandViewResult((scale > 0 ? moved / scale : 0), "@gjermundgaraba/pixel-paper/reel/reel.js#shareOf");
+	};
+	return __foldkitBrandViewResult((pointerMessages$1(hold.pointerId, {
+		moved: (event) => __foldkitBrandViewResult((Message.MovedSplitter({ share: shareOf(event) })), "@gjermundgaraba/pixel-paper/reel/reel.js#moved"),
+		released: (event) => __foldkitBrandViewResult((Message.ReleasedSplitter({ share: shareOf(event) })), "@gjermundgaraba/pixel-paper/reel/reel.js#released"),
+		cancelled: () => __foldkitBrandViewResult((Message.CancelledSplitter()), "@gjermundgaraba/pixel-paper/reel/reel.js#cancelled")
+	})), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~90");
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#splitterMessages");
+const pointerHoldOf = (model, isCarryingOnly) => __foldkitBrandViewResult((Option.flatMap(model.maybeHeld, ({ paneId, by }) => __foldkitBrandViewResult((By.match(by, {
+	Keyboard: () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/reel/reel.js#Keyboard~3"),
+	Pointer: ({ pointerId, isCarrying }) => __foldkitBrandViewResult((isCarryingOnly && !isCarrying ? Option.none() : Option.some({
+		reelHook: model.id,
+		paneId,
+		pointerId
+	})), "@gjermundgaraba/pixel-paper/reel/reel.js#Pointer~3")
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~91"))), "@gjermundgaraba/pixel-paper/reel/reel.js#pointerHoldOf");
+const reelSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResult(({
+	pointer: entry({ maybeHold: Schema.Option(PointerHold) }, {
+		modelToDependencies: (model) => (__foldkitBrandViewResult(({ maybeHold: pointerHoldOf(model, false) }), "@gjermundgaraba/pixel-paper/reel/reel.js#modelToDependencies")),
+		dependenciesToStream: ({ maybeHold }) => __foldkitBrandViewResult((Option.match(maybeHold, {
+			onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~19"),
+			onSome: (hold) => __foldkitBrandViewResult((Stream.merge(pointerMessages(hold), markDragging)), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~18")
+		})), "@gjermundgaraba/pixel-paper/reel/reel.js#dependenciesToStream")
+	}),
+	edge: entry({ maybeHold: Schema.Option(PointerHold) }, {
+		modelToDependencies: (model) => (__foldkitBrandViewResult(({ maybeHold: pointerHoldOf(model, true) }), "@gjermundgaraba/pixel-paper/reel/reel.js#modelToDependencies~2")),
+		dependenciesToStream: ({ maybeHold }) => __foldkitBrandViewResult((Option.match(maybeHold, {
+			onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~20"),
+			onSome: edgeScroll
+		})), "@gjermundgaraba/pixel-paper/reel/reel.js#dependenciesToStream~2")
+	}),
+	resize: entry({ maybeHold: Schema.Option(SplitterHold) }, {
+		modelToDependencies: (model) => (__foldkitBrandViewResult(({ maybeHold: Option.map(model.maybeResizing, ({ splitter, pointerId, pressX, pressY }) => (__foldkitBrandViewResult(({
+			reelHook: model.id,
+			splitter,
+			pointerId,
+			pressX,
+			pressY
+		}), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~93"))) }), "@gjermundgaraba/pixel-paper/reel/reel.js#modelToDependencies~3")),
+		dependenciesToStream: ({ maybeHold }) => __foldkitBrandViewResult((Option.match(maybeHold, {
+			onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~21"),
+			onSome: (hold) => __foldkitBrandViewResult((Stream.merge(splitterMessages(hold), markDragging)), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~19")
+		})), "@gjermundgaraba/pixel-paper/reel/reel.js#dependenciesToStream~3")
+	}),
+	escape: entry({ isHolding: Schema.Boolean }, {
+		modelToDependencies: (model) => (__foldkitBrandViewResult(({ isHolding: !isIdle(model) }), "@gjermundgaraba/pixel-paper/reel/reel.js#modelToDependencies~4")),
+		dependenciesToStream: ({ isHolding: isHoldingNow }) => __foldkitBrandViewResult((isHoldingNow ? escapeKeys(Message.PressedEscape()) : Stream.empty), "@gjermundgaraba/pixel-paper/reel/reel.js#dependenciesToStream~4")
+	})
+}), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~92")));
+/** 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")`
+*  is keyed `tilesPointer`, `tilesEdge`, `tilesResize` and `tilesEscape`. */
+const subscriptions = (keyPrefix) => __foldkitBrandViewResult((prefixKeys(keyPrefix, reelSubscriptions)), "@gjermundgaraba/pixel-paper/reel/reel.js#subscriptions");
+/** Sizes the copy that follows the pointer to what it lifts, and keeps the pointer where it
+*  pressed. Measures the source once, when the copy appears. */
+const SizeLiftedPane = Mount.define("SizeLiftedPane", {
+	args: {
+		sourceSelector: Schema.String,
+		pressX: Schema.Finite,
+		pressY: Schema.Finite
+	},
+	messages: [Message.CompletedSizeLiftedPane],
+	execute: ({ element, sourceSelector, pressX, pressY }) => __foldkitBrandViewResult((Effect.sync(() => {
+		measureLift(element, sourceSelector, pressX, pressY);
+		return __foldkitBrandViewResult((Message.CompletedSizeLiftedPane()), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~94");
+	})), "@gjermundgaraba/pixel-paper/reel/reel.js#execute~6")
+});
+const helpId = (model) => __foldkitBrandViewResult((`${model.id}-grip-help`), "@gjermundgaraba/pixel-paper/reel/reel.js#helpId");
+const SPLITTER_STEP = .05;
+const HELD_STEPS = {
+	ArrowUp: "Up",
+	ArrowDown: "Down",
+	ArrowLeft: "Left",
+	ArrowRight: "Right"
+};
+const isDropKey = (key) => __foldkitBrandViewResult((key === " " || key === "Enter"), "@gjermundgaraba/pixel-paper/reel/reel.js#isDropKey");
+const STAGE_ANCHOR = "--reel-stage";
+const anchorName = (index) => __foldkitBrandViewResult((`--reel-${index}`), "@gjermundgaraba/pixel-paper/reel/reel.js#anchorName");
+const byId = Order.mapInput(Order.String, (pane) => __foldkitBrandViewResult((pane.id), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~95"));
+const stableDomOrder = (layout) => __foldkitBrandViewResult((Array.sort(Array.flatMap(layout, (column) => __foldkitBrandViewResult((column.panes), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~96")), byId)), "@gjermundgaraba/pixel-paper/reel/reel.js#stableDomOrder");
+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/pixel-paper/reel/reel.js#anonymous~98"))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~97"))), "@gjermundgaraba/pixel-paper/reel/reel.js#markOf");
+const carriedIdOf = (model) => __foldkitBrandViewResult((Option.map(Option.filter(model.maybeHeld, isCarried), ({ paneId }) => __foldkitBrandViewResult((paneId), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~99"))), "@gjermundgaraba/pixel-paper/reel/reel.js#carriedIdOf");
+const gripView = (model, pane, h) => {
+	const maybeHeldHere = Option.filter(model.maybeHeld, (held) => __foldkitBrandViewResult((held.paneId === pane.id), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~100"));
+	const isHeld = Option.exists(maybeHeldHere, isCarried);
+	const isKeyboardHeld = Option.exists(maybeHeldHere, (held) => __foldkitBrandViewResult((held.by._tag === "Keyboard"), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~101"));
+	const onGripKey = h.OnKeyDownPreventDefault((key, modifiers) => {
+		if (!isPlain(modifiers)) return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~102");
+		else if (isKeyboardHeld) return __foldkitBrandViewResult((isDropKey(key) ? Option.some(Message.DroppedHeld()) : Option.map(Record.get(HELD_STEPS, key), (step) => __foldkitBrandViewResult((Message.SteppedHeld({ step })), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~103"))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~102");
+		return __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGripKey({ paneId: pane.id }), () => __foldkitBrandViewResult((isIdle(model) && isDropKey(key)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~104"))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~102");
+	});
+	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 === 0), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~106"))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~105"));
+	return __foldkitBrandViewResult((view$2({
+		glyph: "grip",
+		label: fill(COPY.paneGrip, { pane: pane.label }),
+		isQuiet: true,
+		attributes: [
+			h.DataAttribute("reel-grip", paneHook(model, pane.id)),
+			h.AriaRoleDescription("draggable"),
+			h.AriaDescribedBy(helpId(model)),
+			pressedAttribute(isHeld, h),
+			onGripKey,
+			onGripPress,
+			...isKeyboardHeld ? [h.OnBlur(Message.LeftGrip())] : []
+		]
+	}, h)), "@gjermundgaraba/pixel-paper/reel/reel.js#gripView");
+};
+const reelSplitterAttributes = (model, splitter, h) => __foldkitBrandViewResult((splitterAttributes({
+	orientation: splitter._tag === "Width" ? "vertical" : "horizontal",
+	isIdle: isIdle(model),
+	onPress: (pointerId, clientX, clientY) => __foldkitBrandViewResult((Message.PressedSplitter({
+		splitter,
+		pointerId,
+		clientX,
+		clientY
+	})), "@gjermundgaraba/pixel-paper/reel/reel.js#onPress"),
+	onStep: (direction) => __foldkitBrandViewResult((Message.PressedSplitterKey({
+		splitter,
+		share: direction * SPLITTER_STEP
+	})), "@gjermundgaraba/pixel-paper/reel/reel.js#onStep")
+}, h)), "@gjermundgaraba/pixel-paper/reel/reel.js#reelSplitterAttributes");
+const dropMarkOf = (info, column) => __foldkitBrandViewResult((Option.flatMap(info.maybeMark, (mark) => {
+	if (mark._tag !== "Into" || mark.columnId !== column.id) return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~107");
+	const others = Array.filter(column.panes, (pane) => __foldkitBrandViewResult((!Option.contains(info.maybeCarriedId, pane.id)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~108"));
+	return __foldkitBrandViewResult((Option.orElse(Option.map(Array.get(others, mark.index), ({ id }) => (__foldkitBrandViewResult(({
+		paneId: id,
+		markClass: " drop-before"
+	}), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~109"))), () => __foldkitBrandViewResult((Option.map(Option.filter(Array.last(others), () => __foldkitBrandViewResult((mark.index >= others.length), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~111")), ({ id }) => (__foldkitBrandViewResult(({
+		paneId: id,
+		markClass: " drop-after"
+	}), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~112")))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~110"))), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~107");
+})), "@gjermundgaraba/pixel-paper/reel/reel.js#dropMarkOf");
+const isGapMarked = (info, maybeBeforeColumnId) => __foldkitBrandViewResult((Option.exists(info.maybeMark, (mark) => __foldkitBrandViewResult((mark._tag === "Gap" && Equal.equals(mark.maybeBeforeColumnId, maybeBeforeColumnId)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~113"))), "@gjermundgaraba/pixel-paper/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/pixel-paper/reel/reel.js#anonymous~114")), {
+		onNone: () => __foldkitBrandViewResult((""), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~22"),
+		onSome: ({ markClass }) => __foldkitBrandViewResult((markClass), "@gjermundgaraba/pixel-paper/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/pixel-paper/reel/reel.js#slotView");
+const splitView = (model, above, share, h) => __foldkitBrandViewResult((h.keyed("div")(`split:${above.id}`, [
+	h.Class("reel-split"),
+	h.Role("separator"),
+	h.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),
+	...reelSplitterAttributes(model, Splitter.Split({ abovePaneId: above.id }), h)
+])), "@gjermundgaraba/pixel-paper/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/pixel-paper/reel/reel.js#anonymous~115")));
+	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/pixel-paper/reel/reel.js#anonymous~117"))), slotView(anchors, maybeDropMark, pane, h)]), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~116"));
+	const maybeNextId = Option.map(Array.get(layout, index + 1), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~118"));
+	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}` })
+	], stack), h.keyed("div")(`resize:${column.id}`, [
+		h.Class(`reel-gap reel-resize${isGapMarked(info, maybeNextId) ? " drop-here" : ""}`),
+		h.Role("separator"),
+		h.AriaLabel(fill(COPY.widthLabel, { column: index + 1 })),
+		h.AriaValuemin(0),
+		h.AriaValuemax(100),
+		h.AriaValuenow(Math.round(column.width * 100)),
+		h.AriaValuetext(widthWords(column.width)),
+		h.Tabindex(0),
+		h.DataAttribute("reel-resize", column.id),
+		...reelSplitterAttributes(model, Splitter.Width({ columnId: column.id }), h)
+	])]), "@gjermundgaraba/pixel-paper/reel/reel.js#columnView");
+};
+const paneLayerView = (info, panesInDomOrder, anchors, h) => {
+	const { model } = info;
+	return __foldkitBrandViewResult((h.div([h.Class("reel-panes")], Array.map(panesInDomOrder, (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" : ""}${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, {
+			lead: info.isTabbed ? [] : [gripView(model, pane, h)],
+			id: `${model.id}-${pane.id}`
+		})])), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~119");
+	}))), "@gjermundgaraba/pixel-paper/reel/reel.js#paneLayerView");
+};
+const liftedCopyView = (info, h) => {
+	const { model, layout } = info;
+	return __foldkitBrandViewResult((Array.fromOption(Option.flatMap(model.maybeHeld, (held) => __foldkitBrandViewResult((By.match(held.by, {
+		Keyboard: () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/reel/reel.js#Keyboard~4"),
+		Pointer: ({ isCarrying, pressX, pressY, x, y }) => __foldkitBrandViewResult((Option.liftPredicate(h.div([
+			h.Class("reel-lift"),
+			h.Style({ transform: `translate3d(${x}px, ${y}px, 0)` }),
+			h.AriaHidden(true),
+			h.Inert(true),
+			h.OnMount(SizeLiftedPane({
+				sourceSelector: `[data-reel-pane="${CSS.escape(paneHook(model, held.paneId))}"]`,
+				pressX,
+				pressY
+			}))
+		], [h.div([h.Class("panel window")], [h.div([h.Class("panel-tb")], [h.span([h.Class("panel-lead")], [h.span([h.Class("iconbtn quiet")], [view$1({ name: "grip" }, h)])]), h.h2([], [heldLabel(layout, held)])])])]), () => __foldkitBrandViewResult((isCarrying), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~121"))), "@gjermundgaraba/pixel-paper/reel/reel.js#Pointer~4")
+	})), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~120")))), "@gjermundgaraba/pixel-paper/reel/reel.js#liftedCopyView");
+};
+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/pixel-paper/reel/reel.js#anonymous~122"))), "@gjermundgaraba/pixel-paper/reel/reel.js#stepTo");
+	const keyOf = (index, key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.when("ArrowLeft", () => __foldkitBrandViewResult((stepTo(index - 1)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~123")), Match.when("ArrowRight", () => __foldkitBrandViewResult((stepTo(index + 1)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~124")), Match.when("Home", () => __foldkitBrandViewResult((stepTo(0)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~125")), Match.when("End", () => __foldkitBrandViewResult((stepTo(panes.length - 1)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~126")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~127")))), "@gjermundgaraba/pixel-paper/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/pixel-paper/reel/reel.js#anonymous~129"))
+		], [...toTabLeadView(pane), h.span([h.Class("reel-tab-words")], [pane.label])])), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~128");
+	}))), "@gjermundgaraba/pixel-paper/reel/reel.js#tabListView");
+};
+const NO_TAB_LEAD = () => __foldkitBrandViewResult(([]), "@gjermundgaraba/pixel-paper/reel/reel.js#NO_TAB_LEAD");
+const previewed = (model, layout) => __foldkitBrandViewResult((Option.match(Option.flatMap(model.maybeResizing, ({ maybeResize }) => __foldkitBrandViewResult((maybeResize), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~130")), {
+	onNone: () => __foldkitBrandViewResult((layout), "@gjermundgaraba/pixel-paper/reel/reel.js#onNone~23"),
+	onSome: (resize) => __foldkitBrandViewResult((apply(layout, resize)), "@gjermundgaraba/pixel-paper/reel/reel.js#onSome~21")
+})), "@gjermundgaraba/pixel-paper/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`, 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 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.
+*
+* 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.
+*/
+const view = defineView((model, viewInputs, h) => {
+	const { label, toPaneView, arrangement = "Strip", toTabLeadView = NO_TAB_LEAD } = viewInputs;
+	const isTabbed = arrangement === "Tabs";
+	const layout = previewed(model, viewInputs.layout);
+	const panesInDomOrder = stableDomOrder(layout);
+	const anchors = new Map(Array.map(panesInDomOrder, (pane, index) => __foldkitBrandViewResult(([pane.id, isTabbed ? STAGE_ANCHOR : anchorName(index)]), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~132")));
+	const info = {
+		model,
+		layout,
+		isTabbed,
+		toPaneView,
+		maybeFocusedId: focusedPaneId(model, layout),
+		maybeMark: markOf(model, layout),
+		maybeCarriedId: carriedIdOf(model)
+	};
+	const strip = () => __foldkitBrandViewResult(([h.keyed("div")("gap:start", [h.Class(`reel-gap${isGapMarked(info, Option.map(Array.head(layout), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~133"))) ? " drop-here" : ""}`)]), ...Array.flatMap(layout, (column, index) => __foldkitBrandViewResult((columnView(info, anchors, column, index, h)), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~134"))]), "@gjermundgaraba/pixel-paper/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")], [...isTabbed ? [h.div([h.Class("reel-slot reel-stage"), h.Style({ "--reel-anchor": STAGE_ANCHOR })])] : strip(), paneLayerView(info, panesInDomOrder, anchors, h)])]),
+		h.p([h.Id(helpId(model)), h.Class("sr-only")], [COPY.gripHelp]),
+		...liftedCopyView(info, h)
+	])), "@gjermundgaraba/pixel-paper/reel/reel.js#anonymous~131");
+});
+export { Action, AnnounceReel, Arrangement, FocusPane, FocusTab, Message, Model, RestoreFocus, ScrollIntoView, SizeLiftedPane, focusedPaneId, init, perform, reconcile, subscriptions, update, view };