@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.0

package/dist/rail/rail.js

@@ -0,0 +1,355 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { view as view$1 } from "../button/button.js";
+import { escapeKeys, markDragging, pointerMessages, 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 { Array, Effect, Number, Option, Schema, Stream } 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 * as Dom from "foldkit/dom";
+// src/rail/rail.ts
+const Resizing = Schema.Struct({
+	pointerId: Schema.Finite,
+	pressX: Schema.Finite,
+	fromWidth: Schema.Finite,
+	width: Schema.Finite
+});
+/** Schema for a rail: whether it is open as a drawer (at 900px and under; wider, it is always
+*  in the page and this stays false), and its splitter while a pointer drags it. Its width,
+*  and whether the reader hid it, are the parent's. */
+const Model = Schema.Struct({
+	id: Schema.String,
+	isOpen: Schema.Boolean,
+	maybeResizing: Schema.Option(Resizing)
+});
+/** Union of all Messages a rail can produce. `ClosedDrawer` is the browser closing it on
+*  Escape or a press on the veil; `BlurredDrawer` is focus leaving it; `WidenedPastDrawer` is
+*  the window growing past 900px while it is open, where the rail is back in the page. */
+const Message = defineMessageUnion({
+	ClickedOpen: {},
+	ClickedToggle: {},
+	PressedSplitter: {
+		pointerId: Schema.Finite,
+		clientX: Schema.Finite,
+		width: Schema.Finite
+	},
+	MovedSplitter: { clientX: Schema.Finite },
+	ReleasedSplitter: { clientX: Schema.Finite },
+	CancelledSplitter: {},
+	PressedEscape: {},
+	PressedSplitterKey: { width: Schema.Finite },
+	ClickedClose: {},
+	ClosedDrawer: {},
+	BlurredDrawer: {},
+	WidenedPastDrawer: {},
+	CompletedShowRailDrawer: {},
+	CompletedHideRailDrawer: {},
+	CompletedFocusRailToggle: {}
+});
+/** What a rail asks of its parent. `ResizedRail`: its splitter was let go, or stepped by a
+*  key, at `width` pixels, within the rail's bounds; the parent keeps it (per client) and
+*  passes it back as the view's `maybeWidth`. `ToggledRail`: its toggle was pressed; the
+*  parent flips whether it keeps the rail hidden (per client) and passes it back as the view's
+*  `isHidden`. */
+const OutMessage = defineMessageUnion({
+	ResizedRail: { width: Schema.Finite },
+	ToggledRail: {}
+});
+/** Creates a rail, closed, its splitter at rest. */
+const init = (config) => (__foldkitBrandViewResult(({
+	id: config.id,
+	isOpen: false,
+	maybeResizing: Option.none()
+}), "@gjermundgaraba/pixel-paper/rail/rail.js#init"));
+const WIDEST_DRAWER_WINDOW = 900;
+const WIDTH = {
+	start: 272,
+	leastFittingPanels: 220,
+	mostLeavingLeastDeck: 480,
+	arrowStep: 16
+};
+const bounded = (width) => __foldkitBrandViewResult((Math.round(Number.clamp(width, {
+	minimum: WIDTH.leastFittingPanels,
+	maximum: WIDTH.mostLeavingLeastDeck
+}))), "@gjermundgaraba/pixel-paper/rail/rail.js#bounded");
+/** The rail's id, unique in the document. */
+const id = (model) => __foldkitBrandViewResult((model.id), "@gjermundgaraba/pixel-paper/rail/rail.js#id");
+/** Whether the rail is open as a drawer: a parent pauses its own page keys while it is. */
+const isOpen = (model) => __foldkitBrandViewResult((model.isOpen), "@gjermundgaraba/pixel-paper/rail/rail.js#isOpen");
+const openButtonId = (model) => __foldkitBrandViewResult((`${model.id}-open`), "@gjermundgaraba/pixel-paper/rail/rail.js#openButtonId");
+const toggleId = (model) => __foldkitBrandViewResult((`${model.id}-toggle`), "@gjermundgaraba/pixel-paper/rail/rail.js#toggleId");
+const FOCUSABLE = "a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]";
+const findRail = (railId) => __foldkitBrandViewResult((Effect.suspend(() => __foldkitBrandViewResult((Effect.fromOption(htmlElement(`#${CSS.escape(railId)}`))), "@gjermundgaraba/pixel-paper/rail/rail.js#anonymous"))), "@gjermundgaraba/pixel-paper/rail/rail.js#findRail");
+const firstTabStop = (rail) => __foldkitBrandViewResult((Array.findFirst(Array.fromIterable(rail.querySelectorAll(`.rail-head ~ * :is(${FOCUSABLE})`)), (control) => __foldkitBrandViewResult((control.tabIndex >= 0 && control.closest("[inert], [hidden], .rail-toggle") === null), "@gjermundgaraba/pixel-paper/rail/rail.js#anonymous~2"))), "@gjermundgaraba/pixel-paper/rail/rail.js#firstTabStop");
+/** Opens the rail as a drawer over the page and puts focus on its first control past its
+*  head. */
+const ShowRailDrawer = Command.define("ShowRailDrawer", {
+	args: { railId: Schema.String },
+	messages: [Message.CompletedShowRailDrawer],
+	execute: ({ railId }) => __foldkitBrandViewResult((Effect.gen(function* () {
+		yield* Render.afterCommit;
+		const rail = yield* findRail(railId);
+		if (!rail.matches(":popover-open")) yield* Effect.try(() => {
+			rail.showPopover();
+		});
+		(yield* Effect.fromOption(firstTabStop(rail))).focus();
+	}).pipe(Effect.ignore, Effect.as(Message.CompletedShowRailDrawer()))), "@gjermundgaraba/pixel-paper/rail/rail.js#execute")
+});
+/** Closes the drawer, and puts focus back on the button that opened it when asked. */
+const HideRailDrawer = Command.define("HideRailDrawer", {
+	args: {
+		railId: Schema.String,
+		buttonId: Schema.String,
+		isReturningFocus: Schema.Boolean
+	},
+	messages: [Message.CompletedHideRailDrawer],
+	execute: ({ railId, buttonId, isReturningFocus }) => __foldkitBrandViewResult((Effect.gen(function* () {
+		yield* Render.afterCommit;
+		const rail = yield* findRail(railId);
+		if (rail.matches(":popover-open")) yield* Effect.try(() => {
+			rail.hidePopover();
+		});
+	}).pipe(Effect.ignore, Effect.andThen(isReturningFocus ? Dom.focus(`#${CSS.escape(buttonId)}`).pipe(Effect.ignore) : Effect.void), Effect.as(Message.CompletedHideRailDrawer()))), "@gjermundgaraba/pixel-paper/rail/rail.js#execute~2")
+});
+/** Puts focus on the rail's toggle once the rail has folded or unfolded, if focus was in the
+*  rail or on its splitter: folding takes away every control in it but the toggle, which
+*  brings it back, and the splitter with them. Focus anywhere else stays where it is. */
+const FocusRailToggle = Command.define("FocusRailToggle", {
+	args: {
+		railId: Schema.String,
+		toggleId: Schema.String
+	},
+	messages: [Message.CompletedFocusRailToggle],
+	execute: ({ railId, toggleId: buttonId }) => __foldkitBrandViewResult((Effect.gen(function* () {
+		const rail = yield* findRail(railId);
+		const active = document.activeElement;
+		const isOnSplitter = active?.matches(`.rail-resize[aria-controls="${CSS.escape(railId)}"]`) ?? false;
+		if (rail.contains(active) || isOnSplitter) yield* Dom.focus(`#${CSS.escape(buttonId)}`);
+	}).pipe(Effect.ignore, Effect.as(Message.CompletedFocusRailToggle()))), "@gjermundgaraba/pixel-paper/rail/rail.js#execute~3")
+});
+const closeDrawer = (model, isReturningFocus) => __foldkitBrandViewResult((model.isOpen ? {
+	model: modifyFields(model, { isOpen: () => __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/rail/rail.js#isOpen~2") }),
+	commands: [HideRailDrawer({
+		railId: model.id,
+		buttonId: openButtonId(model),
+		isReturningFocus
+	})]
+} : { model }), "@gjermundgaraba/pixel-paper/rail/rail.js#closeDrawer");
+const open = (model) => (__foldkitBrandViewResult(({
+	model: modifyFields(model, { isOpen: () => __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/rail/rail.js#isOpen~3") }),
+	commands: [ShowRailDrawer({ railId: model.id })]
+}), "@gjermundgaraba/pixel-paper/rail/rail.js#open"));
+/** Closes the rail's drawer, focus back on its button. */
+const close = (model) => __foldkitBrandViewResult((closeDrawer(model, true)), "@gjermundgaraba/pixel-paper/rail/rail.js#close");
+/** Folds or unfolds the rail from a key of the parent's: the parent flips whether it keeps the
+*  rail hidden, as it does for `ToggledRail`, and folds this in, which moves focus in the rail
+*  onto the toggle. */
+const toggle = (model) => (__foldkitBrandViewResult(({
+	model,
+	commands: [FocusRailToggle({
+		railId: model.id,
+		toggleId: toggleId(model)
+	})]
+}), "@gjermundgaraba/pixel-paper/rail/rail.js#toggle"));
+const withResizing = (model, maybeResizing) => __foldkitBrandViewResult((modifyFields(model, { maybeResizing: () => __foldkitBrandViewResult((maybeResizing), "@gjermundgaraba/pixel-paper/rail/rail.js#maybeResizing") })), "@gjermundgaraba/pixel-paper/rail/rail.js#withResizing");
+const dragTo = (model, clientX) => __foldkitBrandViewResult((withResizing(model, Option.map(model.maybeResizing, (resizing) => (__foldkitBrandViewResult(({
+	...resizing,
+	width: bounded(resizing.fromWidth + clientX - resizing.pressX)
+}), "@gjermundgaraba/pixel-paper/rail/rail.js#anonymous~8"))))), "@gjermundgaraba/pixel-paper/rail/rail.js#dragTo");
+/** Processes a rail Message and returns the next Model, Commands and OutMessage: a splitter let
+*  go where it changes the width, or stepped by a key, asks for the width, and the toggle asks
+*  to fold or unfold the rail. */
+const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
+	ClickedOpen: () => __foldkitBrandViewResult((open(model)), "@gjermundgaraba/pixel-paper/rail/rail.js#ClickedOpen"),
+	ClickedToggle: () => (__foldkitBrandViewResult(({
+		...toggle(model),
+		outMessage: OutMessage.ToggledRail()
+	}), "@gjermundgaraba/pixel-paper/rail/rail.js#ClickedToggle")),
+	PressedSplitter: ({ pointerId, clientX, width }) => __foldkitBrandViewResult((Option.isSome(model.maybeResizing) ? { model } : { model: withResizing(model, Option.some({
+		pointerId,
+		pressX: clientX,
+		fromWidth: width,
+		width
+	})) }), "@gjermundgaraba/pixel-paper/rail/rail.js#PressedSplitter"),
+	MovedSplitter: ({ clientX }) => (__foldkitBrandViewResult(({ model: dragTo(model, clientX) }), "@gjermundgaraba/pixel-paper/rail/rail.js#MovedSplitter")),
+	ReleasedSplitter: ({ clientX }) => __foldkitBrandViewResult((Option.match(dragTo(model, clientX).maybeResizing, {
+		onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/rail/rail.js#onNone")),
+		onSome: ({ fromWidth, width }) => (__foldkitBrandViewResult(({
+			model: withResizing(model, Option.none()),
+			...width === fromWidth ? {} : { outMessage: OutMessage.ResizedRail({ width }) }
+		}), "@gjermundgaraba/pixel-paper/rail/rail.js#onSome"))
+	})), "@gjermundgaraba/pixel-paper/rail/rail.js#ReleasedSplitter"),
+	CancelledSplitter: () => (__foldkitBrandViewResult(({ model: withResizing(model, Option.none()) }), "@gjermundgaraba/pixel-paper/rail/rail.js#CancelledSplitter")),
+	PressedEscape: () => (__foldkitBrandViewResult(({ model: withResizing(model, Option.none()) }), "@gjermundgaraba/pixel-paper/rail/rail.js#PressedEscape")),
+	PressedSplitterKey: ({ width }) => (__foldkitBrandViewResult(({
+		model,
+		outMessage: OutMessage.ResizedRail({ width: bounded(width) })
+	}), "@gjermundgaraba/pixel-paper/rail/rail.js#PressedSplitterKey")),
+	ClickedClose: () => __foldkitBrandViewResult((close(model)), "@gjermundgaraba/pixel-paper/rail/rail.js#ClickedClose"),
+	ClosedDrawer: () => __foldkitBrandViewResult((close(model)), "@gjermundgaraba/pixel-paper/rail/rail.js#ClosedDrawer"),
+	BlurredDrawer: () => __foldkitBrandViewResult((closeDrawer(model, false)), "@gjermundgaraba/pixel-paper/rail/rail.js#BlurredDrawer"),
+	WidenedPastDrawer: () => __foldkitBrandViewResult((closeDrawer(model, false)), "@gjermundgaraba/pixel-paper/rail/rail.js#WidenedPastDrawer"),
+	CompletedShowRailDrawer: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/rail/rail.js#CompletedShowRailDrawer")),
+	CompletedHideRailDrawer: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/rail/rail.js#CompletedHideRailDrawer")),
+	CompletedFocusRailToggle: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/rail/rail.js#CompletedFocusRailToggle"))
+})), "@gjermundgaraba/pixel-paper/rail/rail.js#update");
+const DRAWER_QUERY = `(max-width: ${WIDEST_DRAWER_WINDOW}px)`;
+const widthChangeMessage = (isDrawerWidth, isDrawerOpen) => __foldkitBrandViewResult((!isDrawerWidth && isDrawerOpen ? Option.some(Message.WidenedPastDrawer()) : Option.none()), "@gjermundgaraba/pixel-paper/rail/rail.js#widthChangeMessage");
+const drawerToggleMessage = (event) => __foldkitBrandViewResult((Option.liftPredicate(Message.ClosedDrawer(), () => __foldkitBrandViewResult((event.newState === "closed"), "@gjermundgaraba/pixel-paper/rail/rail.js#anonymous~9"))), "@gjermundgaraba/pixel-paper/rail/rail.js#drawerToggleMessage");
+const drawerFocusOutMessage = (rail, event, isDrawerOpen) => __foldkitBrandViewResult((Option.liftPredicate(Message.BlurredDrawer(), () => __foldkitBrandViewResult((isDrawerOpen && event.relatedTarget instanceof Node && !rail.contains(event.relatedTarget)), "@gjermundgaraba/pixel-paper/rail/rail.js#anonymous~10"))), "@gjermundgaraba/pixel-paper/rail/rail.js#drawerFocusOutMessage");
+/** Follows the drawer the browser shows: the browser closing it (Escape, a press on the
+*  veil), focus leaving it while it is open, and the window growing past its width while it
+*  is open, each of which closes the rail. */
+const FollowRailDrawer = Mount.defineStream("FollowRailDrawer", {
+	messages: [
+		Message.ClosedDrawer,
+		Message.BlurredDrawer,
+		Message.WidenedPastDrawer
+	],
+	execute: ({ element }) => {
+		const isDrawerOpen = () => __foldkitBrandViewResult((element.matches(":popover-open")), "@gjermundgaraba/pixel-paper/rail/rail.js#isDrawerOpen");
+		const fromToggle = Dom.streamFromEventFilterMap({
+			target: element,
+			type: "toggle",
+			filterMapEvent: drawerToggleMessage
+		});
+		const fromFocusOut = Dom.streamFromEventFilterMap({
+			target: element,
+			type: "focusout",
+			filterMapEvent: (event) => __foldkitBrandViewResult((drawerFocusOutMessage(element, event, isDrawerOpen())), "@gjermundgaraba/pixel-paper/rail/rail.js#filterMapEvent")
+		});
+		const fromWidth = Dom.streamFromMediaQuery({
+			query: DRAWER_QUERY,
+			mapMatches: (isDrawerWidth) => __foldkitBrandViewResult((widthChangeMessage(isDrawerWidth, isDrawerOpen())), "@gjermundgaraba/pixel-paper/rail/rail.js#mapMatches")
+		}).pipe(Stream.filter(Option.isSome), Stream.map(({ value }) => __foldkitBrandViewResult((value), "@gjermundgaraba/pixel-paper/rail/rail.js#anonymous~11")));
+		return __foldkitBrandViewResult((Stream.mergeAll([
+			fromToggle,
+			fromFocusOut,
+			fromWidth
+		], { concurrency: "unbounded" })), "@gjermundgaraba/pixel-paper/rail/rail.js#execute~4");
+	}
+});
+const railSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResult(({
+	resize: entry({ maybePointerId: Schema.Option(Schema.Finite) }, {
+		modelToDependencies: (model) => (__foldkitBrandViewResult(({ maybePointerId: Option.map(model.maybeResizing, ({ pointerId }) => __foldkitBrandViewResult((pointerId), "@gjermundgaraba/pixel-paper/rail/rail.js#anonymous~13")) }), "@gjermundgaraba/pixel-paper/rail/rail.js#modelToDependencies")),
+		dependenciesToStream: ({ maybePointerId }) => __foldkitBrandViewResult((Option.match(maybePointerId, {
+			onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba/pixel-paper/rail/rail.js#onNone~2"),
+			onSome: (pointerId) => __foldkitBrandViewResult((Stream.merge(pointerMessages(pointerId, {
+				moved: ({ clientX }) => __foldkitBrandViewResult((Message.MovedSplitter({ clientX })), "@gjermundgaraba/pixel-paper/rail/rail.js#moved"),
+				released: ({ clientX }) => __foldkitBrandViewResult((Message.ReleasedSplitter({ clientX })), "@gjermundgaraba/pixel-paper/rail/rail.js#released"),
+				cancelled: () => __foldkitBrandViewResult((Message.CancelledSplitter()), "@gjermundgaraba/pixel-paper/rail/rail.js#cancelled")
+			}), markDragging)), "@gjermundgaraba/pixel-paper/rail/rail.js#onSome~2")
+		})), "@gjermundgaraba/pixel-paper/rail/rail.js#dependenciesToStream")
+	}),
+	escape: entry({ isResizing: Schema.Boolean }, {
+		modelToDependencies: (model) => (__foldkitBrandViewResult(({ isResizing: Option.isSome(model.maybeResizing) }), "@gjermundgaraba/pixel-paper/rail/rail.js#modelToDependencies~2")),
+		dependenciesToStream: ({ isResizing }) => __foldkitBrandViewResult((isResizing ? escapeKeys(Message.PressedEscape()) : Stream.empty), "@gjermundgaraba/pixel-paper/rail/rail.js#dependenciesToStream~2")
+	})
+}), "@gjermundgaraba/pixel-paper/rail/rail.js#anonymous~12")));
+/** A dragged splitter follows the pointer, and Escape puts it back before a dialog or the
+*  page sees it, from listeners that run only while it is dragged. Lift them into the
+*  application's Subscriptions behind a key prefix of the parent's: `subscriptions("rail")` is
+*  keyed `railResize` and `railEscape`. */
+const subscriptions = (keyPrefix) => __foldkitBrandViewResult((prefixKeys(keyPrefix, railSubscriptions)), "@gjermundgaraba/pixel-paper/rail/rail.js#subscriptions");
+/**
+* A column of panels beside the deck, fixed under the top bar: `div.railed >` the deck, then
+* `aside.rail[popover="auto"][aria-label]`, then its splitter, `div.rail-resize[role="separator"]`,
+* on its right edge. What comes before its last panel keeps its height, and the last panel
+* shrinks to the room left, its bar and foot staying while its body scrolls. One element
+* serves both layouts, so nothing in it renders twice or loses its state. At 900px and under it leaves the page, and
+* `span.rail-open > button.btn.small` at the top of the deck opens the same element as a drawer
+* over a veil, its head (the name and a close glyph) showing. Opening focuses its first
+* control; Escape, a press on the veil, the close glyph, focus leaving or the window growing
+* past 900px closes it, and the first three put focus back on the button.
+*
+* Its splitter sizes it, by a pointer (previewed as it moves) or the side arrows, within its
+* bounds, and reports the width as `ResizedRail` for the parent to keep and pass back as
+* `maybeWidth`, which the view sets as `--railed-width` on `div.railed`, so the page's padding
+* and the rail's width follow it (without one, `--rail`). The drawer keeps its own width. Lift
+* `subscriptions(keyPrefix)` into the application's, or a dragged splitter follows nothing.
+*
+* Its toggle, `span.rail-toggle > button.iconbtn.quiet[aria-expanded]` ("Hide <label>"), comes
+* to `toAsideView` to print as the first panel's `lead`. Pressed, it reports `ToggledRail` for
+* the parent to keep and pass back as `isHidden`: `div.railed.folded` then stands the first
+* panel's title bar on end on the ground (the toggle at its top, "Show <label>"), the rest of
+* the rail and its splitter gone, and the deck takes the width. Focus in the rail lands on the
+* toggle. The drawer, at 900px and under, prints neither the toggle nor the fold.
+*
+* Its state is its own, not `@foldkit/ui`'s Popover: that panel is placed by Floating UI and
+* rendered only while open, and this one is always in the page, placed by the stylesheet, and
+* opened as a native popover so the browser keeps it in the top layer.
+*/
+const view = defineView((model, viewInputs, h) => {
+	const { label, isHidden, maybeToggleKeyHint, toAsideView, toDeckView } = viewInputs;
+	const maybeWidth = Option.orElse(Option.map(model.maybeResizing, ({ width }) => __foldkitBrandViewResult((width), "@gjermundgaraba/pixel-paper/rail/rail.js#anonymous~15")), () => __foldkitBrandViewResult((Option.map(viewInputs.maybeWidth, bounded)), "@gjermundgaraba/pixel-paper/rail/rail.js#anonymous~16"));
+	const width = Option.getOrElse(maybeWidth, () => __foldkitBrandViewResult((WIDTH.start), "@gjermundgaraba/pixel-paper/rail/rail.js#anonymous~17"));
+	const openButton = h.span([h.Class("rail-open")], [view$1({
+		label,
+		glyph: "sidebar",
+		isSmall: true,
+		onClick: Message.ClickedOpen(),
+		attributes: [
+			h.Id(openButtonId(model)),
+			h.AriaExpanded(model.isOpen),
+			h.AriaControls(model.id)
+		]
+	}, h)]);
+	const toggleButton = h.span([h.Class("rail-toggle")], [view$2({
+		glyph: "sidebar",
+		label: `${isHidden ? "Show" : "Hide"} ${label}`,
+		isQuiet: true,
+		onClick: Message.ClickedToggle(),
+		...Option.match(maybeToggleKeyHint, {
+			onNone: () => (__foldkitBrandViewResult(({}), "@gjermundgaraba/pixel-paper/rail/rail.js#onNone~3")),
+			onSome: (keyHint) => (__foldkitBrandViewResult(({ keyHint }), "@gjermundgaraba/pixel-paper/rail/rail.js#onSome~3"))
+		}),
+		attributes: [
+			h.Id(toggleId(model)),
+			h.AriaExpanded(!isHidden),
+			h.AriaControls(model.id)
+		]
+	}, h)]);
+	const splitter = h.div([
+		h.Class("rail-resize"),
+		h.Role("separator"),
+		h.AriaLabel(`Width of ${label}`),
+		h.AriaControls(model.id),
+		h.AriaValuemin(WIDTH.leastFittingPanels),
+		h.AriaValuemax(WIDTH.mostLeavingLeastDeck),
+		h.AriaValuenow(width),
+		h.AriaValuetext(`${width} pixels`),
+		h.Tabindex(0),
+		...splitterAttributes({
+			orientation: "vertical",
+			isIdle: Option.isNone(model.maybeResizing),
+			onPress: (pointerId, clientX) => __foldkitBrandViewResult((Message.PressedSplitter({
+				pointerId,
+				clientX,
+				width
+			})), "@gjermundgaraba/pixel-paper/rail/rail.js#onPress"),
+			onStep: (direction) => __foldkitBrandViewResult((Message.PressedSplitterKey({ width: width + direction * WIDTH.arrowStep })), "@gjermundgaraba/pixel-paper/rail/rail.js#onStep")
+		}, h)
+	]);
+	return __foldkitBrandViewResult((h.div([h.Class(isHidden ? "railed folded" : "railed"), ...isHidden ? [] : Array.fromOption(Option.map(maybeWidth, (shown) => __foldkitBrandViewResult((h.Style({ "--railed-width": `${shown}px` })), "@gjermundgaraba/pixel-paper/rail/rail.js#anonymous~18")))], [
+		toDeckView(openButton),
+		h.aside([
+			h.Id(model.id),
+			h.Popover("auto"),
+			h.AriaLabel(label),
+			h.Class("rail"),
+			h.OnMount(FollowRailDrawer())
+		], [h.div([h.Class("rail-head")], [h.span([h.Class("label")], [label]), view$2({
+			glyph: "cross",
+			label: "Close",
+			onClick: Message.ClickedClose()
+		}, h)]), ...toAsideView(toggleButton)]),
+		...isHidden ? [] : [splitter]
+	])), "@gjermundgaraba/pixel-paper/rail/rail.js#anonymous~14");
+});
+export { DRAWER_QUERY, FocusRailToggle, FollowRailDrawer, HideRailDrawer, Message, Model, OutMessage, ShowRailDrawer, WIDTH, close, drawerFocusOutMessage, drawerToggleMessage, firstTabStop, id, init, isOpen, subscriptions, toggle, update, view, widthChangeMessage };

package/dist/reel/index.d.ts

@@ -0,0 +1,6 @@
+import { Layout, OutMessage, Pane, apply } from "./layout.js";
+import { Action, AnnounceReel, Arrangement, FocusPane, InitConfig, Message, Model, PaneRender, ScrollIntoView, UpdateContext, ViewInputs, focusedPaneId, init, perform, reconcile, subscriptions, update, view } from "./reel.js";
+declare namespace index_d_exports {
+  export { Action, AnnounceReel, Arrangement, FocusPane, InitConfig, Layout, Message, Model, OutMessage, Pane, PaneRender, ScrollIntoView, UpdateContext, ViewInputs, apply, focusedPaneId, init, perform, reconcile, subscriptions, update, view };
+}
+export { Action, AnnounceReel, Arrangement, FocusPane, type InitConfig, Layout, Message, Model, OutMessage, Pane, type PaneRender, ScrollIntoView, type UpdateContext, type ViewInputs, apply, focusedPaneId, index_d_exports, init, perform, reconcile, subscriptions, update, view };

package/dist/reel/index.js

@@ -0,0 +1,26 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { Layout, OutMessage, Pane, apply } from "./layout.js";
+import { Action, AnnounceReel, Arrangement, FocusPane, Message, Model, ScrollIntoView, focusedPaneId, init, perform, reconcile, subscriptions, update, view } from "./reel.js";
+// src/reel/index.ts
+var reel_exports = /* @__PURE__ */ __exportAll({
+	Action: () => __foldkitBrandViewResult((Action), "@gjermundgaraba/pixel-paper/reel/index.js#Action"),
+	AnnounceReel: () => __foldkitBrandViewResult((AnnounceReel), "@gjermundgaraba/pixel-paper/reel/index.js#AnnounceReel"),
+	Arrangement: () => __foldkitBrandViewResult((Arrangement), "@gjermundgaraba/pixel-paper/reel/index.js#Arrangement"),
+	FocusPane: () => __foldkitBrandViewResult((FocusPane), "@gjermundgaraba/pixel-paper/reel/index.js#FocusPane"),
+	Layout: () => __foldkitBrandViewResult((Layout), "@gjermundgaraba/pixel-paper/reel/index.js#Layout"),
+	Message: () => __foldkitBrandViewResult((Message), "@gjermundgaraba/pixel-paper/reel/index.js#Message"),
+	Model: () => __foldkitBrandViewResult((Model), "@gjermundgaraba/pixel-paper/reel/index.js#Model"),
+	OutMessage: () => __foldkitBrandViewResult((OutMessage), "@gjermundgaraba/pixel-paper/reel/index.js#OutMessage"),
+	Pane: () => __foldkitBrandViewResult((Pane), "@gjermundgaraba/pixel-paper/reel/index.js#Pane"),
+	ScrollIntoView: () => __foldkitBrandViewResult((ScrollIntoView), "@gjermundgaraba/pixel-paper/reel/index.js#ScrollIntoView"),
+	apply: () => __foldkitBrandViewResult((apply), "@gjermundgaraba/pixel-paper/reel/index.js#apply"),
+	focusedPaneId: () => __foldkitBrandViewResult((focusedPaneId), "@gjermundgaraba/pixel-paper/reel/index.js#focusedPaneId"),
+	init: () => __foldkitBrandViewResult((init), "@gjermundgaraba/pixel-paper/reel/index.js#init"),
+	perform: () => __foldkitBrandViewResult((perform), "@gjermundgaraba/pixel-paper/reel/index.js#perform"),
+	reconcile: () => __foldkitBrandViewResult((reconcile), "@gjermundgaraba/pixel-paper/reel/index.js#reconcile"),
+	subscriptions: () => __foldkitBrandViewResult((subscriptions), "@gjermundgaraba/pixel-paper/reel/index.js#subscriptions"),
+	update: () => __foldkitBrandViewResult((update), "@gjermundgaraba/pixel-paper/reel/index.js#update"),
+	view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/reel/index.js#view")
+});
+export { Action, AnnounceReel, Arrangement, FocusPane, Layout, Message, Model, OutMessage, Pane, ScrollIntoView, apply, focusedPaneId, init, perform, reconcile, reel_exports, subscriptions, update, view };

package/dist/reel/layout.d.ts

@@ -0,0 +1,58 @@
+import { Option, Schema } from "effect";
+/** Schema for one pane as the reel knows it: its id, unique in the reel and the application's
+ *  to keep, its name in words (its grip, its splitter and what screen readers hear), and its
+ *  share of its column's height, a weight against its neighbours'. */
+export declare const Pane: Schema.Struct<{
+  readonly id: Schema.String;
+  readonly label: Schema.String;
+  readonly weight: Schema.Finite;
+}>;
+export type Pane = typeof Pane.Type;
+/** Schema for a reel's layout: its columns, left to right. The application's to keep. */
+export declare const Layout: Schema.$Array<Schema.Struct<{
+  readonly id: Schema.String;
+  readonly width: Schema.Finite;
+  readonly panes: Schema.NonEmptyArray<Schema.Struct<{
+    readonly id: Schema.String;
+    readonly label: Schema.String;
+    readonly weight: Schema.Finite;
+  }>>;
+}>>;
+export type Layout = typeof Layout.Type;
+/** Union of what a reel asks the application to do to its layout, which the application
+ *  applies (`apply` does it) or not, by id, so a request still means what it meant after the
+ *  layout changed under it. `MovedPane`: a pane into a column, at `toIndex` among that
+ *  column's other panes. `PulledOutPane`: a pane into a column of its own, before a column
+ *  (none: after the last). `MovedColumn`: a column to before another (none: last).
+ *  `ResizedColumn`: a column's width. `ResizedPanes`: a column's panes' weights, by pane id. */
+export declare const OutMessage: import("foldkit/message").MessageUnion<{
+  readonly MovedPane: {
+    paneId: Schema.String;
+    toColumnId: Schema.String;
+    toIndex: Schema.Finite;
+  };
+  readonly PulledOutPane: {
+    paneId: Schema.String;
+    maybeBeforeColumnId: Schema.Option<Schema.String>;
+  };
+  readonly MovedColumn: {
+    columnId: Schema.String;
+    maybeBeforeColumnId: Schema.Option<Schema.String>;
+  };
+  readonly ResizedColumn: {
+    columnId: Schema.String;
+    width: Schema.Finite;
+  };
+  readonly ResizedPanes: {
+    columnId: Schema.String;
+    weights: Schema.$Record<Schema.String, Schema.Finite>;
+  };
+}>;
+export type OutMessage = typeof OutMessage.Type;
+/**
+ * The layout once `request` is applied: what the reel asked, done the way every client does
+ * it. A pane that leaves its column takes the mean weight of the column it joins; a column
+ * left without panes goes; a pane pulled out keeps its old column's width, in a column named
+ * for it. A request naming a pane or column the layout no longer has changes nothing.
+ */
+export declare const apply: (layout: Layout, request: OutMessage) => Layout;