@gjermundgaraba-designs/pixel-paper 0.22.2 → 0.24.0

package/dist/src/notice/notice.js

@@ -6,7 +6,8 @@ import * as Glyph from "../glyph/glyph.js";
  *  change, in ink. `Quiet`: tinted, nothing wrong. */
 export const Tone = Schema.Literals(["Warn", "Error", "Ok", "Quiet"]);
 const toneGlyph = (tone) => __foldkitBrandViewResult((Match.value(tone).pipe(Match.withReturnType(), Match.whenOr("Warn", "Error", () => __foldkitBrandViewResult(("bang"), "@gjermundgaraba-designs/pixel-paper/src/notice/notice.js#anonymous")), Match.when("Ok", () => __foldkitBrandViewResult(("check"), "@gjermundgaraba-designs/pixel-paper/src/notice/notice.js#anonymous~2")), Match.when("Quiet", () => __foldkitBrandViewResult(("info"), "@gjermundgaraba-designs/pixel-paper/src/notice/notice.js#anonymous~3")), Match.exhaustive)), "@gjermundgaraba-designs/pixel-paper/src/notice/notice.js#toneGlyph");
-const TONE_CLASS = {
+/** The class a tone adds to a notice's, a toast's or a glyph box's own. */
+export const TONE_CLASS = {
     Warn: "",
     Error: " error",
     Ok: " ok",

package/dist/src/panel/panel.d.ts

@@ -21,6 +21,9 @@ export type ViewConfig = Readonly<{
     /** Small Buttons and IconButtons at the title bar's right end, after the meta. On the ink
      *  bar they print in paper, flat, and ring in their own colour inside their edge. */
     actions?: ReadonlyArray<Html | string>;
+    /** A strip on the head tint between the title bar and the body, for a field that picks what
+     *  the body shows (an area over its tasks). Its labels print in on-head. */
+    shelf?: ReadonlyArray<Html | string>;
     body: ReadonlyArray<Html | string>;
     /** A ruled foot under the body: a note line, then actions pushed right. */
     foot?: ReadonlyArray<Html | string>;

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

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../src/panel/panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMtD,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC;;;;kCAI8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd;;oCAEgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;2DACuD;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;yFACqF;IACrF,OAAO,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACvC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,MAAuB,CAAC;AAE7D;8FAC8F;AAC9F,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAkC3E,CAAC"}
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../src/panel/panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMtD,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC;;;;kCAI8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd;;oCAEgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;2DACuD;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;yFACqF;IACrF,OAAO,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACvC;gFAC4E;IAC5E,KAAK,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACrC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,MAAuB,CAAC;AAE7D;8FAC8F;AAC9F,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAoC3E,CAAC"}

package/dist/src/panel/panel.js

@@ -5,7 +5,7 @@ export const titleId = (id) => __foldkitBrandViewResult((`${id}-title`), "@gjerm
 /** The unit of the system: paper in a 2px ink box on a 5px print shadow, under a title bar. A
  *  region landmark (`<section>`) named by its `h2` title, or by `name`, keyed by its `id`. */
 export const view = (config, h) => {
-    const { id, title, name, lead = [], meta, actions = [], body, foot = [], isFlush = false, } = config;
+    const { id, title, name, lead = [], meta, actions = [], shelf = [], body, foot = [], isFlush = false, } = config;
     return __foldkitBrandViewResult((h.keyed("section")(id, [
         h.Id(id),
         name === undefined ? h.AriaLabelledBy(titleId(id)) : h.AriaLabel(name),
@@ -17,6 +17,7 @@ export const view = (config, h) => {
             ...(meta === undefined ? [] : [h.span([h.Class("meta")], [meta])]),
             ...slotView("span", "panel-acts", actions, h),
         ]),
+        ...slotView("div", "panel-shelf", shelf, h),
         ...(isFlush ? body : [h.div([h.Class("panel-body")], body)]),
         ...slotView("div", "panel-foot", foot, h),
     ])), "@gjermundgaraba-designs/pixel-paper/src/panel/panel.js#view");

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

@@ -1 +1 @@
-{"version":3,"file":"passwordField.d.ts","sourceRoot":"","sources":["../../../src/passwordField/passwordField.ts"],"names":[],"mappings":"AACA,OAAO,EAAS,MAAM,EAAE,MAAM,QAAQ,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAStD,wEAAwE;AACxE,eAAO,MAAM,QAAQ,2CAAmC,CAAC;AACzD,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,IAAI,CAAC;AAiB5C,gEAAgE;AAChE,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACpC;gDAC4C;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,aAAa,EAAE,OAAO,CAAC;IACvB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;uCAEmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,yFAAyF;IACzF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;iDAC6C;IAC7C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,gEAAgE;IAChE,YAAY,CAAC,EAAE,kBAAkB,GAAG,cAAc,CAAC;IACnD;uDACmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAEH;;;;mEAImE;AACnE,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAiFpF,CAAC"}
+{"version":3,"file":"passwordField.d.ts","sourceRoot":"","sources":["../../../src/passwordField/passwordField.ts"],"names":[],"mappings":"AACA,OAAO,EAAS,MAAM,EAAE,MAAM,QAAQ,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAStD,wEAAwE;AACxE,eAAO,MAAM,QAAQ,2CAAmC,CAAC;AACzD,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,IAAI,CAAC;AAiB5C,gEAAgE;AAChE,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACpC;gDAC4C;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,aAAa,EAAE,OAAO,CAAC;IACvB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;uCAEmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,yFAAyF;IACzF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;iDAC6C;IAC7C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,gEAAgE;IAChE,YAAY,CAAC,EAAE,kBAAkB,GAAG,cAAc,CAAC;IACnD;uDACmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAEH;;;;mEAImE;AACnE,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IA6EpF,CAAC"}

package/dist/src/passwordField/passwordField.js

@@ -2,7 +2,7 @@ import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Input as UiInput } from "@foldkit/ui";
 import { Match, Schema } from "effect";
 import { pressedAttribute } from "../button/button.js";
-import { describedByError, errorView } from "../field/field.js";
+import { controlAttributes, errorView, helpView } from "../field/field.js";
 import * as IconButton from "../iconButton/iconButton.js";
 import * as Meter from "../meter/meter.js";
 // STRENGTH
@@ -27,12 +27,10 @@ export const view = (config, h) => {
         toView: (groups) => __foldkitBrandViewResult((h.div([h.Class("field boxed")], [
             h.label(groups.label, [label]),
             h.span([h.Class("password")], [
-                // NOTE: @foldkit/ui gap: Input has no required option, so the wrapper says it.
                 h.input([
                     ...groups.input,
                     h.Autocomplete(autocomplete),
-                    ...describedByError(id, error, help !== undefined, h),
-                    ...(isRequired ? [h.AriaRequired(true)] : []),
+                    ...controlAttributes(id, error, help, isRequired, h),
                 ]),
                 IconButton.view({
                     glyph: isShown ? "eye-off" : "eye",
@@ -58,9 +56,7 @@ export const view = (config, h) => {
                         h.span([h.Class("age")], [strengthWord(strength)]),
                     ]),
                 ]),
-            ...(help === undefined
-                ? []
-                : [h.p([...groups.description, h.Class("field-help")], [help])]),
+            ...helpView(help, groups.description, h),
         ])), "@gjermundgaraba-designs/pixel-paper/src/passwordField/passwordField.js#toView"),
     }, h)), "@gjermundgaraba-designs/pixel-paper/src/passwordField/passwordField.js#view");
 };

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

@@ -1,3 +1,3 @@
-export { FollowRailDrawer, HideRailDrawer, Message, Model, OutMessage, ShowRailDrawer, close, id, init, isOpen, subscriptions, update, view, } from "./rail.ts";
+export { FocusRailToggle, FollowRailDrawer, HideRailDrawer, Message, Model, OutMessage, ShowRailDrawer, close, id, init, isOpen, subscriptions, toggle, update, view, } from "./rail.ts";
 export type { InitConfig, ViewInputs } from "./rail.ts";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/rail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,OAAO,EACP,KAAK,EACL,UAAU,EACV,cAAc,EACd,KAAK,EACL,EAAE,EACF,IAAI,EACJ,MAAM,EACN,aAAa,EACb,MAAM,EACN,IAAI,GACL,MAAM,WAAW,CAAC;AACnB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/rail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,OAAO,EACP,KAAK,EACL,UAAU,EACV,cAAc,EACd,KAAK,EACL,EAAE,EACF,IAAI,EACJ,MAAM,EACN,aAAa,EACb,MAAM,EACN,MAAM,EACN,IAAI,GACL,MAAM,WAAW,CAAC;AACnB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}

package/dist/src/rail/index.js

@@ -1 +1 @@
-export { FollowRailDrawer, HideRailDrawer, Message, Model, OutMessage, ShowRailDrawer, close, id, init, isOpen, subscriptions, update, view, } from "./rail.js";
+export { FocusRailToggle, FollowRailDrawer, HideRailDrawer, Message, Model, OutMessage, ShowRailDrawer, close, id, init, isOpen, subscriptions, toggle, update, view, } from "./rail.js";

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

@@ -4,9 +4,10 @@ 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";
+import * as Button from "../button/button.ts";
 /** Schema for a rail: whether it is open as a drawer (at 900px and under; wider, it is always
- *  in the page and this stays false), and its splitter while a pointer drags it. Its width is
- *  the parent's. */
+ *  in the page and this stays false), and its splitter while a pointer drags it. Its width,
+ *  and whether the reader hid it, are the parent's. */
 export declare const Model: Schema.Struct<{
     readonly id: Schema.String;
     readonly isOpen: Schema.Boolean;
@@ -23,6 +24,7 @@ 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 ClickedToggle: {};
     readonly PressedSplitter: {
         pointerId: Schema.Number;
         clientX: Schema.Number;
@@ -45,15 +47,19 @@ export declare const Message: import("foldkit/message").MessageUnion<{
     readonly WidenedPastDrawer: {};
     readonly CompletedShowRailDrawer: {};
     readonly CompletedHideRailDrawer: {};
+    readonly CompletedFocusRailToggle: {};
 }>;
 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`. */
+ *  passes it back as the view's `maybeWidth`. `ToggledRail`: its toggle was pressed; the
+ *  parent flips whether it keeps the rail hidden (per client) and passes it back as the view's
+ *  `isHidden`. */
 export declare const OutMessage: import("foldkit/message").MessageUnion<{
     readonly ResizedRail: {
         width: Schema.Number;
     };
+    readonly ToggledRail: {};
 }>;
 export type OutMessage = typeof OutMessage.Type;
 /** Configuration for creating a rail with `init`. The `id` is the rail's, unique in the
@@ -63,12 +69,25 @@ 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;
+};
 /** 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. */
+ *  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. */
@@ -85,11 +104,25 @@ export declare const HideRailDrawer: Command.CommandDefinitionWithArgs<"HideRail
 }, Effect.Effect<{
     readonly _tag: "CompletedHideRailDrawer";
 }, never, never>>;
+/** Puts focus on the rail's toggle once the rail has folded or unfolded, if focus was in the
+ *  rail or on its splitter: folding takes away every control in it but the toggle, which
+ *  brings it back, and the splitter with them. Focus anywhere else stays where it is. */
+export declare const FocusRailToggle: Command.CommandDefinitionWithArgs<"FocusRailToggle", {
+    railId: Schema.String;
+    toggleId: Schema.String;
+}, Effect.Effect<{
+    readonly _tag: "CompletedFocusRailToggle";
+}, never, never>>;
 type UpdateReturn = Update.Return<Model, Message>;
 /** Closes the rail's drawer, focus back on its button. */
 export declare const close: (model: Model) => UpdateReturn;
+/** Folds or unfolds the rail from a key of the parent's: the parent flips whether it keeps the
+ *  rail hidden, as it does for `ToggledRail`, and folds this in, which moves focus in the rail
+ *  onto the toggle. */
+export declare const toggle: (model: Model) => UpdateReturn;
 /** Processes a rail Message and returns the next Model, Commands and OutMessage: a splitter let
- *  go where it changes the width, or stepped by a key, asks for the width. */
+ *  go where it changes the width, or stepped by a key, asks for the width, and the toggle asks
+ *  to fold or unfold the rail. */
 export declare const update: (model: Model, message: Message) => Readonly<{
     model: {
         readonly id: string;
@@ -111,8 +144,12 @@ export declare const update: (model: Model, message: Message) => Readonly<{
         readonly _tag: "ClickedClose";
     } | {
         readonly _tag: "ClickedOpen";
+    } | {
+        readonly _tag: "ClickedToggle";
     } | {
         readonly _tag: "ClosedDrawer";
+    } | {
+        readonly _tag: "CompletedFocusRailToggle";
     } | {
         readonly _tag: "CompletedHideRailDrawer";
     } | {
@@ -137,9 +174,13 @@ export declare const update: (model: Model, message: Message) => Readonly<{
     outMessage?: {
         readonly _tag: "ResizedRail";
         readonly width: number;
+    } | {
+        readonly _tag: "ToggledRail";
     };
 }>;
 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>;
@@ -183,8 +224,12 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         readonly _tag: "ClickedClose";
     } | {
         readonly _tag: "ClickedOpen";
+    } | {
+        readonly _tag: "ClickedToggle";
     } | {
         readonly _tag: "ClosedDrawer";
+    } | {
+        readonly _tag: "CompletedFocusRailToggle";
     } | {
         readonly _tag: "CompletedHideRailDrawer";
     } | {
@@ -229,8 +274,12 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         readonly _tag: "ClickedClose";
     } | {
         readonly _tag: "ClickedOpen";
+    } | {
+        readonly _tag: "ClickedToggle";
     } | {
         readonly _tag: "ClosedDrawer";
+    } | {
+        readonly _tag: "CompletedFocusRailToggle";
     } | {
         readonly _tag: "CompletedHideRailDrawer";
     } | {
@@ -266,20 +315,28 @@ export type ViewInputs = Readonly<{
      *  (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>;
+    /** Whether the reader folded the rail to its first panel's title bar, as the parent keeps it
+     *  from `ToggledRail` (for this client, as it keeps the width). The drawer ignores it. */
+    isHidden: boolean;
+    /** The parent's key for the toggle, which its tip prints after its label; the parent binds
+     *  it to `toggle`. */
+    maybeToggleKeyHint: Option.Option<Button.KeyHintConfig>;
+    /** The rail's panels: a tree, places, filters, given the toggle that folds the rail to put in
+     *  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>;
     /** 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]`, then its splitter,
- * `div.rail-resize[role="separator"]`, on its right edge. One element serves both layouts, so
- * nothing in it renders twice or loses its state. At 900px and under it leaves the page, and
+ * A column of panels beside the deck, fixed under the top bar: `div.railed >` the deck, then
+ * `aside.rail[popover="auto"][aria-label]`, then its splitter, `div.rail-resize[role="separator"]`,
+ * on its right edge. What comes before its last panel keeps its height, and the last panel
+ * shrinks to the room left, its bar and foot staying while its body scrolls. One element
+ * serves both layouts, so nothing in it renders twice or loses its state. At 900px and under it leaves the page, and
  * `span.rail-open > button.btn.small` at the top of the deck opens the same element as a drawer
  * over a veil, its head (the name and a close glyph) showing. Opening focuses its first
  * control; Escape, a press on the veil, the close glyph, focus leaving or the window growing
@@ -287,9 +344,16 @@ export type ViewInputs = Readonly<{
  *
  * Its splitter sizes it, by a pointer (previewed as it moves) or the side arrows, within its
  * bounds, and reports the width as `ResizedRail` for the parent to keep and pass back as
- * `maybeWidth`, which the view sets as `--rail` on `div.railed`, so the page's padding and the
- * rail's width follow it. The drawer keeps its own width. Lift `subscriptions(keyPrefix)` into
- * the application's, or a dragged splitter follows nothing.
+ * `maybeWidth`, which the view sets as `--railed-width` on `div.railed`, so the page's padding
+ * and the rail's width follow it (without one, `--rail`). The drawer keeps its own width. Lift
+ * `subscriptions(keyPrefix)` into the application's, or a dragged splitter follows nothing.
+ *
+ * Its toggle, `span.rail-toggle > button.iconbtn.quiet[aria-expanded]` ("Hide <label>"), comes
+ * to `toAsideView` to print as the first panel's `lead`. Pressed, it reports `ToggledRail` for
+ * the parent to keep and pass back as `isHidden`: `div.railed.folded` then stands the first
+ * panel's title bar on end on the ground (the toggle at its top, "Show <label>"), the rest of
+ * the rail and its splitter gone, and the deck takes the width. Focus in the rail lands on the
+ * toggle. The drawer, at 900px and under, prints neither the toggle nor the fold.
  *
  * Its state is its own, not `@foldkit/ui`'s Popover: that panel is placed by Floating UI and
  * rendered only while open, and this one is always in the page, placed by the stylesheet, and
@@ -314,8 +378,12 @@ export declare const view: import("foldkit/submodel").View<{
     readonly _tag: "ClickedClose";
 } | {
     readonly _tag: "ClickedOpen";
+} | {
+    readonly _tag: "ClickedToggle";
 } | {
     readonly _tag: "ClosedDrawer";
+} | {
+    readonly _tag: "CompletedFocusRailToggle";
 } | {
     readonly _tag: "CompletedHideRailDrawer";
 } | {
@@ -344,10 +412,17 @@ export declare const view: import("foldkit/submodel").View<{
      *  (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>;
+    /** Whether the reader folded the rail to its first panel's title bar, as the parent keeps it
+     *  from `ToggledRail` (for this client, as it keeps the width). The drawer ignores it. */
+    isHidden: boolean;
+    /** The parent's key for the toggle, which its tip prints after its label; the parent binds
+     *  it to `toggle`. */
+    maybeToggleKeyHint: Option.Option<Button.KeyHintConfig>;
+    /** The rail's panels: a tree, places, filters, given the toggle that folds the rail to put in
+     *  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>;
     /** 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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"}