@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/rail/rail.ts

@@ -1,4 +1,5 @@
-import { Array, Cause, Effect, Number, Option, Schema, Stream } from "effect";
+import type { Cause } from "effect";
+import { Array, Effect, Number, Option, Schema, Stream } from "effect";
 import * as Command from "foldkit/command";
 import * as Dom from "foldkit/dom";
 import type { Html } from "foldkit/html";
@@ -11,19 +12,21 @@ import * as Subscription from "foldkit/subscription";
 import type * as Update from "foldkit/update";
 
 import * as Button from "../button/button.ts";
-import { escapeKeys, markDragging, pointerMessages, splitterAttributes } from "../drag/drag.ts";
-import * as IconButton from "../iconButton/iconButton.ts";
-import { prefixKeys } from "../subscription/prefixKeys.ts";
+import { htmlElement } from "../dom/html-element.ts";
+import {
+  escapeKeys,
+  markDragging,
+  pointerMessages,
+  splitterAttributes,
+} from "../drag/drag.ts";
+import * as IconButton from "../icon-button/icon-button.ts";
+import { prefixKeys } from "../subscription/prefix-keys.ts";
 
-// MODEL
-
-/** A splitter a pointer drags: pressed at `pressX` on a rail `fromWidth` wide, and the width
- *  it previews. */
 const Resizing = Schema.Struct({
-  pointerId: Schema.Number,
-  pressX: Schema.Number,
-  fromWidth: Schema.Number,
-  width: Schema.Number,
+  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
@@ -34,9 +37,8 @@ export const Model = Schema.Struct({
   isOpen: Schema.Boolean,
   maybeResizing: Schema.Option(Resizing),
 });
-export type Model = typeof Model.Type;
 
-// MESSAGE
+export type Model = typeof Model.Type;
 
 /** 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
@@ -44,12 +46,16 @@ export type Model = typeof Model.Type;
 export const Message = defineMessageUnion({
   ClickedOpen: {},
   ClickedToggle: {},
-  PressedSplitter: { pointerId: Schema.Number, clientX: Schema.Number, width: Schema.Number },
-  MovedSplitter: { clientX: Schema.Number },
-  ReleasedSplitter: { clientX: Schema.Number },
+  PressedSplitter: {
+    pointerId: Schema.Finite,
+    clientX: Schema.Finite,
+    width: Schema.Finite,
+  },
+  MovedSplitter: { clientX: Schema.Finite },
+  ReleasedSplitter: { clientX: Schema.Finite },
   CancelledSplitter: {},
   PressedEscape: {},
-  PressedSplitterKey: { width: Schema.Number },
+  PressedSplitterKey: { width: Schema.Finite },
   ClickedClose: {},
   ClosedDrawer: {},
   BlurredDrawer: {},
@@ -58,6 +64,7 @@ export const Message = defineMessageUnion({
   CompletedHideRailDrawer: {},
   CompletedFocusRailToggle: {},
 });
+
 export type Message = typeof Message.Type;
 
 /** What a rail asks of its parent. `ResizedRail`: its splitter was let go, or stepped by a
@@ -66,12 +73,11 @@ export type Message = typeof Message.Type;
  *  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 },
+  ResizedRail: { width: Schema.Finite },
   ToggledRail: {},
 });
-export type OutMessage = typeof OutMessage.Type;
 
-// INIT
+export type OutMessage = typeof OutMessage.Type;
 
 /** Configuration for creating a rail with `init`. The `id` is the rail's, unique in the
  *  document. */
@@ -84,20 +90,24 @@ export const init = (config: InitConfig): Model => ({
   maybeResizing: Option.none(),
 });
 
-// WIDTH
+const WIDEST_DRAWER_WINDOW = 900;
+const NARROWEST_RAILED_WINDOW = WIDEST_DRAWER_WINDOW + 1;
+const LEAST_DECK_WIDTH = 421;
 
-/** The rail's widths, in pixels: before the reader sizes it (as the stylesheet's `--rail` has
- *  it, which the splitter says as its value until a width is given), the least its panels
- *  still fit in (a tree's row keeps a glyph, a dot and a few words of its title), the most
- *  (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. */
-export const WIDTH = { start: 272, least: 220, most: 480, step: 16 };
+export const WIDTH = {
+  start: 272,
+  leastFittingPanels: 220,
+  mostLeavingLeastDeck: NARROWEST_RAILED_WINDOW - LEAST_DECK_WIDTH,
+  arrowStep: 16,
+};
 
 const bounded = (width: number): number =>
-  Math.round(Number.clamp(width, { minimum: WIDTH.least, maximum: WIDTH.most }));
-
-// ACCESSORS
+  Math.round(
+    Number.clamp(width, {
+      minimum: WIDTH.leastFittingPanels,
+      maximum: WIDTH.mostLeavingLeastDeck,
+    })
+  );
 
 /** The rail's id, unique in the document. */
 export const id = (model: Model): string => model.id;
@@ -109,24 +119,24 @@ const openButtonId = (model: Model): string => `${model.id}-open`;
 
 const toggleId = (model: Model): string => `${model.id}-toggle`;
 
-// COMMAND
-
 const FOCUSABLE =
   "a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]";
 
-const findRail = (railId: string): Effect.Effect<HTMLElement, Cause.NoSuchElementError> =>
+const findRail = (
+  railId: string
+): Effect.Effect<HTMLElement, Cause.NoSuchElementError> =>
   Effect.suspend(() =>
-    Effect.fromNullishOr(document.querySelector<HTMLElement>(`#${CSS.escape(railId)}`)),
+    Effect.fromOption(htmlElement(`#${CSS.escape(railId)}`))
   );
 
-/** 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, and so is the toggle,
- *  which the drawer does not print. */
 export const firstTabStop = (rail: Element): Option.Option<HTMLElement> =>
   Array.findFirst(
-    Array.fromIterable(rail.querySelectorAll<HTMLElement>(`.rail-head ~ * :is(${FOCUSABLE})`)),
+    Array.fromIterable(
+      rail.querySelectorAll<HTMLElement>(`.rail-head ~ * :is(${FOCUSABLE})`)
+    ),
     (control) =>
-      control.tabIndex >= 0 && control.closest("[inert], [hidden], .rail-toggle") === null,
+      control.tabIndex >= 0 &&
+      control.closest("[inert], [hidden], .rail-toggle") === null
   );
 
 /** Opens the rail as a drawer over the page and puts focus on its first control past its
@@ -138,9 +148,13 @@ export const ShowRailDrawer = Command.define("ShowRailDrawer", {
     Effect.gen(function* () {
       yield* Render.afterCommit;
       const rail = yield* findRail(railId);
+
       if (!rail.matches(":popover-open")) {
-        yield* Effect.try(() => rail.showPopover());
+        yield* Effect.try(() => {
+          rail.showPopover();
+        });
       }
+
       const control = yield* Effect.fromOption(firstTabStop(rail));
       control.focus();
     }).pipe(Effect.ignore, Effect.as(Message.CompletedShowRailDrawer())),
@@ -148,21 +162,30 @@ export const ShowRailDrawer = Command.define("ShowRailDrawer", {
 
 /** Closes the drawer, and puts focus back on the button that opened it when asked. */
 export const HideRailDrawer = Command.define("HideRailDrawer", {
-  args: { railId: Schema.String, buttonId: Schema.String, isReturningFocus: Schema.Boolean },
+  args: {
+    railId: Schema.String,
+    buttonId: Schema.String,
+    isReturningFocus: Schema.Boolean,
+  },
   messages: [Message.CompletedHideRailDrawer],
   execute: ({ railId, buttonId, isReturningFocus }) =>
     Effect.gen(function* () {
       yield* Render.afterCommit;
       const rail = yield* findRail(railId);
+
       if (rail.matches(":popover-open")) {
-        yield* Effect.try(() => rail.hidePopover());
+        yield* Effect.try(() => {
+          rail.hidePopover();
+        });
       }
     }).pipe(
       Effect.ignore,
       Effect.andThen(
-        isReturningFocus ? Dom.focus(`#${CSS.escape(buttonId)}`).pipe(Effect.ignore) : Effect.void,
+        isReturningFocus
+          ? Dom.focus(`#${CSS.escape(buttonId)}`).pipe(Effect.ignore)
+          : Effect.void
       ),
-      Effect.as(Message.CompletedHideRailDrawer()),
+      Effect.as(Message.CompletedHideRailDrawer())
     ),
 });
 
@@ -174,19 +197,20 @@ export const FocusRailToggle = Command.define("FocusRailToggle", {
   messages: [Message.CompletedFocusRailToggle],
   execute: ({ railId, toggleId: buttonId }) =>
     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;
+        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())),
 });
 
-// UPDATE
-
 type UpdateReturn = Update.Return<Model, Message>;
 
 const closeDrawer = (model: Model, isReturningFocus: boolean): UpdateReturn =>
@@ -194,12 +218,15 @@ const closeDrawer = (model: Model, isReturningFocus: boolean): UpdateReturn =>
     ? {
         model: modifyFields(model, { isOpen: () => false }),
         commands: [
-          HideRailDrawer({ railId: model.id, buttonId: openButtonId(model), isReturningFocus }),
+          HideRailDrawer({
+            railId: model.id,
+            buttonId: openButtonId(model),
+            isReturningFocus,
+          }),
         ],
       }
     : { model };
 
-/** Opens the rail's drawer and moves focus to its first Tab stop. */
 const open = (model: Model): UpdateReturn => ({
   model: modifyFields(model, { isOpen: () => true }),
   commands: [ShowRailDrawer({ railId: model.id })],
@@ -216,120 +243,141 @@ export const toggle = (model: Model): UpdateReturn => ({
   commands: [FocusRailToggle({ railId: model.id, toggleId: toggleId(model) })],
 });
 
-const withResizing = (model: Model, maybeResizing: Option.Option<typeof Resizing.Type>): Model =>
-  modifyFields(model, { maybeResizing: () => maybeResizing });
+const withResizing = (
+  model: Model,
+  maybeResizing: Option.Option<typeof Resizing.Type>
+): Model => modifyFields(model, { maybeResizing: () => maybeResizing });
 
-/** The width a dragged splitter previews with the pointer at `clientX`. */
 const dragTo = (model: Model, clientX: number): Model =>
   withResizing(
     model,
     Option.map(model.maybeResizing, (resizing) => ({
       ...resizing,
       width: bounded(resizing.fromWidth + clientX - resizing.pressX),
-    })),
+    }))
   );
 
 /** 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. */
 export const update = (model: Model, message: Message) =>
-  Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(message, {
-    ClickedOpen: () => open(model),
-    ClickedToggle: () => ({ ...toggle(model), outMessage: OutMessage.ToggledRail() }),
-    PressedSplitter: ({ pointerId, clientX, width }) =>
-      Option.isSome(model.maybeResizing)
-        ? { model }
-        : {
-            model: withResizing(
-              model,
-              Option.some({ pointerId, pressX: clientX, fromWidth: width, width }),
-            ),
-          },
-    MovedSplitter: ({ clientX }) => ({ model: dragTo(model, clientX) }),
-    ReleasedSplitter: ({ clientX }) =>
-      Option.match(dragTo(model, clientX).maybeResizing, {
-        onNone: () => ({ model }),
-        onSome: ({ fromWidth, width }) => ({
-          model: withResizing(model, Option.none()),
-          ...(width === fromWidth ? {} : { outMessage: OutMessage.ResizedRail({ width }) }),
+  Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(
+    message,
+    {
+      ClickedOpen: () => open(model),
+      ClickedToggle: () => ({
+        ...toggle(model),
+        outMessage: OutMessage.ToggledRail(),
+      }),
+      PressedSplitter: ({ pointerId, clientX, width }) =>
+        Option.isSome(model.maybeResizing)
+          ? { model }
+          : {
+              model: withResizing(
+                model,
+                Option.some({
+                  pointerId,
+                  pressX: clientX,
+                  fromWidth: width,
+                  width,
+                })
+              ),
+            },
+      MovedSplitter: ({ clientX }) => ({ model: dragTo(model, clientX) }),
+      ReleasedSplitter: ({ clientX }) =>
+        Option.match(dragTo(model, clientX).maybeResizing, {
+          onNone: () => ({ model }),
+          onSome: ({ fromWidth, width }) => ({
+            model: withResizing(model, Option.none()),
+            ...(width === fromWidth
+              ? {}
+              : { outMessage: OutMessage.ResizedRail({ width }) }),
+          }),
         }),
+      CancelledSplitter: () => ({ model: withResizing(model, Option.none()) }),
+      PressedEscape: () => ({ model: withResizing(model, Option.none()) }),
+      PressedSplitterKey: ({ width }) => ({
+        model,
+        outMessage: OutMessage.ResizedRail({ width: bounded(width) }),
       }),
-    CancelledSplitter: () => ({ model: withResizing(model, Option.none()) }),
-    PressedEscape: () => ({ model: withResizing(model, Option.none()) }),
-    PressedSplitterKey: ({ width }) => ({
-      model,
-      outMessage: OutMessage.ResizedRail({ width: bounded(width) }),
-    }),
-    ClickedClose: () => close(model),
-    ClosedDrawer: () => close(model),
-    BlurredDrawer: () => closeDrawer(model, false),
-    WidenedPastDrawer: () => closeDrawer(model, false),
-    CompletedShowRailDrawer: () => ({ model }),
-    CompletedHideRailDrawer: () => ({ model }),
-    CompletedFocusRailToggle: () => ({ model }),
-  });
-
-// DRAWER EVENTS
+      ClickedClose: () => close(model),
+      ClosedDrawer: () => close(model),
+      BlurredDrawer: () => closeDrawer(model, false),
+      WidenedPastDrawer: () => closeDrawer(model, false),
+      CompletedShowRailDrawer: () => ({ model }),
+      CompletedHideRailDrawer: () => ({ model }),
+      CompletedFocusRailToggle: () => ({ model }),
+    }
+  );
 
 type DrawerMessage =
   | typeof Message.ClosedDrawer.Type
   | typeof Message.BlurredDrawer.Type
   | typeof Message.WidenedPastDrawer.Type;
 
-/** The width at and under which the rail is a drawer, as the stylesheet has it. */
-export const DRAWER_QUERY = "(max-width: 900px)";
+export const DRAWER_QUERY = `(max-width: ${WIDEST_DRAWER_WINDOW}px)`;
 
-/** 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: boolean,
-  isDrawerOpen: boolean,
+  isDrawerOpen: boolean
 ): Option.Option<DrawerMessage> =>
-  !isDrawerWidth && isDrawerOpen ? Option.some(Message.WidenedPastDrawer()) : Option.none();
+  !isDrawerWidth && isDrawerOpen
+    ? Option.some(Message.WidenedPastDrawer())
+    : Option.none();
 
-/** The browser closing the drawer (Escape, a press on the veil); a toggle that opened it says
- *  nothing. */
 export const drawerToggleMessage = (
-  event: Pick<ToggleEvent, "newState">,
+  event: Pick<ToggleEvent, "newState">
 ): Option.Option<DrawerMessage> =>
-  Option.liftPredicate(Message.ClosedDrawer(), () => event.newState === "closed");
+  Option.liftPredicate(
+    Message.ClosedDrawer(),
+    () => event.newState === "closed"
+  );
 
-/** Focus leaving the drawer while it is open (`isDrawerOpen`, the rail matching
- *  `:popover-open`); focus moving inside it says nothing. */
 export const drawerFocusOutMessage = (
   rail: Element,
   event: FocusEvent,
-  isDrawerOpen: boolean,
+  isDrawerOpen: boolean
 ): Option.Option<DrawerMessage> =>
   Option.liftPredicate(
     Message.BlurredDrawer(),
     () =>
-      isDrawerOpen && event.relatedTarget instanceof Node && !rail.contains(event.relatedTarget),
+      isDrawerOpen &&
+      event.relatedTarget instanceof Node &&
+      !rail.contains(event.relatedTarget)
   );
 
 /** 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. */
 export const FollowRailDrawer = Mount.defineStream("FollowRailDrawer", {
-  messages: [Message.ClosedDrawer, Message.BlurredDrawer, Message.WidenedPastDrawer],
+  messages: [
+    Message.ClosedDrawer,
+    Message.BlurredDrawer,
+    Message.WidenedPastDrawer,
+  ],
   execute: ({ element }) => {
     const isDrawerOpen = (): boolean => element.matches(":popover-open");
+
     const fromToggle = Dom.streamFromEventFilterMap({
       target: element,
       type: "toggle",
       filterMapEvent: drawerToggleMessage,
     });
+
     const fromFocusOut = Dom.streamFromEventFilterMap({
       target: element,
       type: "focusout",
-      filterMapEvent: (event) => drawerFocusOutMessage(element, event, isDrawerOpen()),
+      filterMapEvent: (event) =>
+        drawerFocusOutMessage(element, event, isDrawerOpen()),
     });
+
     const fromWidth = Dom.streamFromMediaQuery({
       query: DRAWER_QUERY,
-      mapMatches: (isDrawerWidth) => widthChangeMessage(isDrawerWidth, isDrawerOpen()),
+      mapMatches: (isDrawerWidth) =>
+        widthChangeMessage(isDrawerWidth, isDrawerOpen()),
     }).pipe(
       Stream.filter(Option.isSome),
-      Stream.map(({ value }) => value),
+      Stream.map(({ value }) => value)
     );
 
     return Stream.mergeAll([fromToggle, fromFocusOut, fromWidth], {
@@ -338,14 +386,15 @@ export const FollowRailDrawer = Mount.defineStream("FollowRailDrawer", {
   },
 });
 
-// SUBSCRIPTION
-
 const railSubscriptions = Subscription.make<Model, Message>()((entry) => ({
   resize: entry(
-    { maybePointerId: Schema.Option(Schema.Number) },
+    { maybePointerId: Schema.Option(Schema.Finite) },
     {
       modelToDependencies: (model) => ({
-        maybePointerId: Option.map(model.maybeResizing, ({ pointerId }) => pointerId),
+        maybePointerId: Option.map(
+          model.maybeResizing,
+          ({ pointerId }) => pointerId
+        ),
       }),
       dependenciesToStream: ({ maybePointerId }) =>
         Option.match(maybePointerId, {
@@ -354,21 +403,24 @@ const railSubscriptions = Subscription.make<Model, Message>()((entry) => ({
             Stream.merge(
               pointerMessages<Message>(pointerId, {
                 moved: ({ clientX }) => Message.MovedSplitter({ clientX }),
-                released: ({ clientX }) => Message.ReleasedSplitter({ clientX }),
+                released: ({ clientX }) =>
+                  Message.ReleasedSplitter({ clientX }),
                 cancelled: () => Message.CancelledSplitter(),
               }),
-              markDragging,
+              markDragging
             ),
         }),
-    },
+    }
   ),
   escape: entry(
     { isResizing: Schema.Boolean },
     {
-      modelToDependencies: (model) => ({ isResizing: Option.isSome(model.maybeResizing) }),
+      modelToDependencies: (model) => ({
+        isResizing: Option.isSome(model.maybeResizing),
+      }),
       dependenciesToStream: ({ isResizing }) =>
         isResizing ? escapeKeys(Message.PressedEscape()) : Stream.empty,
-    },
+    }
   ),
 }));
 
@@ -379,8 +431,6 @@ const railSubscriptions = Subscription.make<Model, Message>()((entry) => ({
 export const subscriptions = <Prefix extends string>(keyPrefix: Prefix) =>
   prefixKeys(keyPrefix, railSubscriptions);
 
-// VIEW
-
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
 export type ViewInputs = Readonly<{
   /** Names the rail for screen readers, and its button, drawer head and splitter
@@ -400,7 +450,7 @@ export type ViewInputs = Readonly<{
    *  its first panel's `lead`. A function because a Submodel's viewInputs may hold functions
    *  only at the top level, and Foldkit runs this one in the parent's boundary, so the
    *  handlers in what it returns dispatch the parent's Messages. */
-  toAsideView: (toggle: Html) => ReadonlyArray<Html>;
+  toAsideView: (toggle: Html) => readonly Html[];
   /** The page beside the rail, `main.deck#main` or `main.bench#main`, given the button that
    *  opens the drawer to print first in it. A function because it receives that button, and
    *  runs in the parent's boundary like `toAsideView`. */
@@ -435,112 +485,128 @@ export type ViewInputs = Readonly<{
  * 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, Message, ViewInputs>((model, viewInputs, h): Html => {
-  const { label, isHidden, maybeToggleKeyHint, toAsideView, toDeckView } = viewInputs;
-  const maybeWidth = Option.orElse(
-    Option.map(model.maybeResizing, ({ width }) => width),
-    () => Option.map(viewInputs.maybeWidth, bounded),
-  );
-  const width = Option.getOrElse(maybeWidth, () => WIDTH.start);
+export const view = defineView<Model, Message, ViewInputs>(
+  (model, viewInputs, h): Html => {
+    const { label, isHidden, maybeToggleKeyHint, toAsideView, toDeckView } =
+      viewInputs;
+
+    const maybeWidth = Option.orElse(
+      Option.map(model.maybeResizing, ({ width }) => width),
+      () => Option.map(viewInputs.maybeWidth, bounded)
+    );
 
-  const openButton = h.span(
-    [h.Class("rail-open")],
-    [
-      Button.view(
-        {
-          label,
-          glyph: "sidebar",
-          isSmall: true,
-          onClick: Message.ClickedOpen(),
-          attributes: [
-            h.Id(openButtonId(model)),
-            h.AriaExpanded(model.isOpen),
-            h.AriaControls(model.id),
-          ],
-        },
-        h,
-      ),
-    ],
-  );
+    const width = Option.getOrElse(maybeWidth, () => WIDTH.start);
+
+    const openButton = h.span(
+      [h.Class("rail-open")],
+      [
+        Button.view(
+          {
+            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")],
-    [
-      IconButton.view(
+    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: () => ({}),
+              onSome: (keyHint) => ({ keyHint }),
+            }),
+            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(
         {
-          glyph: "sidebar",
-          label: `${isHidden ? "Show" : "Hide"} ${label}`,
-          isQuiet: true,
-          onClick: Message.ClickedToggle(),
-          ...Option.match(maybeToggleKeyHint, {
-            onNone: () => ({}),
-            onSome: (keyHint) => ({ keyHint }),
-          }),
-          attributes: [h.Id(toggleId(model)), h.AriaExpanded(!isHidden), h.AriaControls(model.id)],
+          orientation: "vertical",
+          isIdle: Option.isNone(model.maybeResizing),
+          onPress: (pointerId, clientX) =>
+            Message.PressedSplitter({ pointerId, clientX, width }),
+          onStep: (direction) =>
+            Message.PressedSplitterKey({
+              width: width + direction * WIDTH.arrowStep,
+            }),
         },
-        h,
+        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) => Message.PressedSplitter({ pointerId, clientX, width }),
-        onStep: (direction) =>
-          Message.PressedSplitterKey({ width: width + direction * WIDTH.step }),
-      },
-      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 h.div(
-    [
-      h.Class(isHidden ? "railed folded" : "railed"),
-      ...(isHidden
-        ? []
-        : Array.fromOption(
-            Option.map(maybeWidth, (shown) => h.Style({ "--railed-width": `${shown}px` })),
-          )),
-    ],
-    [
-      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]),
-              IconButton.view(
-                { glyph: "cross", label: "Close", onClick: Message.ClickedClose() },
-                h,
-              ),
-            ],
-          ),
-          ...toAsideView(toggleButton),
-        ],
-      ),
-      ...(isHidden ? [] : [splitter]),
-    ],
-  );
-});
+    ]);
+
+    return h.div(
+      [
+        h.Class(isHidden ? "railed folded" : "railed"),
+        ...(isHidden
+          ? []
+          : Array.fromOption(
+              Option.map(maybeWidth, (shown) =>
+                h.Style({ "--railed-width": `${shown}px` })
+              )
+            )),
+      ],
+      [
+        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]),
+                IconButton.view(
+                  {
+                    glyph: "cross",
+                    label: "Close",
+                    onClick: Message.ClickedClose(),
+                  },
+                  h
+                ),
+              ]
+            ),
+            ...toAsideView(toggleButton),
+          ]
+        ),
+        ...(isHidden ? [] : [splitter]),
+      ]
+    );
+  }
+);