@gjermundgaraba-designs/pixel-paper 0.20.1 → 0.22.0

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

@@ -2,12 +2,20 @@ import { Effect, Option, Schema } from "effect";
 import * as Command from "foldkit/command";
 import type { Html } from "foldkit/html";
 import * as Mount from "foldkit/mount";
+import * as Subscription from "foldkit/subscription";
 import type * as Update from "foldkit/update";
-/** 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. */
+/** 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. */
 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;
+    }>>;
 }>;
 export type Model = typeof Model.Type;
 /** Union of all Messages a rail can produce. `ClosedDrawer` is the browser closing it on
@@ -15,6 +23,22 @@ export type Model = typeof Model.Type;
  *  the window growing past 900px while it is open, where the rail is back in the page. */
 export declare const Message: import("foldkit/message").MessageUnion<{
     readonly ClickedOpen: {};
+    readonly PressedSplitter: {
+        pointerId: Schema.Number;
+        clientX: Schema.Number;
+        width: Schema.Number;
+    };
+    readonly MovedSplitter: {
+        clientX: Schema.Number;
+    };
+    readonly ReleasedSplitter: {
+        clientX: Schema.Number;
+    };
+    readonly CancelledSplitter: {};
+    readonly PressedEscape: {};
+    readonly PressedSplitterKey: {
+        width: Schema.Number;
+    };
     readonly ClickedClose: {};
     readonly ClosedDrawer: {};
     readonly BlurredDrawer: {};
@@ -23,12 +47,21 @@ export declare const Message: import("foldkit/message").MessageUnion<{
     readonly CompletedHideRailDrawer: {};
 }>;
 export type Message = typeof Message.Type;
+/** 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`. */
+export declare const OutMessage: import("foldkit/message").MessageUnion<{
+    readonly ResizedRail: {
+        width: Schema.Number;
+    };
+}>;
+export type OutMessage = typeof OutMessage.Type;
 /** Configuration for creating a rail with `init`. The `id` is the rail's, unique in the
  *  document. */
 export type InitConfig = Readonly<{
     id: string;
 }>;
-/** Creates a rail, closed. */
+/** Creates a rail, closed, its splitter at rest. */
 export declare const init: (config: InitConfig) => Model;
 /** The rail's id, unique in the document. */
 export declare const id: (model: Model) => string;
@@ -55,14 +88,25 @@ export declare const HideRailDrawer: Command.CommandDefinitionWithArgs<"HideRail
 type UpdateReturn = Update.Return<Model, Message>;
 /** Closes the rail's drawer, focus back on its button. */
 export declare const close: (model: Model) => UpdateReturn;
-/** Processes a rail Message and returns the next Model and Commands. */
+/** 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. */
 export declare const update: (model: Model, message: Message) => Readonly<{
     model: {
         readonly id: string;
         readonly isOpen: boolean;
+        readonly maybeResizing: Option.Option<{
+            readonly pointerId: number;
+            readonly pressX: number;
+            readonly fromWidth: number;
+            readonly width: number;
+        }>;
     };
     commands?: Update.Commands<{
+        readonly _tag: "PressedEscape";
+    } | {
         readonly _tag: "BlurredDrawer";
+    } | {
+        readonly _tag: "CancelledSplitter";
     } | {
         readonly _tag: "ClickedClose";
     } | {
@@ -73,10 +117,27 @@ export declare const update: (model: Model, message: Message) => Readonly<{
         readonly _tag: "CompletedHideRailDrawer";
     } | {
         readonly _tag: "CompletedShowRailDrawer";
+    } | {
+        readonly _tag: "MovedSplitter";
+        readonly clientX: number;
+    } | {
+        readonly _tag: "PressedSplitter";
+        readonly pointerId: number;
+        readonly clientX: number;
+        readonly width: number;
+    } | {
+        readonly _tag: "PressedSplitterKey";
+        readonly width: number;
+    } | {
+        readonly _tag: "ReleasedSplitter";
+        readonly clientX: number;
     } | {
         readonly _tag: "WidenedPastDrawer";
     }, never>;
-    outMessage?: never;
+    outMessage?: {
+        readonly _tag: "ResizedRail";
+        readonly width: number;
+    };
 }>;
 type DrawerMessage = typeof Message.ClosedDrawer.Type | typeof Message.BlurredDrawer.Type | typeof Message.WidenedPastDrawer.Type;
 /** The window crossing the drawer's width: growing past it while the drawer is open closes
@@ -98,28 +159,138 @@ export declare const FollowRailDrawer: Mount.MountDefinitionNoArgs<"FollowRailDr
 } | {
     readonly _tag: "WidenedPastDrawer";
 }>;
+/** 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 declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) => {
+    readonly resize: Subscription.EntryWithoutKeepAlive<{
+        readonly id: string;
+        readonly isOpen: boolean;
+        readonly maybeResizing: Option.Option<{
+            readonly pointerId: number;
+            readonly pressX: number;
+            readonly fromWidth: number;
+            readonly width: number;
+        }>;
+    }, {
+        readonly _tag: "PressedEscape";
+    } | {
+        readonly _tag: "BlurredDrawer";
+    } | {
+        readonly _tag: "CancelledSplitter";
+    } | {
+        readonly _tag: "ClickedClose";
+    } | {
+        readonly _tag: "ClickedOpen";
+    } | {
+        readonly _tag: "ClosedDrawer";
+    } | {
+        readonly _tag: "CompletedHideRailDrawer";
+    } | {
+        readonly _tag: "CompletedShowRailDrawer";
+    } | {
+        readonly _tag: "MovedSplitter";
+        readonly clientX: number;
+    } | {
+        readonly _tag: "PressedSplitter";
+        readonly pointerId: number;
+        readonly clientX: number;
+        readonly width: number;
+    } | {
+        readonly _tag: "PressedSplitterKey";
+        readonly width: number;
+    } | {
+        readonly _tag: "ReleasedSplitter";
+        readonly clientX: number;
+    } | {
+        readonly _tag: "WidenedPastDrawer";
+    }, {
+        readonly maybePointerId: Option.Option<number>;
+    }, never> & {
+        readonly __subscription: never;
+    };
+    readonly escape: Subscription.EntryWithoutKeepAlive<{
+        readonly id: string;
+        readonly isOpen: boolean;
+        readonly maybeResizing: Option.Option<{
+            readonly pointerId: number;
+            readonly pressX: number;
+            readonly fromWidth: number;
+            readonly width: number;
+        }>;
+    }, {
+        readonly _tag: "PressedEscape";
+    } | {
+        readonly _tag: "BlurredDrawer";
+    } | {
+        readonly _tag: "CancelledSplitter";
+    } | {
+        readonly _tag: "ClickedClose";
+    } | {
+        readonly _tag: "ClickedOpen";
+    } | {
+        readonly _tag: "ClosedDrawer";
+    } | {
+        readonly _tag: "CompletedHideRailDrawer";
+    } | {
+        readonly _tag: "CompletedShowRailDrawer";
+    } | {
+        readonly _tag: "MovedSplitter";
+        readonly clientX: number;
+    } | {
+        readonly _tag: "PressedSplitter";
+        readonly pointerId: number;
+        readonly clientX: number;
+        readonly width: number;
+    } | {
+        readonly _tag: "PressedSplitterKey";
+        readonly width: number;
+    } | {
+        readonly _tag: "ReleasedSplitter";
+        readonly clientX: number;
+    } | {
+        readonly _tag: "WidenedPastDrawer";
+    }, {
+        readonly isResizing: boolean;
+    }, never> & {
+        readonly __subscription: never;
+    };
+} extends infer T ? { readonly [Key in keyof T as `${Prefix}${Capitalize<Key>}`]: T[Key]; } : never;
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
 export type ViewInputs = Readonly<{
-    /** Names the rail for screen readers, and its button and drawer head (`"collections"`). */
+    /** Names the rail for screen readers, and its button, drawer head and splitter
+     *  (`"collections"`). */
     label: string;
+    /** The width the reader gave the rail, in pixels, as the parent keeps it from `ResizedRail`
+     *  (for this client: another reader's window is not this one's); none for the stylesheet's.
+     *  A width out of the rail's bounds prints at the nearer bound. */
+    maybeWidth: Option.Option<number>;
     /** The rail's panels: a tree, places, filters. 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: () => ReadonlyArray<Html>;
-    /** The deck beside the rail, usually `main.deck#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`. */
+    /** 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`. */
     toDeckView: (openButton: Html) => Html;
 }>;
 /**
  * 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]`. 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
+ * `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
+ * `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 `--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.
+ *
  * 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.
@@ -127,8 +298,18 @@ export type ViewInputs = Readonly<{
 export declare const view: import("foldkit/submodel").View<{
     readonly id: string;
     readonly isOpen: boolean;
+    readonly maybeResizing: Option.Option<{
+        readonly pointerId: number;
+        readonly pressX: number;
+        readonly fromWidth: number;
+        readonly width: number;
+    }>;
 }, {
+    readonly _tag: "PressedEscape";
+} | {
     readonly _tag: "BlurredDrawer";
+} | {
+    readonly _tag: "CancelledSplitter";
 } | {
     readonly _tag: "ClickedClose";
 } | {
@@ -139,18 +320,37 @@ export declare const view: import("foldkit/submodel").View<{
     readonly _tag: "CompletedHideRailDrawer";
 } | {
     readonly _tag: "CompletedShowRailDrawer";
+} | {
+    readonly _tag: "MovedSplitter";
+    readonly clientX: number;
+} | {
+    readonly _tag: "PressedSplitter";
+    readonly pointerId: number;
+    readonly clientX: number;
+    readonly width: number;
+} | {
+    readonly _tag: "PressedSplitterKey";
+    readonly width: number;
+} | {
+    readonly _tag: "ReleasedSplitter";
+    readonly clientX: number;
 } | {
     readonly _tag: "WidenedPastDrawer";
 }, Readonly<{
-    /** Names the rail for screen readers, and its button and drawer head (`"collections"`). */
+    /** Names the rail for screen readers, and its button, drawer head and splitter
+     *  (`"collections"`). */
     label: string;
+    /** The width the reader gave the rail, in pixels, as the parent keeps it from `ResizedRail`
+     *  (for this client: another reader's window is not this one's); none for the stylesheet's.
+     *  A width out of the rail's bounds prints at the nearer bound. */
+    maybeWidth: Option.Option<number>;
     /** The rail's panels: a tree, places, filters. 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: () => ReadonlyArray<Html>;
-    /** The deck beside the rail, usually `main.deck#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`. */
+    /** 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`. */
     toDeckView: (openButton: Html) => Html;
 }>>;
 export {};

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, Option, Schema, Stream } from "effect";
+import { Array, Cause, Effect, Number, Option, Schema, Stream } from "effect";
 import * as Command from "foldkit/command";
 import * as Dom from "foldkit/dom";
 import { defineMessageUnion } from "foldkit/message";
@@ -7,14 +7,27 @@ import * as Mount from "foldkit/mount";
 import * as Render from "foldkit/render";
 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
-/** 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. */
+/** 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,
+});
+/** 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. */
 export const Model = Schema.Struct({
     id: Schema.String,
     isOpen: Schema.Boolean,
+    maybeResizing: Schema.Option(Resizing),
 });
 // MESSAGE
 /** Union of all Messages a rail can produce. `ClosedDrawer` is the browser closing it on
@@ -22,6 +35,12 @@ 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: {},
+    PressedSplitter: { pointerId: Schema.Number, clientX: Schema.Number, width: Schema.Number },
+    MovedSplitter: { clientX: Schema.Number },
+    ReleasedSplitter: { clientX: Schema.Number },
+    CancelledSplitter: {},
+    PressedEscape: {},
+    PressedSplitterKey: { width: Schema.Number },
     ClickedClose: {},
     ClosedDrawer: {},
     BlurredDrawer: {},
@@ -29,8 +48,27 @@ export const Message = defineMessageUnion({
     CompletedShowRailDrawer: {},
     CompletedHideRailDrawer: {},
 });
-/** Creates a rail, closed. */
-export const init = (config) => (__foldkitBrandViewResult(({ id: config.id, isOpen: false }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#init"));
+/** 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`. */
+export const OutMessage = defineMessageUnion({
+    ResizedRail: { width: Schema.Number },
+});
+/** Creates a rail, closed, its splitter at rest. */
+export const init = (config) => (__foldkitBrandViewResult(({
+    id: config.id,
+    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. */
+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. */
 export const id = (model) => __foldkitBrandViewResult((model.id), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#id");
@@ -85,9 +123,35 @@ 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");
-/** Processes a rail Message and returns the next Model and Commands. */
+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");
+/** 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. */
 export const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
     ClickedOpen: () => __foldkitBrandViewResult((open(model)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#ClickedOpen"),
+    PressedSplitter: ({ pointerId, clientX, width }) => __foldkitBrandViewResult((Option.isSome(model.maybeResizing)
+        ? { model }
+        : {
+            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 }) }),
+        }), "@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")),
+    PressedEscape: () => (__foldkitBrandViewResult(({ model: withResizing(model, Option.none()) }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#PressedEscape")),
+    PressedSplitterKey: ({ width }) => (__foldkitBrandViewResult(({
+        model,
+        outMessage: OutMessage.ResizedRail({ width: bounded(width) }),
+    }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#PressedSplitterKey")),
     ClickedClose: () => __foldkitBrandViewResult((close(model)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#ClickedClose"),
     ClosedDrawer: () => __foldkitBrandViewResult((close(model)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#ClosedDrawer"),
     BlurredDrawer: () => __foldkitBrandViewResult((closeDrawer(model, false)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#BlurredDrawer"),
@@ -102,10 +166,10 @@ const DRAWER_QUERY = "(max-width: 900px)";
 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~7"))), "@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~8"))), "@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~8"))), "@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~9"))), "@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. */
@@ -126,27 +190,61 @@ 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~9")));
+        }).pipe(Stream.filter(Option.isSome), Stream.map(({ value }) => __foldkitBrandViewResult((value), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~10")));
         return __foldkitBrandViewResult((Stream.mergeAll([fromToggle, fromFocusOut, fromWidth], {
             concurrency: "unbounded",
         })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#execute~3");
     },
 });
+// 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")),
+        }), "@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"),
+            onSome: (pointerId) => __foldkitBrandViewResult((Stream.merge(pointerMessages(pointerId, {
+                moved: ({ clientX }) => __foldkitBrandViewResult((Message.MovedSplitter({ clientX })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#moved"),
+                released: ({ clientX }) => __foldkitBrandViewResult((Message.ReleasedSplitter({ clientX })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#released"),
+                cancelled: () => __foldkitBrandViewResult((Message.CancelledSplitter()), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#cancelled"),
+            }), markDragging)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#onSome~2"),
+        })), "@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")),
+        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")));
+/** 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]`. 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
+ * `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
+ * `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 `--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.
+ *
  * 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 openButton = h.span([h.Class("rail-open")], [
         Button.view({
             label,
@@ -162,7 +260,10 @@ export const view = defineView((model, viewInputs, 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")], [
+    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"))),
+    ], [
         toDeckView(openButton),
         h.aside([
             h.Id(model.id),
@@ -177,5 +278,22 @@ export const view = defineView((model, viewInputs, h) => {
             ]),
             ...toAsideView(),
         ]),
-    ])), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~10");
+        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: bounded(width + direction * WIDTH.step) })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#onStep"),
+            }, h),
+        ]),
+    ])), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~13");
 });

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

@@ -1,4 +1,4 @@
 export { Layout, OutMessage, Pane, apply } from "./layout.ts";
-export { Action, AnnounceReel, FocusGrip, FocusPane, Message, Model, RestoreFocus, ScrollIntoView, SizeLiftedPane, focusedPaneId, init, perform, reconcile, subscriptions, update, view, } from "./reel.ts";
+export { Action, AnnounceReel, FocusPane, Message, Model, RestoreFocus, ScrollIntoView, SizeLiftedPane, focusedPaneId, init, perform, reconcile, subscriptions, update, view, } 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,SAAS,EACT,SAAS,EACT,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;AAC9D,OAAO,EACL,MAAM,EACN,YAAY,EACZ,SAAS,EACT,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"}

package/dist/src/reel/index.js

@@ -1,2 +1,2 @@
 export { Layout, OutMessage, Pane, apply } from "./layout.js";
-export { Action, AnnounceReel, FocusGrip, FocusPane, Message, Model, RestoreFocus, ScrollIntoView, SizeLiftedPane, focusedPaneId, init, perform, reconcile, subscriptions, update, view, } from "./reel.js";
+export { Action, AnnounceReel, FocusPane, Message, Model, RestoreFocus, ScrollIntoView, SizeLiftedPane, focusedPaneId, init, perform, reconcile, subscriptions, update, view, } from "./reel.js";