@gjermundgaraba-designs/pixel-paper 0.22.2 → 0.24.0

package/dist/src/rail/rail.js

@@ -22,8 +22,8 @@ const Resizing = Schema.Struct({
     width: Schema.Number,
 });
 /** 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 is
- *  the parent's. */
+ *  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. */
 export const Model = Schema.Struct({
     id: Schema.String,
     isOpen: Schema.Boolean,
@@ -35,6 +35,7 @@ export const Model = Schema.Struct({
  *  the window growing past 900px while it is open, where the rail is back in the page. */
 export const Message = defineMessageUnion({
     ClickedOpen: {},
+    ClickedToggle: {},
     PressedSplitter: { pointerId: Schema.Number, clientX: Schema.Number, width: Schema.Number },
     MovedSplitter: { clientX: Schema.Number },
     ReleasedSplitter: { clientX: Schema.Number },
@@ -47,12 +48,16 @@ export const Message = defineMessageUnion({
     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`. */
+ *  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`. */
 export const OutMessage = defineMessageUnion({
     ResizedRail: { width: Schema.Number },
+    ToggledRail: {},
 });
 /** Creates a rail, closed, its splitter at rest. */
 export const init = (config) => (__foldkitBrandViewResult(({
@@ -67,7 +72,7 @@ export const init = (config) => (__foldkitBrandViewResult(({
  *  (which leaves the deck at least 421px of a 901px window, the narrowest one the rail stands
  *  in, more than a phone has), and what an arrow on its splitter moves it. The bounds and the
  *  step are the component's, not tokens: the splitter says them as its values. */
-const WIDTH = { start: 272, least: 220, most: 480, step: 16 };
+export const WIDTH = { start: 272, least: 220, most: 480, step: 16 };
 const bounded = (width) => __foldkitBrandViewResult((Math.round(Number.clamp(width, { minimum: WIDTH.least, maximum: WIDTH.most }))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#bounded");
 // ACCESSORS
 /** The rail's id, unique in the document. */
@@ -75,12 +80,14 @@ export const id = (model) => __foldkitBrandViewResult((model.id), "@gjermundgara
 /** Whether the rail is open as a drawer: a parent pauses its own page keys while it is. */
 export const isOpen = (model) => __foldkitBrandViewResult((model.isOpen), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#isOpen");
 const openButtonId = (model) => __foldkitBrandViewResult((`${model.id}-open`), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#openButtonId");
+const toggleId = (model) => __foldkitBrandViewResult((`${model.id}-toggle`), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#toggleId");
 // COMMAND
 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.fromNullishOr(document.querySelector(`#${CSS.escape(railId)}`))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous"))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#findRail");
 /** The drawer's first Tab stop past its head: a control the keyboard reaches, so a tree's
- *  items other than its one stop (`tabindex="-1"`) are passed over. */
-export const firstTabStop = (rail) => __foldkitBrandViewResult((Array.findFirst(Array.fromIterable(rail.querySelectorAll(`.rail-head ~ * :is(${FOCUSABLE})`)), (control) => __foldkitBrandViewResult((control.tabIndex >= 0 && control.closest("[inert], [hidden]") === null), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~2"))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#firstTabStop");
+ *  items other than its one stop (`tabindex="-1"`) are passed over, and so is the toggle,
+ *  which the drawer does not print. */
+export 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-designs/pixel-paper/src/rail/rail.js#anonymous~2"))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#firstTabStop");
 /** Opens the rail as a drawer over the page and puts focus on its first control past its
  *  head. */
 export const ShowRailDrawer = Command.define("ShowRailDrawer", {
@@ -108,6 +115,22 @@ export const HideRailDrawer = Command.define("HideRailDrawer", {
         }
     }).pipe(Effect.ignore, Effect.andThen(isReturningFocus ? Dom.focus(`#${CSS.escape(buttonId)}`).pipe(Effect.ignore) : Effect.void), Effect.as(Message.CompletedHideRailDrawer()))), "@gjermundgaraba-designs/pixel-paper/src/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. */
+export const FocusRailToggle = Command.define("FocusRailToggle", {
+    args: { railId: Schema.String, toggleId: Schema.String },
+    messages: [Message.CompletedFocusRailToggle],
+    execute: ({ railId, toggleId: buttonId }) => __foldkitBrandViewResult((Effect.gen(function* () {
+        // NOTE: read before the fold renders, which takes away the control focus is on
+        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-designs/pixel-paper/src/rail/rail.js#execute~3"),
+});
 const closeDrawer = (model, isReturningFocus) => __foldkitBrandViewResult((model.isOpen
     ? {
         model: modifyFields(model, { isOpen: () => __foldkitBrandViewResult((false), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#isOpen~2") }),
@@ -123,16 +146,25 @@ const open = (model) => (__foldkitBrandViewResult(({
 }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#open"));
 /** Closes the rail's drawer, focus back on its button. */
 export const close = (model) => __foldkitBrandViewResult((closeDrawer(model, true)), "@gjermundgaraba-designs/pixel-paper/src/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. */
+export const toggle = (model) => (__foldkitBrandViewResult(({
+    model,
+    commands: [FocusRailToggle({ railId: model.id, toggleId: toggleId(model) })],
+}), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#toggle"));
 const withResizing = (model, maybeResizing) => __foldkitBrandViewResult((modifyFields(model, { maybeResizing: () => __foldkitBrandViewResult((maybeResizing), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#maybeResizing") })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#withResizing");
 /** The width a dragged splitter previews with the pointer at `clientX`. */
 const dragTo = (model, clientX) => __foldkitBrandViewResult((withResizing(model, Option.map(model.maybeResizing, (resizing) => (__foldkitBrandViewResult(({
     ...resizing,
     width: bounded(resizing.fromWidth + clientX - resizing.pressX),
-}), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~7"))))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#dragTo");
+}), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~8"))))), "@gjermundgaraba-designs/pixel-paper/src/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. */
+ *  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. */
 export const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
     ClickedOpen: () => __foldkitBrandViewResult((open(model)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#ClickedOpen"),
+    ClickedToggle: () => (__foldkitBrandViewResult(({ ...toggle(model), outMessage: OutMessage.ToggledRail() }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#ClickedToggle")),
     PressedSplitter: ({ pointerId, clientX, width }) => __foldkitBrandViewResult((Option.isSome(model.maybeResizing)
         ? { model }
         : {
@@ -158,18 +190,19 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
     WidenedPastDrawer: () => __foldkitBrandViewResult((closeDrawer(model, false)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#WidenedPastDrawer"),
     CompletedShowRailDrawer: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#CompletedShowRailDrawer")),
     CompletedHideRailDrawer: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#CompletedHideRailDrawer")),
+    CompletedFocusRailToggle: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#CompletedFocusRailToggle")),
 })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#update");
 /** The width at and under which the rail is a drawer, as the stylesheet has it. */
-const DRAWER_QUERY = "(max-width: 900px)";
+export const DRAWER_QUERY = "(max-width: 900px)";
 /** The window crossing the drawer's width: growing past it while the drawer is open closes
  *  the drawer, since the rail is back in the page there. */
 export const widthChangeMessage = (isDrawerWidth, isDrawerOpen) => __foldkitBrandViewResult((!isDrawerWidth && isDrawerOpen ? Option.some(Message.WidenedPastDrawer()) : Option.none()), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#widthChangeMessage");
 /** The browser closing the drawer (Escape, a press on the veil); a toggle that opened it says
  *  nothing. */
-export const drawerToggleMessage = (event) => __foldkitBrandViewResult((Option.liftPredicate(Message.ClosedDrawer(), () => __foldkitBrandViewResult((event.newState === "closed"), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~8"))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#drawerToggleMessage");
+export const drawerToggleMessage = (event) => __foldkitBrandViewResult((Option.liftPredicate(Message.ClosedDrawer(), () => __foldkitBrandViewResult((event.newState === "closed"), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~9"))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#drawerToggleMessage");
 /** Focus leaving the drawer while it is open (`isDrawerOpen`, the rail matching
  *  `:popover-open`); focus moving inside it says nothing. */
-export const drawerFocusOutMessage = (rail, event, isDrawerOpen) => __foldkitBrandViewResult((Option.liftPredicate(Message.BlurredDrawer(), () => __foldkitBrandViewResult((isDrawerOpen && event.relatedTarget instanceof Node && !rail.contains(event.relatedTarget)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~9"))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#drawerFocusOutMessage");
+export const drawerFocusOutMessage = (rail, event, isDrawerOpen) => __foldkitBrandViewResult((Option.liftPredicate(Message.BlurredDrawer(), () => __foldkitBrandViewResult((isDrawerOpen && event.relatedTarget instanceof Node && !rail.contains(event.relatedTarget)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~10"))), "@gjermundgaraba-designs/pixel-paper/src/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. */
@@ -190,17 +223,17 @@ export const FollowRailDrawer = Mount.defineStream("FollowRailDrawer", {
         const fromWidth = Dom.streamFromMediaQuery({
             query: DRAWER_QUERY,
             mapMatches: (isDrawerWidth) => __foldkitBrandViewResult((widthChangeMessage(isDrawerWidth, isDrawerOpen())), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#mapMatches"),
-        }).pipe(Stream.filter(Option.isSome), Stream.map(({ value }) => __foldkitBrandViewResult((value), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~10")));
+        }).pipe(Stream.filter(Option.isSome), Stream.map(({ value }) => __foldkitBrandViewResult((value), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~11")));
         return __foldkitBrandViewResult((Stream.mergeAll([fromToggle, fromFocusOut, fromWidth], {
             concurrency: "unbounded",
-        })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#execute~3");
+        })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#execute~4");
     },
 });
 // SUBSCRIPTION
 const railSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResult(({
     resize: entry({ maybePointerId: Schema.Option(Schema.Number) }, {
         modelToDependencies: (model) => (__foldkitBrandViewResult(({
-            maybePointerId: Option.map(model.maybeResizing, ({ pointerId }) => __foldkitBrandViewResult((pointerId), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~12")),
+            maybePointerId: Option.map(model.maybeResizing, ({ pointerId }) => __foldkitBrandViewResult((pointerId), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~13")),
         }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#modelToDependencies")),
         dependenciesToStream: ({ maybePointerId }) => __foldkitBrandViewResult((Option.match(maybePointerId, {
             onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#onNone~2"),
@@ -215,17 +248,18 @@ const railSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResu
         modelToDependencies: (model) => (__foldkitBrandViewResult(({ isResizing: Option.isSome(model.maybeResizing) }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#modelToDependencies~2")),
         dependenciesToStream: ({ isResizing }) => __foldkitBrandViewResult((isResizing ? escapeKeys(Message.PressedEscape()) : Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#dependenciesToStream~2"),
     }),
-}), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~11")));
+}), "@gjermundgaraba-designs/pixel-paper/src/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`. */
 export const subscriptions = (keyPrefix) => __foldkitBrandViewResult((prefixKeys(keyPrefix, railSubscriptions)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#subscriptions");
 /**
- * A column of panels beside the deck, fixed under the top bar and scrolling itself:
- * `div.railed >` the deck, then `aside.rail[popover="auto"][aria-label]`, then its splitter,
- * `div.rail-resize[role="separator"]`, on its right edge. One element serves both layouts, so
- * nothing in it renders twice or loses its state. At 900px and under it leaves the page, and
+ * 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
@@ -233,18 +267,25 @@ export const subscriptions = (keyPrefix) => __foldkitBrandViewResult((prefixKeys
  *
  * 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 `--rail` on `div.railed`, so the page's padding and the
- * rail's width follow it. The drawer keeps its own width. Lift `subscriptions(keyPrefix)` into
- * the application's, or a dragged splitter follows nothing.
+ * `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.
  */
 export const view = defineView((model, viewInputs, h) => {
-    const { label, toAsideView, toDeckView } = viewInputs;
-    const maybeWidth = Option.orElse(Option.map(model.maybeResizing, ({ width }) => __foldkitBrandViewResult((width), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~14")), () => __foldkitBrandViewResult((Option.map(viewInputs.maybeWidth, bounded)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~15"));
-    const width = Option.getOrElse(maybeWidth, () => __foldkitBrandViewResult((WIDTH.start), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~16"));
+    const { label, isHidden, maybeToggleKeyHint, toAsideView, toDeckView } = viewInputs;
+    const maybeWidth = Option.orElse(Option.map(model.maybeResizing, ({ width }) => __foldkitBrandViewResult((width), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~15")), () => __foldkitBrandViewResult((Option.map(viewInputs.maybeWidth, bounded)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~16"));
+    const width = Option.getOrElse(maybeWidth, () => __foldkitBrandViewResult((WIDTH.start), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~17"));
     const openButton = h.span([h.Class("rail-open")], [
         Button.view({
             label,
@@ -258,11 +299,43 @@ export const view = defineView((model, viewInputs, h) => {
             ],
         }, h),
     ]);
+    const toggleButton = h.span([h.Class("rail-toggle")], [
+        IconButton.view({
+            glyph: "sidebar",
+            label: `${isHidden ? "Show" : "Hide"} ${label}`,
+            isQuiet: true,
+            onClick: Message.ClickedToggle(),
+            ...Option.match(maybeToggleKeyHint, {
+                onNone: () => (__foldkitBrandViewResult(({}), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#onNone~3")),
+                onSome: (keyHint) => (__foldkitBrandViewResult(({ keyHint }), "@gjermundgaraba-designs/pixel-paper/src/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.least),
+        h.AriaValuemax(WIDTH.most),
+        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-designs/pixel-paper/src/rail/rail.js#onPress"),
+            onStep: (direction) => __foldkitBrandViewResult((Message.PressedSplitterKey({ width: width + direction * WIDTH.step })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#onStep"),
+        }, h),
+    ]);
     // NOTE: the deck comes first so the page's main content, and its h1, precede the rail's
     // panels in reading order; the stylesheet places the rail, fixed, at the left.
     return __foldkitBrandViewResult((h.div([
-        h.Class("railed"),
-        ...Array.fromOption(Option.map(maybeWidth, (shown) => __foldkitBrandViewResult((h.Style({ "--rail": `${shown}px` })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~17"))),
+        h.Class(isHidden ? "railed folded" : "railed"),
+        ...(isHidden
+            ? []
+            : Array.fromOption(Option.map(maybeWidth, (shown) => __foldkitBrandViewResult((h.Style({ "--railed-width": `${shown}px` })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~18")))),
     ], [
         toDeckView(openButton),
         h.aside([
@@ -276,24 +349,8 @@ export const view = defineView((model, viewInputs, h) => {
                 h.span([h.Class("label")], [label]),
                 IconButton.view({ glyph: "cross", label: "Close", onClick: Message.ClickedClose() }, h),
             ]),
-            ...toAsideView(),
-        ]),
-        h.div([
-            h.Class("rail-resize"),
-            h.Role("separator"),
-            h.AriaLabel(`Width of ${label}`),
-            h.AriaControls(model.id),
-            h.AriaValuemin(WIDTH.least),
-            h.AriaValuemax(WIDTH.most),
-            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-designs/pixel-paper/src/rail/rail.js#onPress"),
-                onStep: (direction) => __foldkitBrandViewResult((Message.PressedSplitterKey({ width: width + direction * WIDTH.step })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#onStep"),
-            }, h),
+            ...toAsideView(toggleButton),
         ]),
-    ])), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~13");
+        ...(isHidden ? [] : [splitter]),
+    ])), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~14");
 });

package/dist/src/reel/layout.d.ts

@@ -122,6 +122,9 @@ export declare const firstPlace: (layout: Layout) => Option.Option<Place>;
  * 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;
+/** Whether `request` changes `layout`: a move, a drop or a stop that would leave it as it is
+ *  is passed over. */
+export declare const isChange: (layout: Layout, request: OutMessage) => boolean;
 export declare const widthWords: (width: number) => string;
 /** The next preset wider than `width`, or the narrowest past the widest. */
 export declare const nextPreset: (width: number) => number;
@@ -152,19 +155,20 @@ export declare const isTargetPresent: (layout: Layout, target: Target) => boolea
  *  with nothing further that way, it stays (where the pane started, if the target's column has
  *  gone). */
 export declare const steppedTarget: (layout: Layout, paneId: string, target: Target, step: Step) => Target;
-/** A column as a pointer reads it: its id, its left and right edges, and the vertical middles
- *  of its slots, the held pane's left out. */
+/** A column as a pointer reads it: its id and its left and right edges. */
 export type ColumnBox = Readonly<{
     id: string;
     left: number;
     right: number;
-    slotMiddles: ReadonlyArray<number>;
 }>;
 /** Where a pointer at (`clientX`, `clientY`) over a reel whose columns sit at `columns`, left
  *  to right, would drop a pane. Over a column's edge band (or over a gap, or past the last
  *  column) it lands in that gap, as a column of its own; over the rest of a column it lands
- *  among that column's other panes, after each whose middle is above the pointer. */
-export declare const targetAtPoint: (columns: ReadonlyArray<ColumnBox>, clientX: number, clientY: number) => Target;
+ *  among that column's other panes, after each whose middle is above the pointer.
+ *  `slotMiddlesOf` gives the vertical middles of a column's slots, by its index, the held
+ *  pane's left out: it is asked for the column the pointer is over alone, and only when the
+ *  pointer is among its panes. */
+export declare const targetAtPoint: (columns: ReadonlyArray<ColumnBox>, clientX: number, clientY: number, slotMiddlesOf: (index: number) => ReadonlyArray<number>) => Target;
 /** What moving `splitter` by `share` asks of the layout, from the sizes the layout holds (not
  *  the sizes printed, which the stylesheet may hold at a minimum): a width splitter adds
  *  `share` to its column's width; a pane splitter moves `share` of its column's height from

package/dist/src/reel/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/reel/layout.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/reel/layout.ts"],"names":[],"mappings":"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"}

package/dist/src/reel/layout.js

@@ -158,6 +158,9 @@ export const apply = (layout, request) => __foldkitBrandViewResult((OutMessage.m
         }), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~18"))),
     }), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~17")))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#ResizedPanes"),
 })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#apply");
+/** Whether `request` changes `layout`: a move, a drop or a stop that would leave it as it is
+ *  is passed over. */
+export const isChange = (layout, request) => __foldkitBrandViewResult((!Equal.equals(apply(layout, request), layout)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#isChange");
 // WIDTHS
 /** How close a width is to a preset to count as it. */
 const PRESET_TOLERANCE = 0.01;
@@ -216,7 +219,7 @@ export const originOf = (layout, paneId) => __foldkitBrandViewResult((Option.map
 export const requestOf = (layout, paneId, target) => __foldkitBrandViewResult((Option.liftPredicate(Target.match(target, {
     Into: ({ columnId, index }) => __foldkitBrandViewResult((OutMessage.MovedPane({ paneId, toColumnId: columnId, toIndex: index })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Into"),
     Gap: ({ maybeBeforeColumnId }) => __foldkitBrandViewResult((OutMessage.PulledOutPane({ paneId, maybeBeforeColumnId })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#Gap"),
-}), (request) => __foldkitBrandViewResult((!Equal.equals(apply(layout, request), layout)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~29"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#requestOf");
+}), (request) => __foldkitBrandViewResult((isChange(layout, request)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~29"))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#requestOf");
 /** Where the pane `paneId` would be once dropped at `target`, in words. */
 export const landingWords = (layout, paneId, target) => __foldkitBrandViewResult((Option.match(requestOf(layout, paneId, target), {
     onNone: () => __foldkitBrandViewResult((WHERE_IT_WAS), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onNone~7"),
@@ -295,10 +298,13 @@ const gapBefore = (columns, gap) => __foldkitBrandViewResult((Target.Gap({ maybe
 /** Where a pointer at (`clientX`, `clientY`) over a reel whose columns sit at `columns`, left
  *  to right, would drop a pane. Over a column's edge band (or over a gap, or past the last
  *  column) it lands in that gap, as a column of its own; over the rest of a column it lands
- *  among that column's other panes, after each whose middle is above the pointer. */
-export const targetAtPoint = (columns, clientX, clientY) => __foldkitBrandViewResult((pipe(Array.findFirstIndex(columns, ({ right }) => __foldkitBrandViewResult((clientX <= right), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~42")), Option.flatMap((index) => __foldkitBrandViewResult((Option.map(Array.get(columns, index), (box) => (__foldkitBrandViewResult(({ index, box }), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~44")))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~43")), Option.match({
+ *  among that column's other panes, after each whose middle is above the pointer.
+ *  `slotMiddlesOf` gives the vertical middles of a column's slots, by its index, the held
+ *  pane's left out: it is asked for the column the pointer is over alone, and only when the
+ *  pointer is among its panes. */
+export const targetAtPoint = (columns, clientX, clientY, slotMiddlesOf) => __foldkitBrandViewResult((pipe(Array.findFirstIndex(columns, ({ right }) => __foldkitBrandViewResult((clientX <= right), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~42")), Option.flatMap((index) => __foldkitBrandViewResult((Option.map(Array.get(columns, index), (box) => (__foldkitBrandViewResult(({ index, box }), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~44")))), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~43")), Option.match({
     onNone: () => __foldkitBrandViewResult((gapBefore(columns, columns.length)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onNone~11"),
-    onSome: ({ index, box: { id, left, right, slotMiddles } }) => {
+    onSome: ({ index, box: { id, left, right } }) => {
         const band = Math.min((right - left) * EDGE_SHARE, EDGE_MAX);
         if (clientX < left + band) {
             return __foldkitBrandViewResult((gapBefore(columns, index)), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome~11");
@@ -309,7 +315,7 @@ export const targetAtPoint = (columns, clientX, clientY) => __foldkitBrandViewRe
         else {
             return __foldkitBrandViewResult((Target.Into({
                 columnId: id,
-                index: Array.filter(slotMiddles, (middle) => __foldkitBrandViewResult((middle < clientY), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~45")).length,
+                index: Array.filter(slotMiddlesOf(index), (middle) => __foldkitBrandViewResult((middle < clientY), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#anonymous~45")).length,
             })), "@gjermundgaraba-designs/pixel-paper/src/reel/layout.js#onSome~11");
         }
     },

package/dist/src/reel/reel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reel.d.ts","sourceRoot":"","sources":["../../../src/reel/reel.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"reel.d.ts","sourceRoot":"","sources":["../../../src/reel/reel.ts"],"names":[],"mappings":"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"}