@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/dist/src/rail/rail.d.ts

@@ -12,10 +12,10 @@ export declare const Model: Schema.Struct<{
     readonly id: Schema.String;
     readonly isOpen: Schema.Boolean;
     readonly maybeResizing: Schema.Option<Schema.Struct<{
-        readonly pointerId: Schema.Number;
-        readonly pressX: Schema.Number;
-        readonly fromWidth: Schema.Number;
-        readonly width: Schema.Number;
+        readonly pointerId: Schema.Finite;
+        readonly pressX: Schema.Finite;
+        readonly fromWidth: Schema.Finite;
+        readonly width: Schema.Finite;
     }>>;
 }>;
 export type Model = typeof Model.Type;
@@ -26,20 +26,20 @@ export declare const Message: import("foldkit/message").MessageUnion<{
     readonly ClickedOpen: {};
     readonly ClickedToggle: {};
     readonly PressedSplitter: {
-        pointerId: Schema.Number;
-        clientX: Schema.Number;
-        width: Schema.Number;
+        pointerId: Schema.Finite;
+        clientX: Schema.Finite;
+        width: Schema.Finite;
     };
     readonly MovedSplitter: {
-        clientX: Schema.Number;
+        clientX: Schema.Finite;
     };
     readonly ReleasedSplitter: {
-        clientX: Schema.Number;
+        clientX: Schema.Finite;
     };
     readonly CancelledSplitter: {};
     readonly PressedEscape: {};
     readonly PressedSplitterKey: {
-        width: Schema.Number;
+        width: Schema.Finite;
     };
     readonly ClickedClose: {};
     readonly ClosedDrawer: {};
@@ -57,7 +57,7 @@ export type Message = typeof Message.Type;
  *  `isHidden`. */
 export declare const OutMessage: import("foldkit/message").MessageUnion<{
     readonly ResizedRail: {
-        width: Schema.Number;
+        width: Schema.Finite;
     };
     readonly ToggledRail: {};
 }>;
@@ -69,25 +69,16 @@ export type InitConfig = Readonly<{
 }>;
 /** Creates a rail, closed, its splitter at rest. */
 export declare const init: (config: InitConfig) => Model;
-/** 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 declare const WIDTH: {
     start: number;
-    least: number;
-    most: number;
-    step: number;
+    leastFittingPanels: number;
+    mostLeavingLeastDeck: number;
+    arrowStep: number;
 };
 /** The rail's id, unique in the document. */
 export declare const id: (model: Model) => string;
 /** Whether the rail is open as a drawer: a parent pauses its own page keys while it is. */
 export declare const isOpen: (model: Model) => boolean;
-/** 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 declare const firstTabStop: (rail: Element) => Option.Option<HTMLElement>;
 /** Opens the rail as a drawer over the page and puts focus on its first control past its
  *  head. */
@@ -179,16 +170,9 @@ export declare const update: (model: Model, message: Message) => Readonly<{
     };
 }>;
 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 declare 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 declare const widthChangeMessage: (isDrawerWidth: boolean, isDrawerOpen: boolean) => Option.Option<DrawerMessage>;
-/** The browser closing the drawer (Escape, a press on the veil); a toggle that opened it says
- *  nothing. */
 export declare const drawerToggleMessage: (event: Pick<ToggleEvent, "newState">) => Option.Option<DrawerMessage>;
-/** Focus leaving the drawer while it is open (`isDrawerOpen`, the rail matching
- *  `:popover-open`); focus moving inside it says nothing. */
 export declare const drawerFocusOutMessage: (rail: Element, event: FocusEvent, isDrawerOpen: boolean) => Option.Option<DrawerMessage>;
 /** 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
@@ -325,7 +309,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`. */
@@ -422,7 +406,7 @@ export declare const view: import("foldkit/submodel").View<{
      *  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`. */

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

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

package/dist/src/rail/rail.js

@@ -1,5 +1,5 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
-import { Array, Cause, Effect, Number, Option, Schema, Stream } from "effect";
+import { Array, Effect, Number, Option, Schema, Stream } from "effect";
 import * as Command from "foldkit/command";
 import * as Dom from "foldkit/dom";
 import { defineMessageUnion } from "foldkit/message";
@@ -9,17 +9,15 @@ import { modifyFields } from "foldkit/struct";
 import { defineView } from "foldkit/submodel";
 import * as Subscription from "foldkit/subscription";
 import * as Button from "../button/button.js";
-import { escapeKeys, markDragging, pointerMessages, splitterAttributes } from "../drag/drag.js";
-import * as IconButton from "../iconButton/iconButton.js";
-import { prefixKeys } from "../subscription/prefixKeys.js";
-// MODEL
-/** A splitter a pointer drags: pressed at `pressX` on a rail `fromWidth` wide, and the width
- *  it previews. */
+import { htmlElement } from "../dom/html-element.js";
+import { escapeKeys, markDragging, pointerMessages, splitterAttributes, } from "../drag/drag.js";
+import * as IconButton from "../icon-button/icon-button.js";
+import { prefixKeys } from "../subscription/prefix-keys.js";
 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
  *  in the page and this stays false), and its splitter while a pointer drags it. Its width,
@@ -29,19 +27,22 @@ export const Model = Schema.Struct({
     isOpen: Schema.Boolean,
     maybeResizing: Schema.Option(Resizing),
 });
-// MESSAGE
 /** 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. */
 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: {},
@@ -56,7 +57,7 @@ export const Message = defineMessageUnion({
  *  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: {},
 });
 /** Creates a rail, closed, its splitter at rest. */
@@ -65,29 +66,29 @@ export const init = (config) => (__foldkitBrandViewResult(({
     isOpen: false,
     maybeResizing: Option.none(),
 }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#init"));
-// WIDTH
-/** 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 };
-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
+const WIDEST_DRAWER_WINDOW = 900;
+const NARROWEST_RAILED_WINDOW = WIDEST_DRAWER_WINDOW + 1;
+const LEAST_DECK_WIDTH = 421;
+export const WIDTH = {
+    start: 272,
+    leastFittingPanels: 220,
+    mostLeavingLeastDeck: NARROWEST_RAILED_WINDOW - LEAST_DECK_WIDTH,
+    arrowStep: 16,
+};
+const bounded = (width) => __foldkitBrandViewResult((Math.round(Number.clamp(width, {
+    minimum: WIDTH.leastFittingPanels,
+    maximum: WIDTH.mostLeavingLeastDeck,
+}))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#bounded");
 /** The rail's id, unique in the document. */
 export const id = (model) => __foldkitBrandViewResult((model.id), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#id");
 /** 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, 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");
+const findRail = (railId) => __foldkitBrandViewResult((Effect.suspend(() => __foldkitBrandViewResult((Effect.fromOption(htmlElement(`#${CSS.escape(railId)}`))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous"))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#findRail");
+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", {
@@ -97,7 +98,9 @@ export const ShowRailDrawer = Command.define("ShowRailDrawer", {
         yield* Render.afterCommit;
         const rail = yield* findRail(railId);
         if (!rail.matches(":popover-open")) {
-            yield* Effect.try(() => __foldkitBrandViewResult((rail.showPopover()), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~4"));
+            yield* Effect.try(() => {
+                rail.showPopover();
+            });
         }
         const control = yield* Effect.fromOption(firstTabStop(rail));
         control.focus();
@@ -105,15 +108,23 @@ 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 }) => __foldkitBrandViewResult((Effect.gen(function* () {
         yield* Render.afterCommit;
         const rail = yield* findRail(railId);
         if (rail.matches(":popover-open")) {
-            yield* Effect.try(() => __foldkitBrandViewResult((rail.hidePopover()), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~6"));
+            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-designs/pixel-paper/src/rail/rail.js#execute~2"),
+    }).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
@@ -122,7 +133,6 @@ 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;
@@ -135,11 +145,14 @@ const closeDrawer = (model, isReturningFocus) => __foldkitBrandViewResult((model
     ? {
         model: modifyFields(model, { isOpen: () => __foldkitBrandViewResult((false), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#isOpen~2") }),
         commands: [
-            HideRailDrawer({ railId: model.id, buttonId: openButtonId(model), isReturningFocus }),
+            HideRailDrawer({
+                railId: model.id,
+                buttonId: openButtonId(model),
+                isReturningFocus,
+            }),
         ],
     }
     : { model }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#closeDrawer");
-/** Opens the rail's drawer and moves focus to its first Tab stop. */
 const open = (model) => (__foldkitBrandViewResult(({
     model: modifyFields(model, { isOpen: () => __foldkitBrandViewResult((true), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#isOpen~3") }),
     commands: [ShowRailDrawer({ railId: model.id })],
@@ -154,7 +167,6 @@ export const toggle = (model) => (__foldkitBrandViewResult(({
     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),
@@ -164,18 +176,28 @@ const dragTo = (model, clientX) => __foldkitBrandViewResult((withResizing(model,
  *  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")),
+    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 }
         : {
-            model: withResizing(model, Option.some({ pointerId, pressX: clientX, fromWidth: width, width })),
+            model: withResizing(model, Option.some({
+                pointerId,
+                pressX: clientX,
+                fromWidth: width,
+                width,
+            })),
         }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#PressedSplitter"),
     MovedSplitter: ({ clientX }) => (__foldkitBrandViewResult(({ model: dragTo(model, clientX) }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#MovedSplitter")),
     ReleasedSplitter: ({ clientX }) => __foldkitBrandViewResult((Option.match(dragTo(model, clientX).maybeResizing, {
         onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#onNone")),
         onSome: ({ fromWidth, width }) => (__foldkitBrandViewResult(({
             model: withResizing(model, Option.none()),
-            ...(width === fromWidth ? {} : { outMessage: OutMessage.ResizedRail({ width }) }),
+            ...(width === fromWidth
+                ? {}
+                : { outMessage: OutMessage.ResizedRail({ width }) }),
         }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#onSome")),
     })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#ReleasedSplitter"),
     CancelledSplitter: () => (__foldkitBrandViewResult(({ model: withResizing(model, Option.none()) }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#CancelledSplitter")),
@@ -192,22 +214,23 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
     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. */
-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 DRAWER_QUERY = `(max-width: ${WIDEST_DRAWER_WINDOW}px)`;
+export const widthChangeMessage = (isDrawerWidth, isDrawerOpen) => __foldkitBrandViewResult((!isDrawerWidth && isDrawerOpen
+    ? Option.some(Message.WidenedPastDrawer())
+    : Option.none()), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#widthChangeMessage");
 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~10"))), "@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. */
 export const FollowRailDrawer = Mount.defineStream("FollowRailDrawer", {
-    messages: [Message.ClosedDrawer, Message.BlurredDrawer, Message.WidenedPastDrawer],
+    messages: [
+        Message.ClosedDrawer,
+        Message.BlurredDrawer,
+        Message.WidenedPastDrawer,
+    ],
     execute: ({ element }) => {
         const isDrawerOpen = () => __foldkitBrandViewResult((element.matches(":popover-open")), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#isDrawerOpen");
         const fromToggle = Dom.streamFromEventFilterMap({
@@ -229,9 +252,8 @@ export const FollowRailDrawer = Mount.defineStream("FollowRailDrawer", {
         })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#execute~4");
     },
 });
-// SUBSCRIPTION
 const railSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResult(({
-    resize: entry({ maybePointerId: Schema.Option(Schema.Number) }, {
+    resize: entry({ maybePointerId: Schema.Option(Schema.Finite) }, {
         modelToDependencies: (model) => (__foldkitBrandViewResult(({
             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")),
@@ -245,7 +267,9 @@ const railSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResu
         })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#dependenciesToStream"),
     }),
     escape: entry({ isResizing: Schema.Boolean }, {
-        modelToDependencies: (model) => (__foldkitBrandViewResult(({ isResizing: Option.isSome(model.maybeResizing) }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#modelToDependencies~2")),
+        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~12")));
@@ -309,7 +333,11 @@ export const view = defineView((model, viewInputs, h) => {
                 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)],
+            attributes: [
+                h.Id(toggleId(model)),
+                h.AriaExpanded(!isHidden),
+                h.AriaControls(model.id),
+            ],
         }, h),
     ]);
     const splitter = h.div([
@@ -317,8 +345,8 @@ export const view = defineView((model, viewInputs, h) => {
         h.Role("separator"),
         h.AriaLabel(`Width of ${label}`),
         h.AriaControls(model.id),
-        h.AriaValuemin(WIDTH.least),
-        h.AriaValuemax(WIDTH.most),
+        h.AriaValuemin(WIDTH.leastFittingPanels),
+        h.AriaValuemax(WIDTH.mostLeavingLeastDeck),
         h.AriaValuenow(width),
         h.AriaValuetext(`${width} pixels`),
         h.Tabindex(0),
@@ -326,11 +354,11 @@ export const view = defineView((model, viewInputs, h) => {
             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"),
+            onStep: (direction) => __foldkitBrandViewResult((Message.PressedSplitterKey({
+                width: width + direction * WIDTH.arrowStep,
+            })), "@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(isHidden ? "railed folded" : "railed"),
         ...(isHidden
@@ -347,7 +375,11 @@ export const view = defineView((model, viewInputs, h) => {
         ], [
             h.div([h.Class("rail-head")], [
                 h.span([h.Class("label")], [label]),
-                IconButton.view({ glyph: "cross", label: "Close", onClick: Message.ClickedClose() }, h),
+                IconButton.view({
+                    glyph: "cross",
+                    label: "Close",
+                    onClick: Message.ClickedClose(),
+                }, h),
             ]),
             ...toAsideView(toggleButton),
         ]),

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

@@ -1,4 +1,4 @@
 export { Layout, OutMessage, Pane, apply } from "./layout.ts";
 export { Action, AnnounceReel, Arrangement, FocusPane, FocusTab, Message, Model, RestoreFocus, ScrollIntoView, SizeLiftedPane, focusedPaneId, init, perform, reconcile, subscriptions, update, view, } from "./reel.ts";
-export type { InitConfig, PaneRender, UpdateContext, ViewInputs } from "./reel.ts";
+export type { InitConfig, PaneRender, UpdateContext, ViewInputs, } from "./reel.ts";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/reel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,EACL,YAAY,EACZ,cAAc,EACd,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,SAAS,EACT,aAAa,EACb,MAAM,EACN,IAAI,GACL,MAAM,WAAW,CAAC;AACnB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/reel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAE9D,OAAO,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,EACL,YAAY,EACZ,cAAc,EACd,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,SAAS,EACT,aAAa,EACb,MAAM,EACN,IAAI,GACL,MAAM,WAAW,CAAC;AAEnB,YAAY,EACV,UAAU,EACV,UAAU,EACV,aAAa,EACb,UAAU,GACX,MAAM,WAAW,CAAC"}