@gjermundgaraba-designs/pixel-paper 0.23.0 → 0.24.0

package/dist/src/rail/rail.js

@@ -22,8 +22,8 @@ const Resizing = Schema.Struct({
     width: Schema.Number,
 });
 /** Schema for a rail: whether it is open as a drawer (at 900px and under; wider, it is always
- *  in the page and this stays false), and its splitter while a pointer drags it. Its width is
- *  the parent's. */
+ *  in the page and this stays false), and its splitter while a pointer drags it. Its width,
+ *  and whether the reader hid it, are the parent's. */
 export const Model = Schema.Struct({
     id: Schema.String,
     isOpen: Schema.Boolean,
@@ -35,6 +35,7 @@ export const Model = Schema.Struct({
  *  the window growing past 900px while it is open, where the rail is back in the page. */
 export const Message = defineMessageUnion({
     ClickedOpen: {},
+    ClickedToggle: {},
     PressedSplitter: { pointerId: Schema.Number, clientX: Schema.Number, width: Schema.Number },
     MovedSplitter: { clientX: Schema.Number },
     ReleasedSplitter: { clientX: Schema.Number },
@@ -47,12 +48,16 @@ export const Message = defineMessageUnion({
     WidenedPastDrawer: {},
     CompletedShowRailDrawer: {},
     CompletedHideRailDrawer: {},
+    CompletedFocusRailToggle: {},
 });
 /** What a rail asks of its parent. `ResizedRail`: its splitter was let go, or stepped by a
  *  key, at `width` pixels, within the rail's bounds; the parent keeps it (per client) and
- *  passes it back as the view's `maybeWidth`. */
+ *  passes it back as the view's `maybeWidth`. `ToggledRail`: its toggle was pressed; the
+ *  parent flips whether it keeps the rail hidden (per client) and passes it back as the view's
+ *  `isHidden`. */
 export const OutMessage = defineMessageUnion({
     ResizedRail: { width: Schema.Number },
+    ToggledRail: {},
 });
 /** Creates a rail, closed, its splitter at rest. */
 export const init = (config) => (__foldkitBrandViewResult(({
@@ -75,12 +80,14 @@ export const id = (model) => __foldkitBrandViewResult((model.id), "@gjermundgara
 /** Whether the rail is open as a drawer: a parent pauses its own page keys while it is. */
 export const isOpen = (model) => __foldkitBrandViewResult((model.isOpen), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#isOpen");
 const openButtonId = (model) => __foldkitBrandViewResult((`${model.id}-open`), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#openButtonId");
+const toggleId = (model) => __foldkitBrandViewResult((`${model.id}-toggle`), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#toggleId");
 // COMMAND
 const FOCUSABLE = "a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]";
 const findRail = (railId) => __foldkitBrandViewResult((Effect.suspend(() => __foldkitBrandViewResult((Effect.fromNullishOr(document.querySelector(`#${CSS.escape(railId)}`))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous"))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#findRail");
 /** The drawer's first Tab stop past its head: a control the keyboard reaches, so a tree's
- *  items other than its one stop (`tabindex="-1"`) are passed over. */
-export const firstTabStop = (rail) => __foldkitBrandViewResult((Array.findFirst(Array.fromIterable(rail.querySelectorAll(`.rail-head ~ * :is(${FOCUSABLE})`)), (control) => __foldkitBrandViewResult((control.tabIndex >= 0 && control.closest("[inert], [hidden]") === null), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~2"))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#firstTabStop");
+ *  items other than its one stop (`tabindex="-1"`) are passed over, and so is the toggle,
+ *  which the drawer does not print. */
+export const firstTabStop = (rail) => __foldkitBrandViewResult((Array.findFirst(Array.fromIterable(rail.querySelectorAll(`.rail-head ~ * :is(${FOCUSABLE})`)), (control) => __foldkitBrandViewResult((control.tabIndex >= 0 && control.closest("[inert], [hidden], .rail-toggle") === null), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~2"))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#firstTabStop");
 /** Opens the rail as a drawer over the page and puts focus on its first control past its
  *  head. */
 export const ShowRailDrawer = Command.define("ShowRailDrawer", {
@@ -108,6 +115,22 @@ export const HideRailDrawer = Command.define("HideRailDrawer", {
         }
     }).pipe(Effect.ignore, Effect.andThen(isReturningFocus ? Dom.focus(`#${CSS.escape(buttonId)}`).pipe(Effect.ignore) : Effect.void), Effect.as(Message.CompletedHideRailDrawer()))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#execute~2"),
 });
+/** Puts focus on the rail's toggle once the rail has folded or unfolded, if focus was in the
+ *  rail or on its splitter: folding takes away every control in it but the toggle, which
+ *  brings it back, and the splitter with them. Focus anywhere else stays where it is. */
+export const FocusRailToggle = Command.define("FocusRailToggle", {
+    args: { railId: Schema.String, toggleId: Schema.String },
+    messages: [Message.CompletedFocusRailToggle],
+    execute: ({ railId, toggleId: buttonId }) => __foldkitBrandViewResult((Effect.gen(function* () {
+        // NOTE: read before the fold renders, which takes away the control focus is on
+        const rail = yield* findRail(railId);
+        const active = document.activeElement;
+        const isOnSplitter = active?.matches(`.rail-resize[aria-controls="${CSS.escape(railId)}"]`) ?? false;
+        if (rail.contains(active) || isOnSplitter) {
+            yield* Dom.focus(`#${CSS.escape(buttonId)}`);
+        }
+    }).pipe(Effect.ignore, Effect.as(Message.CompletedFocusRailToggle()))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#execute~3"),
+});
 const closeDrawer = (model, isReturningFocus) => __foldkitBrandViewResult((model.isOpen
     ? {
         model: modifyFields(model, { isOpen: () => __foldkitBrandViewResult((false), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#isOpen~2") }),
@@ -123,16 +146,25 @@ const open = (model) => (__foldkitBrandViewResult(({
 }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#open"));
 /** Closes the rail's drawer, focus back on its button. */
 export const close = (model) => __foldkitBrandViewResult((closeDrawer(model, true)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#close");
+/** Folds or unfolds the rail from a key of the parent's: the parent flips whether it keeps the
+ *  rail hidden, as it does for `ToggledRail`, and folds this in, which moves focus in the rail
+ *  onto the toggle. */
+export const toggle = (model) => (__foldkitBrandViewResult(({
+    model,
+    commands: [FocusRailToggle({ railId: model.id, toggleId: toggleId(model) })],
+}), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#toggle"));
 const withResizing = (model, maybeResizing) => __foldkitBrandViewResult((modifyFields(model, { maybeResizing: () => __foldkitBrandViewResult((maybeResizing), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#maybeResizing") })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#withResizing");
 /** The width a dragged splitter previews with the pointer at `clientX`. */
 const dragTo = (model, clientX) => __foldkitBrandViewResult((withResizing(model, Option.map(model.maybeResizing, (resizing) => (__foldkitBrandViewResult(({
     ...resizing,
     width: bounded(resizing.fromWidth + clientX - resizing.pressX),
-}), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~7"))))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#dragTo");
+}), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~8"))))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#dragTo");
 /** Processes a rail Message and returns the next Model, Commands and OutMessage: a splitter let
- *  go where it changes the width, or stepped by a key, asks for the width. */
+ *  go where it changes the width, or stepped by a key, asks for the width, and the toggle asks
+ *  to fold or unfold the rail. */
 export const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
     ClickedOpen: () => __foldkitBrandViewResult((open(model)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#ClickedOpen"),
+    ClickedToggle: () => (__foldkitBrandViewResult(({ ...toggle(model), outMessage: OutMessage.ToggledRail() }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#ClickedToggle")),
     PressedSplitter: ({ pointerId, clientX, width }) => __foldkitBrandViewResult((Option.isSome(model.maybeResizing)
         ? { model }
         : {
@@ -158,6 +190,7 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
     WidenedPastDrawer: () => __foldkitBrandViewResult((closeDrawer(model, false)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#WidenedPastDrawer"),
     CompletedShowRailDrawer: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#CompletedShowRailDrawer")),
     CompletedHideRailDrawer: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#CompletedHideRailDrawer")),
+    CompletedFocusRailToggle: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#CompletedFocusRailToggle")),
 })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#update");
 /** The width at and under which the rail is a drawer, as the stylesheet has it. */
 export const DRAWER_QUERY = "(max-width: 900px)";
@@ -166,10 +199,10 @@ export 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~8"))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#drawerToggleMessage");
+export const drawerToggleMessage = (event) => __foldkitBrandViewResult((Option.liftPredicate(Message.ClosedDrawer(), () => __foldkitBrandViewResult((event.newState === "closed"), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~9"))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#drawerToggleMessage");
 /** Focus leaving the drawer while it is open (`isDrawerOpen`, the rail matching
  *  `:popover-open`); focus moving inside it says nothing. */
-export const drawerFocusOutMessage = (rail, event, isDrawerOpen) => __foldkitBrandViewResult((Option.liftPredicate(Message.BlurredDrawer(), () => __foldkitBrandViewResult((isDrawerOpen && event.relatedTarget instanceof Node && !rail.contains(event.relatedTarget)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~9"))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#drawerFocusOutMessage");
+export const drawerFocusOutMessage = (rail, event, isDrawerOpen) => __foldkitBrandViewResult((Option.liftPredicate(Message.BlurredDrawer(), () => __foldkitBrandViewResult((isDrawerOpen && event.relatedTarget instanceof Node && !rail.contains(event.relatedTarget)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~10"))), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#drawerFocusOutMessage");
 /** Follows the drawer the browser shows: the browser closing it (Escape, a press on the
  *  veil), focus leaving it while it is open, and the window growing past its width while it
  *  is open, each of which closes the rail. */
@@ -190,17 +223,17 @@ export const FollowRailDrawer = Mount.defineStream("FollowRailDrawer", {
         const fromWidth = Dom.streamFromMediaQuery({
             query: DRAWER_QUERY,
             mapMatches: (isDrawerWidth) => __foldkitBrandViewResult((widthChangeMessage(isDrawerWidth, isDrawerOpen())), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#mapMatches"),
-        }).pipe(Stream.filter(Option.isSome), Stream.map(({ value }) => __foldkitBrandViewResult((value), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~10")));
+        }).pipe(Stream.filter(Option.isSome), Stream.map(({ value }) => __foldkitBrandViewResult((value), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~11")));
         return __foldkitBrandViewResult((Stream.mergeAll([fromToggle, fromFocusOut, fromWidth], {
             concurrency: "unbounded",
-        })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#execute~3");
+        })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#execute~4");
     },
 });
 // SUBSCRIPTION
 const railSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResult(({
     resize: entry({ maybePointerId: Schema.Option(Schema.Number) }, {
         modelToDependencies: (model) => (__foldkitBrandViewResult(({
-            maybePointerId: Option.map(model.maybeResizing, ({ pointerId }) => __foldkitBrandViewResult((pointerId), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~12")),
+            maybePointerId: Option.map(model.maybeResizing, ({ pointerId }) => __foldkitBrandViewResult((pointerId), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~13")),
         }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#modelToDependencies")),
         dependenciesToStream: ({ maybePointerId }) => __foldkitBrandViewResult((Option.match(maybePointerId, {
             onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#onNone~2"),
@@ -215,17 +248,18 @@ const railSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResu
         modelToDependencies: (model) => (__foldkitBrandViewResult(({ isResizing: Option.isSome(model.maybeResizing) }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#modelToDependencies~2")),
         dependenciesToStream: ({ isResizing }) => __foldkitBrandViewResult((isResizing ? escapeKeys(Message.PressedEscape()) : Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#dependenciesToStream~2"),
     }),
-}), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~11")));
+}), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~12")));
 /** A dragged splitter follows the pointer, and Escape puts it back before a dialog or the
  *  page sees it, from listeners that run only while it is dragged. Lift them into the
  *  application's Subscriptions behind a key prefix of the parent's: `subscriptions("rail")` is
  *  keyed `railResize` and `railEscape`. */
 export const subscriptions = (keyPrefix) => __foldkitBrandViewResult((prefixKeys(keyPrefix, railSubscriptions)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#subscriptions");
 /**
- * A column of panels beside the deck, fixed under the top bar and scrolling itself:
- * `div.railed >` the deck, then `aside.rail[popover="auto"][aria-label]`, then its splitter,
- * `div.rail-resize[role="separator"]`, on its right edge. One element serves both layouts, so
- * nothing in it renders twice or loses its state. At 900px and under it leaves the page, and
+ * A column of panels beside the deck, fixed under the top bar: `div.railed >` the deck, then
+ * `aside.rail[popover="auto"][aria-label]`, then its splitter, `div.rail-resize[role="separator"]`,
+ * on its right edge. What comes before its last panel keeps its height, and the last panel
+ * shrinks to the room left, its bar and foot staying while its body scrolls. One element
+ * serves both layouts, so nothing in it renders twice or loses its state. At 900px and under it leaves the page, and
  * `span.rail-open > button.btn.small` at the top of the deck opens the same element as a drawer
  * over a veil, its head (the name and a close glyph) showing. Opening focuses its first
  * control; Escape, a press on the veil, the close glyph, focus leaving or the window growing
@@ -237,14 +271,21 @@ export const subscriptions = (keyPrefix) => __foldkitBrandViewResult((prefixKeys
  * and the rail's width follow it (without one, `--rail`). The drawer keeps its own width. Lift
  * `subscriptions(keyPrefix)` into the application's, or a dragged splitter follows nothing.
  *
+ * Its toggle, `span.rail-toggle > button.iconbtn.quiet[aria-expanded]` ("Hide <label>"), comes
+ * to `toAsideView` to print as the first panel's `lead`. Pressed, it reports `ToggledRail` for
+ * the parent to keep and pass back as `isHidden`: `div.railed.folded` then stands the first
+ * panel's title bar on end on the ground (the toggle at its top, "Show <label>"), the rest of
+ * the rail and its splitter gone, and the deck takes the width. Focus in the rail lands on the
+ * toggle. The drawer, at 900px and under, prints neither the toggle nor the fold.
+ *
  * Its state is its own, not `@foldkit/ui`'s Popover: that panel is placed by Floating UI and
  * rendered only while open, and this one is always in the page, placed by the stylesheet, and
  * opened as a native popover so the browser keeps it in the top layer.
  */
 export const view = defineView((model, viewInputs, h) => {
-    const { label, toAsideView, toDeckView } = viewInputs;
-    const maybeWidth = Option.orElse(Option.map(model.maybeResizing, ({ width }) => __foldkitBrandViewResult((width), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~14")), () => __foldkitBrandViewResult((Option.map(viewInputs.maybeWidth, bounded)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~15"));
-    const width = Option.getOrElse(maybeWidth, () => __foldkitBrandViewResult((WIDTH.start), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~16"));
+    const { label, isHidden, maybeToggleKeyHint, toAsideView, toDeckView } = viewInputs;
+    const maybeWidth = Option.orElse(Option.map(model.maybeResizing, ({ width }) => __foldkitBrandViewResult((width), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~15")), () => __foldkitBrandViewResult((Option.map(viewInputs.maybeWidth, bounded)), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~16"));
+    const width = Option.getOrElse(maybeWidth, () => __foldkitBrandViewResult((WIDTH.start), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~17"));
     const openButton = h.span([h.Class("rail-open")], [
         Button.view({
             label,
@@ -258,11 +299,43 @@ export const view = defineView((model, viewInputs, h) => {
             ],
         }, h),
     ]);
+    const toggleButton = h.span([h.Class("rail-toggle")], [
+        IconButton.view({
+            glyph: "sidebar",
+            label: `${isHidden ? "Show" : "Hide"} ${label}`,
+            isQuiet: true,
+            onClick: Message.ClickedToggle(),
+            ...Option.match(maybeToggleKeyHint, {
+                onNone: () => (__foldkitBrandViewResult(({}), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#onNone~3")),
+                onSome: (keyHint) => (__foldkitBrandViewResult(({ keyHint }), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#onSome~3")),
+            }),
+            attributes: [h.Id(toggleId(model)), h.AriaExpanded(!isHidden), h.AriaControls(model.id)],
+        }, h),
+    ]);
+    const splitter = h.div([
+        h.Class("rail-resize"),
+        h.Role("separator"),
+        h.AriaLabel(`Width of ${label}`),
+        h.AriaControls(model.id),
+        h.AriaValuemin(WIDTH.least),
+        h.AriaValuemax(WIDTH.most),
+        h.AriaValuenow(width),
+        h.AriaValuetext(`${width} pixels`),
+        h.Tabindex(0),
+        ...splitterAttributes({
+            orientation: "vertical",
+            isIdle: Option.isNone(model.maybeResizing),
+            onPress: (pointerId, clientX) => __foldkitBrandViewResult((Message.PressedSplitter({ pointerId, clientX, width })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#onPress"),
+            onStep: (direction) => __foldkitBrandViewResult((Message.PressedSplitterKey({ width: width + direction * WIDTH.step })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#onStep"),
+        }, h),
+    ]);
     // NOTE: the deck comes first so the page's main content, and its h1, precede the rail's
     // panels in reading order; the stylesheet places the rail, fixed, at the left.
     return __foldkitBrandViewResult((h.div([
-        h.Class("railed"),
-        ...Array.fromOption(Option.map(maybeWidth, (shown) => __foldkitBrandViewResult((h.Style({ "--railed-width": `${shown}px` })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~17"))),
+        h.Class(isHidden ? "railed folded" : "railed"),
+        ...(isHidden
+            ? []
+            : Array.fromOption(Option.map(maybeWidth, (shown) => __foldkitBrandViewResult((h.Style({ "--railed-width": `${shown}px` })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~18")))),
     ], [
         toDeckView(openButton),
         h.aside([
@@ -276,24 +349,8 @@ export const view = defineView((model, viewInputs, h) => {
                 h.span([h.Class("label")], [label]),
                 IconButton.view({ glyph: "cross", label: "Close", onClick: Message.ClickedClose() }, h),
             ]),
-            ...toAsideView(),
-        ]),
-        h.div([
-            h.Class("rail-resize"),
-            h.Role("separator"),
-            h.AriaLabel(`Width of ${label}`),
-            h.AriaControls(model.id),
-            h.AriaValuemin(WIDTH.least),
-            h.AriaValuemax(WIDTH.most),
-            h.AriaValuenow(width),
-            h.AriaValuetext(`${width} pixels`),
-            h.Tabindex(0),
-            ...splitterAttributes({
-                orientation: "vertical",
-                isIdle: Option.isNone(model.maybeResizing),
-                onPress: (pointerId, clientX) => __foldkitBrandViewResult((Message.PressedSplitter({ pointerId, clientX, width })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#onPress"),
-                onStep: (direction) => __foldkitBrandViewResult((Message.PressedSplitterKey({ width: width + direction * WIDTH.step })), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#onStep"),
-            }, h),
+            ...toAsideView(toggleButton),
         ]),
-    ])), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~13");
+        ...(isHidden ? [] : [splitter]),
+    ])), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~14");
 });

package/dist/src/tips/tips.d.ts

@@ -12,15 +12,18 @@ export declare const TipState: import("foldkit/schema").TaggedUnion<{
     readonly Cold: {};
     readonly Waiting: {
         text: Schema.String;
+        maybeKey: Schema.Option<Schema.String>;
         side: Schema.Literals<readonly ["Top", "Right"]>;
     };
     readonly Shown: {
         text: Schema.String;
+        maybeKey: Schema.Option<Schema.String>;
         side: Schema.Literals<readonly ["Top", "Right"]>;
         trigger: Schema.Literals<readonly ["Pointer", "Focus"]>;
     };
     readonly Leaving: {
         text: Schema.String;
+        maybeKey: Schema.Option<Schema.String>;
         side: Schema.Literals<readonly ["Top", "Right"]>;
         trigger: Schema.Literals<readonly ["Pointer", "Focus"]>;
     };
@@ -36,15 +39,18 @@ export declare const Model: Schema.Struct<{
         readonly Cold: {};
         readonly Waiting: {
             text: Schema.String;
+            maybeKey: Schema.Option<Schema.String>;
             side: Schema.Literals<readonly ["Top", "Right"]>;
         };
         readonly Shown: {
             text: Schema.String;
+            maybeKey: Schema.Option<Schema.String>;
             side: Schema.Literals<readonly ["Top", "Right"]>;
             trigger: Schema.Literals<readonly ["Pointer", "Focus"]>;
         };
         readonly Leaving: {
             text: Schema.String;
+            maybeKey: Schema.Option<Schema.String>;
             side: Schema.Literals<readonly ["Top", "Right"]>;
             trigger: Schema.Literals<readonly ["Pointer", "Focus"]>;
         };
@@ -56,12 +62,14 @@ export type Model = typeof Model.Type;
 export declare const Message: import("foldkit/message").MessageUnion<{
     readonly EnteredTipTarget: {
         text: Schema.String;
+        maybeKey: Schema.Option<Schema.String>;
         side: Schema.Literals<readonly ["Top", "Right"]>;
     };
     readonly LeftTipTarget: {};
     readonly EnteredTip: {};
     readonly FocusedTipTarget: {
         text: Schema.String;
+        maybeKey: Schema.Option<Schema.String>;
         side: Schema.Literals<readonly ["Top", "Right"]>;
     };
     readonly BlurredTipTarget: {};
@@ -136,16 +144,19 @@ export declare const update: (model: Model, message: Message) => Readonly<{
         } | {
             readonly _tag: "Leaving";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
             readonly trigger: "Focus" | "Pointer";
         } | {
             readonly _tag: "Shown";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
             readonly trigger: "Focus" | "Pointer";
         } | {
             readonly _tag: "Waiting";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
         } | {
             readonly _tag: "Warm";
@@ -171,10 +182,12 @@ export declare const update: (model: Model, message: Message) => Readonly<{
     } | {
         readonly _tag: "EnteredTipTarget";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
     } | {
         readonly _tag: "FocusedTipTarget";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
     } | {
         readonly _tag: "LeftTipTarget";
@@ -210,16 +223,19 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         } | {
             readonly _tag: "Leaving";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
             readonly trigger: "Focus" | "Pointer";
         } | {
             readonly _tag: "Shown";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
             readonly trigger: "Focus" | "Pointer";
         } | {
             readonly _tag: "Waiting";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
         } | {
             readonly _tag: "Warm";
@@ -244,10 +260,12 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     } | {
         readonly _tag: "EnteredTipTarget";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
     } | {
         readonly _tag: "FocusedTipTarget";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
     } | {
         readonly _tag: "LeftTipTarget";
@@ -268,16 +286,19 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         } | {
             readonly _tag: "Leaving";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
             readonly trigger: "Focus" | "Pointer";
         } | {
             readonly _tag: "Shown";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
             readonly trigger: "Focus" | "Pointer";
         } | {
             readonly _tag: "Waiting";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
         } | {
             readonly _tag: "Warm";
@@ -302,10 +323,12 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     } | {
         readonly _tag: "EnteredTipTarget";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
     } | {
         readonly _tag: "FocusedTipTarget";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
     } | {
         readonly _tag: "LeftTipTarget";
@@ -321,7 +344,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
 } extends infer T ? { readonly [Key in keyof T as `${Prefix}${Capitalize<Key>}`]: T[Key]; } : never;
 /**
  * The page's one tip: `div.tip[popover="manual"][aria-hidden="true"]`, which shows the words
- * of any control carrying `data-tip` (IconButton, the glyph switch, a board's grip). Render it
+ * of any control carrying `data-tip` (IconButton, the glyph switch, a board's grip), then the
+ * key in its `data-tip-key` where it has one (an IconButton's `keyHint`). Render it
  * once, beside the Announcer, and lift `subscriptions(keyPrefix)`. It opens on a resting
  * pointer after a moment (at once while another has just closed), never on touch, and on
  * keyboard focus; it can be hovered; leaving, blur, a press or any key closes it, and Escape
@@ -340,16 +364,19 @@ export declare const view: import("foldkit/submodel").View<{
     } | {
         readonly _tag: "Leaving";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
         readonly trigger: "Focus" | "Pointer";
     } | {
         readonly _tag: "Shown";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
         readonly trigger: "Focus" | "Pointer";
     } | {
         readonly _tag: "Waiting";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
     } | {
         readonly _tag: "Warm";
@@ -374,10 +401,12 @@ export declare const view: import("foldkit/submodel").View<{
 } | {
     readonly _tag: "EnteredTipTarget";
     readonly text: string;
+    readonly maybeKey: Option.Option<string>;
     readonly side: "Right" | "Top";
 } | {
     readonly _tag: "FocusedTipTarget";
     readonly text: string;
+    readonly maybeKey: Option.Option<string>;
     readonly side: "Right" | "Top";
 } | {
     readonly _tag: "LeftTipTarget";

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

@@ -1 +1 @@
-{"version":3,"file":"tips.d.ts","sourceRoot":"","sources":["../../../src/tips/tips.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,MAAM,EAAiB,MAAM,EAAE,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAC9F,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAC;AAQ3C,OAAO,KAAK,YAAY,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,MAAM,gBAAgB,CAAC;AAW9C,iEAAiE;AACjE,eAAO,MAAM,OAAO,gDAAwC,CAAC;AAC7D,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAK1C;;+FAE+F;AAC/F,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;EAMnB,CAAC;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,IAAI,CAAC;AAE5C;sDACsD;AACtD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;EAIhB,CAAC;AACH,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAC;AAItC,uDAAuD;AACvD,eAAO,MAAM,OAAO;;QACE,IAAI;QAAiB,IAAI;;;;;QAGzB,IAAI;QAAiB,IAAI;;;;;;QAIf,OAAO;;;QACR,OAAO;;;QACN,OAAO;;;;EAGrC,CAAC;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAI1C,2FAA2F;AAC3F,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElD,yCAAyC;AACzC,eAAO,MAAM,IAAI,WAAY,UAAU,KAAG,KAIxC,CAAC;AAIH,oDAAoD;AACpD,eAAO,MAAM,EAAE,UAAW,KAAK,KAAG,MAAkB,CAAC;AA2DrD;;;0CAG0C;AAC1C,eAAO,MAAM,OAAO;;;;;;iBAmBlB,CAAC;AAEH,sBAAsB;AACtB,eAAO,MAAM,OAAO;;;;iBAQlB,CAAC;AAEH,mCAAmC;AACnC,eAAO,MAAM,iBAAiB;;;;;iBAK5B,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,gBAAgB;;;;;iBAK3B,CAAC;AAEH,+EAA+E;AAC/E,eAAO,MAAM,iBAAiB;;;;;iBAK5B,CAAC;AAuEH,6EAA6E;AAC7E,eAAO,MAAM,MAAM,UAAW,KAAK,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDjD,CAAC;AAIL,KAAK,aAAa,GACd,OAAO,OAAO,CAAC,gBAAgB,CAAC,IAAI,GACpC,OAAO,OAAO,CAAC,aAAa,CAAC,IAAI,GACjC,OAAO,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC;AAoBnC;gEACgE;AAChE,eAAO,MAAM,kBAAkB,UACtB,MAAM,SACN,YAAY,KAClB,MAAM,CAAC,MAAM,CAAC,aAAa,CAkB7B,CAAC;AAUF;kCACkC;AAClC,eAAO,MAAM,eAAe,UAAW,UAAU,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAQtE,CAAC;AAEJ;;;0CAG0C;AAC1C,eAAO,MAAM,UAAU,UAAW,aAAa,WAAW,OAAO,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAUxF,CAAC;AAkEF;;;8BAG8B;AAC9B,eAAO,MAAM,aAAa,GAAI,MAAM,SAAS,MAAM,aAAa,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGAC7B,CAAC;AAW1C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAef,CAAC"}
+{"version":3,"file":"tips.d.ts","sourceRoot":"","sources":["../../../src/tips/tips.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,MAAM,EAIN,MAAM,EACN,MAAM,EAGP,MAAM,QAAQ,CAAC;AAChB,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAC;AAQ3C,OAAO,KAAK,YAAY,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,MAAM,gBAAgB,CAAC;AAW9C,iEAAiE;AACjE,eAAO,MAAM,OAAO,gDAAwC,CAAC;AAC7D,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAQ1C;;+FAE+F;AAC/F,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;EAMnB,CAAC;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,IAAI,CAAC;AAE5C;sDACsD;AACtD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;EAIhB,CAAC;AACH,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAC;AAItC,uDAAuD;AACvD,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;QAQY,OAAO;;;QACR,OAAO;;;QACN,OAAO;;;;EAGrC,CAAC;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAI1C,2FAA2F;AAC3F,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElD,yCAAyC;AACzC,eAAO,MAAM,IAAI,WAAY,UAAU,KAAG,KAIxC,CAAC;AAIH,oDAAoD;AACpD,eAAO,MAAM,EAAE,UAAW,KAAK,KAAG,MAAkB,CAAC;AA8DrD;;;0CAG0C;AAC1C,eAAO,MAAM,OAAO;;;;;;iBAmBlB,CAAC;AAEH,sBAAsB;AACtB,eAAO,MAAM,OAAO;;;;iBAQlB,CAAC;AAEH,mCAAmC;AACnC,eAAO,MAAM,iBAAiB;;;;;iBAK5B,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,gBAAgB;;;;;iBAK3B,CAAC;AAEH,+EAA+E;AAC/E,eAAO,MAAM,iBAAiB;;;;;iBAK5B,CAAC;AAyEH,6EAA6E;AAC7E,eAAO,MAAM,MAAM,UAAW,KAAK,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDjD,CAAC;AAIL,KAAK,aAAa,GACd,OAAO,OAAO,CAAC,gBAAgB,CAAC,IAAI,GACpC,OAAO,OAAO,CAAC,aAAa,CAAC,IAAI,GACjC,OAAO,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC;AA0BnC;gEACgE;AAChE,eAAO,MAAM,kBAAkB,UACtB,MAAM,SACN,YAAY,KAClB,MAAM,CAAC,MAAM,CAAC,aAAa,CAkB7B,CAAC;AAUF;kCACkC;AAClC,eAAO,MAAM,eAAe,UAAW,UAAU,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAQtE,CAAC;AAEJ;;;0CAG0C;AAC1C,eAAO,MAAM,UAAU,UAAW,aAAa,WAAW,OAAO,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAUxF,CAAC;AAoEF;;;8BAG8B;AAC9B,eAAO,MAAM,aAAa,GAAI,MAAM,SAAS,MAAM,aAAa,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGAC7B,CAAC;AAW1C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAqBf,CAAC"}