@gjermundgaraba-designs/pixel-paper 0.23.0 → 0.25.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/reel/index.d.ts

@@ -1,4 +1,4 @@
 export { Layout, OutMessage, Pane, apply } from "./layout.ts";
-export { Action, AnnounceReel, FocusPane, Message, Model, RestoreFocus, ScrollIntoView, SizeLiftedPane, focusedPaneId, init, perform, reconcile, subscriptions, update, view, } from "./reel.ts";
+export { Action, AnnounceReel, Arrangement, FocusPane, FocusTab, Message, Model, RestoreFocus, ScrollIntoView, SizeLiftedPane, focusedPaneId, init, perform, reconcile, subscriptions, update, view, } from "./reel.ts";
 export type { InitConfig, PaneRender, UpdateContext, ViewInputs } from "./reel.ts";
 //# 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,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,WAAW,EACX,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,EACL,YAAY,EACZ,cAAc,EACd,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,SAAS,EACT,aAAa,EACb,MAAM,EACN,IAAI,GACL,MAAM,WAAW,CAAC;AACnB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}

package/dist/src/reel/index.js

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

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

@@ -59,6 +59,11 @@ export declare const Model: Schema.Struct<{
     }>>;
 }>;
 export type Model = typeof Model.Type;
+/** How a reel shows its panes: side by side in their columns (`Strip`), or one at a time at
+ *  the reel's full size under a tab per pane (`Tabs`). The application holds it and passes it
+ *  in; the layout is the same in both. */
+export declare const Arrangement: Schema.Literals<readonly ["Strip", "Tabs"]>;
+export type Arrangement = typeof Arrangement.Type;
 /** Union of all Messages a reel can produce. */
 export declare const Message: import("foldkit/message").MessageUnion<{
     readonly PressedGrip: {
@@ -106,6 +111,12 @@ export declare const Message: import("foldkit/message").MessageUnion<{
     readonly FocusedPane: {
         paneId: Schema.String;
     };
+    readonly PressedTab: {
+        paneId: Schema.String;
+    };
+    readonly SteppedTab: {
+        paneId: Schema.String;
+    };
     readonly PressedSplitter: {
         splitter: import("foldkit/schema").TaggedUnion<{
             readonly Width: {
@@ -139,6 +150,7 @@ export declare const Message: import("foldkit/message").MessageUnion<{
     };
     readonly CompletedAnnounceReel: {};
     readonly CompletedFocusPane: {};
+    readonly CompletedFocusTab: {};
     readonly CompletedRestoreFocus: {};
     readonly CompletedScrollIntoView: {};
     readonly CompletedSizeLiftedPane: {};
@@ -169,6 +181,13 @@ export declare const FocusPane: Command.CommandDefinitionWithArgs<"FocusPane", {
 }, Effect.Effect<{
     readonly _tag: "CompletedFocusPane";
 }, never, never>>;
+/** Focuses the tab `tabHook` names, for a tab the arrows step to: the keyboard stays in the
+ *  tab list until the reader goes into the pane. */
+export declare const FocusTab: Command.CommandDefinitionWithArgs<"FocusTab", {
+    tabHook: Schema.String;
+}, Effect.Effect<{
+    readonly _tag: "CompletedFocusTab";
+}, never, never>>;
 /** Focuses the pane `paneHook` names only where focus was lost (it left with the pane that
  *  held it), so focus the reader put somewhere else stays there. */
 export declare const RestoreFocus: Command.CommandDefinitionWithArgs<"RestoreFocus", {
@@ -185,9 +204,11 @@ export declare const ScrollIntoView: Command.CommandDefinitionWithArgs<"ScrollIn
     readonly _tag: "CompletedScrollIntoView";
 }, never, never>>;
 /** What the reel reads from its parent as each Message arrives: the layout as the
- *  application holds it now. */
+ *  application holds it now, and how the view shows it (`Strip` when not given), which
+ *  `perform` reads. */
 export type UpdateContext = Readonly<{
     layout: Layout;
+    arrangement?: Arrangement;
 }>;
 type UpdateReturn = Update.ReturnWithOutMessage<Model, Message, OutMessage>;
 /** Processes a reel Message against the layout as the application holds it now, and returns
@@ -214,7 +235,8 @@ export type Action = typeof Action.Type;
  * layout as the application holds it: focus moves focus the pane and scroll the reel to it;
  * moves report their request as the OutMessage, which the application applies, with focus
  * kept on the pane. Each is said through the live region. Nothing happens while something is
- * held, or where there is nowhere to go.
+ * held, or where there is nowhere to go. Under tabs, only the focus keys act, stepping from tab
+ * to tab.
  */
 export declare const perform: (model: Model, action: Action, context: UpdateContext) => UpdateReturn;
 /** A held pane follows the pointer (the reel scrolling near its edges), a dragged
@@ -285,6 +307,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         readonly _tag: "CompletedAnnounceReel";
     } | {
         readonly _tag: "CompletedFocusPane";
+    } | {
+        readonly _tag: "CompletedFocusTab";
     } | {
         readonly _tag: "CompletedRestoreFocus";
     } | {
@@ -344,6 +368,9 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
             readonly columnId: string;
         };
         readonly share: number;
+    } | {
+        readonly _tag: "PressedTab";
+        readonly paneId: string;
     } | {
         readonly _tag: "ReleasedPointer";
         readonly clientX: number;
@@ -362,6 +389,9 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     } | {
         readonly _tag: "SteppedHeld";
         readonly step: "Down" | "Left" | "Right" | "Up";
+    } | {
+        readonly _tag: "SteppedTab";
+        readonly paneId: string;
     }, {
         readonly maybeHold: Option.Option<{
             readonly reelHook: string;
@@ -433,6 +463,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         readonly _tag: "CompletedAnnounceReel";
     } | {
         readonly _tag: "CompletedFocusPane";
+    } | {
+        readonly _tag: "CompletedFocusTab";
     } | {
         readonly _tag: "CompletedRestoreFocus";
     } | {
@@ -492,6 +524,9 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
             readonly columnId: string;
         };
         readonly share: number;
+    } | {
+        readonly _tag: "PressedTab";
+        readonly paneId: string;
     } | {
         readonly _tag: "ReleasedPointer";
         readonly clientX: number;
@@ -510,6 +545,9 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     } | {
         readonly _tag: "SteppedHeld";
         readonly step: "Down" | "Left" | "Right" | "Up";
+    } | {
+        readonly _tag: "SteppedTab";
+        readonly paneId: string;
     }, {
         readonly maybeHold: Option.Option<{
             readonly reelHook: string;
@@ -581,6 +619,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         readonly _tag: "CompletedAnnounceReel";
     } | {
         readonly _tag: "CompletedFocusPane";
+    } | {
+        readonly _tag: "CompletedFocusTab";
     } | {
         readonly _tag: "CompletedRestoreFocus";
     } | {
@@ -640,6 +680,9 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
             readonly columnId: string;
         };
         readonly share: number;
+    } | {
+        readonly _tag: "PressedTab";
+        readonly paneId: string;
     } | {
         readonly _tag: "ReleasedPointer";
         readonly clientX: number;
@@ -658,6 +701,9 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     } | {
         readonly _tag: "SteppedHeld";
         readonly step: "Down" | "Left" | "Right" | "Up";
+    } | {
+        readonly _tag: "SteppedTab";
+        readonly paneId: string;
     }, {
         readonly maybeHold: Option.Option<{
             readonly reelHook: string;
@@ -737,6 +783,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         readonly _tag: "CompletedAnnounceReel";
     } | {
         readonly _tag: "CompletedFocusPane";
+    } | {
+        readonly _tag: "CompletedFocusTab";
     } | {
         readonly _tag: "CompletedRestoreFocus";
     } | {
@@ -796,6 +844,9 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
             readonly columnId: string;
         };
         readonly share: number;
+    } | {
+        readonly _tag: "PressedTab";
+        readonly paneId: string;
     } | {
         readonly _tag: "ReleasedPointer";
         readonly clientX: number;
@@ -814,6 +865,9 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     } | {
         readonly _tag: "SteppedHeld";
         readonly step: "Down" | "Left" | "Right" | "Up";
+    } | {
+        readonly _tag: "SteppedTab";
+        readonly paneId: string;
     }, {
         readonly isHolding: boolean;
     }, never> & {
@@ -829,11 +883,12 @@ export declare const SizeLiftedPane: Mount.MountDefinitionWithArgs<"SizeLiftedPa
 }, {
     readonly _tag: "CompletedSizeLiftedPane";
 }>;
-/** What the reel hands `toPaneView` for each pane: put `grip` in the Window's `lead` and give
+/** What the reel hands `toPaneView` for each pane: put `lead` in the Window's `lead` and give
  *  it `id`. */
 export type PaneRender = Readonly<{
-    /** The pane's grip, for its title bar's `lead`: a quiet glyph button named "Move <label>". */
-    grip: Html;
+    /** The title bar's `lead`: the pane's grip, a quiet glyph button named "Move <label>", or
+     *  nothing under tabs, where a pane does not move. */
+    lead: ReadonlyArray<Html>;
     /** The window's id, unique in the document. */
     id: string;
 }>;
@@ -844,10 +899,15 @@ export type ViewInputs = Readonly<{
     layout: Layout;
     /** Names the reel for screen readers. */
     label: string;
-    /** Renders one pane, a `Window.view` with `render.grip` as its `lead` and `render.id` as its
+    /** Renders one pane, a `Window.view` with `render.lead` as its `lead` and `render.id` as its
      *  `id`. Mark the control focus should land on in it (a terminal's input) with
      *  `data-reel-focus`. */
     toPaneView: (pane: Pane, render: PaneRender) => Html;
+    /** How the panes print: in their columns (`Strip`, when not given), or one at a time under
+     *  their tabs (`Tabs`). Pass the same to `perform`. */
+    arrangement?: Arrangement;
+    /** What a pane's tab prints before its label: a kind glyph. Nothing when not given. */
+    toTabLeadView?: (pane: Pane) => ReadonlyArray<Html>;
 }>;
 /**
  * A row of columns wider than the view when it must be, each a stack of panes, scrolled
@@ -862,6 +922,11 @@ export type ViewInputs = Readonly<{
  * panes), Space drops it, and Escape or Tab puts it back. A drop reports what it asks
  * of the layout as the OutMessage. Lift `subscriptions(keyPrefix)` into the application's, or
  * nothing follows the pointer, and call `reconcile` whenever the layout changes.
+ *
+ * Under tabs (`arrangement: "Tabs"`) the reel is `div.reel.tabbed`: a `div.nav.tabs.reel-tabs`
+ * tab list over the scroller, whose track holds one `div.reel-slot.reel-stage` at the reel's
+ * full size where the columns were. Every pane is pinned to it, the focused one shown and the
+ * others `.behind`, hidden and inert; there are no grips and no splitters.
  */
 export declare const view: import("foldkit/submodel").View<{
     readonly id: string;
@@ -925,6 +990,8 @@ export declare const view: import("foldkit/submodel").View<{
     readonly _tag: "CompletedAnnounceReel";
 } | {
     readonly _tag: "CompletedFocusPane";
+} | {
+    readonly _tag: "CompletedFocusTab";
 } | {
     readonly _tag: "CompletedRestoreFocus";
 } | {
@@ -984,6 +1051,9 @@ export declare const view: import("foldkit/submodel").View<{
         readonly columnId: string;
     };
     readonly share: number;
+} | {
+    readonly _tag: "PressedTab";
+    readonly paneId: string;
 } | {
     readonly _tag: "ReleasedPointer";
     readonly clientX: number;
@@ -1002,15 +1072,23 @@ export declare const view: import("foldkit/submodel").View<{
 } | {
     readonly _tag: "SteppedHeld";
     readonly step: "Down" | "Left" | "Right" | "Up";
+} | {
+    readonly _tag: "SteppedTab";
+    readonly paneId: string;
 }, Readonly<{
     /** The columns and their panes, as the application holds them. */
     layout: Layout;
     /** Names the reel for screen readers. */
     label: string;
-    /** Renders one pane, a `Window.view` with `render.grip` as its `lead` and `render.id` as its
+    /** Renders one pane, a `Window.view` with `render.lead` as its `lead` and `render.id` as its
      *  `id`. Mark the control focus should land on in it (a terminal's input) with
      *  `data-reel-focus`. */
     toPaneView: (pane: Pane, render: PaneRender) => Html;
+    /** How the panes print: in their columns (`Strip`, when not given), or one at a time under
+     *  their tabs (`Tabs`). Pass the same to `perform`. */
+    arrangement?: Arrangement;
+    /** What a pane's tab prints before its label: a kind glyph. Nothing when not given. */
+    toTabLeadView?: (pane: Pane) => ReadonlyArray<Html>;
 }>>;
 export {};
 //# sourceMappingURL=reel.d.ts.map

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

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