@crewlethq/ui 0.81.2 → 0.83.0

package/dist/AppShell/AppShell.d.ts

@@ -59,8 +59,11 @@
 import { type AriaAttributes, type HTMLAttributes, type MouseEventHandler, type ReactNode, type Ref } from 'react';
 import type { Tone } from '../utils/tone.js';
 import { type AppShellAsideShape, type AppShellPeekShape } from './regions.js';
+import { type AppShellRailShape } from './railShape.js';
 export { useAppShellAside, useAppShellPeek } from './regions.js';
 export type { AppShellAsideShape, AppShellPeekShape, AppShellRegionValue } from './regions.js';
+export type { AppShellRailShape } from './railShape.js';
+export type { AppShellRailMotion } from './railMotion.js';
 /** The aside's resting width, in px, where the host names none. */
 export declare const APP_SHELL_ASIDE_WIDTH = 420;
 /** How the reader resizes the aside while it is a column. */
@@ -91,6 +94,14 @@ interface AppShellContextValue {
     railId: string;
     toggleLabel: string;
     hasRail: boolean;
+    /**
+     * The shape the rail is drawn in NOW: `compact` only where the host asked
+     * for it and the layout is wide, `full` in the drawer and everywhere else,
+     * so an application picks `CompactNav` or `SidebarNav` from this alone.
+     * While the rail folds it is still `full`, and it turns `compact` when the
+     * rail reaches the compact column (see `railMotion.ts`).
+     */
+    rail: AppShellRailShape;
 }
 export type { AppShellContextValue };
 /**
@@ -124,8 +135,14 @@ export interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
      * Gives the screen the whole height left under the bar, as a flex column,
      * for a canvas or a split view that draws to the bottom of the window
      * instead of scrolling.
+     *
+     * `flush` is the same column EDGE TO EDGE: the content column gives up its
+     * pad, its measure and its gap, and the scroller reserves no gutter, for a
+     * screen that draws its own frame to the sheet's edges (a conversation with
+     * a list and a pane either side of it). The column is positioned, so a
+     * `LayerHost` the screen keeps inside it fills exactly the screen.
      */
-    fill?: boolean | undefined;
+    fill?: boolean | 'flush' | undefined;
     /**
      * Any value that changes when the reader goes somewhere. The drawer closes
      * when it does: a drawer left open over the screen you have just navigated
@@ -136,6 +153,33 @@ export interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
     toggleLabel?: string | undefined;
     /** The link that precedes everything, for a keyboard reader. */
     skipLabel?: string | undefined;
+    /**
+     * The rail's shape the reader chose: the full navigation, or the compact
+     * column of glyphs. A desktop choice: under the shell step the rail is a
+     * drawer drawn full whatever this says, and `useAppShell().rail` reports
+     * the shape actually drawn.
+     */
+    rail?: AppShellRailShape | undefined;
+    /**
+     * Called with the other shape when the reader presses the fold control.
+     * Given, the shell draws THE fold control (never in the drawer): a minus in
+     * the rail's top left corner while it is full, and a plus in the same place
+     * while it is compact. Keeping the choice, and binding a key to it, are the
+     * application's.
+     */
+    onRailChange?: ((next: AppShellRailShape) => void) | undefined;
+    /**
+     * The keys the application binds to the fold (`['Mod', '\\']`), drawn in
+     * the control's tooltip and set as its `aria-keyshortcuts`. The shell binds
+     * nothing: the same press may mean something else where the rail is a
+     * drawer, and only the application knows.
+     */
+    railFoldKeys?: readonly string[] | undefined;
+    /** The fold control's two names. Defaults to "Collapse the sidebar" and "Expand the sidebar". */
+    railFoldLabels?: {
+        collapse: string;
+        expand: string;
+    } | undefined;
     /**
      * A panel the frame keeps beside every screen: the assistant. Nothing (or
      * null) means no aside and no track. Normally a `SidePanel`, which leaves
@@ -181,7 +225,7 @@ export interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
     peekShape?: AppShellPeekShape | undefined;
     children?: ReactNode;
 }
-export declare function AppShell({ sidebar, topbar, banner, footer, mainId, mainRef, fill, navigationKey, toggleLabel, skipLabel, aside, asideWidth, asideReserve, asideLabel, asideShape, asideModal, onAsideClose, asideResize, peek, peekShape, className, style, children, ...rest }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ sidebar, topbar, banner, footer, mainId, mainRef, fill, navigationKey, toggleLabel, skipLabel, rail: railChoice, onRailChange, railFoldKeys, railFoldLabels, aside, asideWidth, asideReserve, asideLabel, asideShape, asideModal, onAsideClose, asideResize, peek, peekShape, className, style, children, ...rest }: AppShellProps): import("react").JSX.Element;
 export declare namespace AppShell {
     var Rail: typeof AppShellRail;
     var RailRow: import("react").ForwardRefExoticComponent<AppShellRailRowProps & import("react").RefAttributes<HTMLElement>>;
@@ -209,7 +253,8 @@ export interface AppShellRailProps {
      * A compact status at the end of the head's line, beside the name the head
      * carries: an `<AppShell.RailStatus>`, the application's own state in a
      * dot and a count. It takes its own width, so the name keeps the rest and
-     * truncates there, and it stands in the drawer's head the same way.
+     * truncates there, and it stands in the drawer's head the same way. In the
+     * compact rail it has a row of its own under the head's mark.
      */
     status?: ReactNode;
     /**
@@ -222,7 +267,20 @@ export interface AppShellRailProps {
     className?: string | undefined;
     children?: ReactNode;
 }
-/** The rail's three regions: a head, a scrolling middle, and a foot. */
+/**
+ * The rail's three regions: a head, a scrolling middle, and a foot.
+ *
+ * ONE RAIL IN BOTH SHAPES, its slots kept. Compact, the head holds the brand
+ * alone (the lockup shows its mark, over the column's centre, and keeps its
+ * name as the link's name and title); the field is not drawn, because a
+ * 76px column has no room for one and the application draws a Search tile
+ * among its `CompactNav` places instead; and the status stands in a row of
+ * its own under the mark, as its dot and count, since the head has no line
+ * left beside the mark. That row is the first thing under the head in the
+ * column, before the places, so the state a reader checks at a glance is
+ * where their eye starts. The middle and the foot are drawn as the
+ * application gives them.
+ */
 export declare function AppShellRail({ header, search, status, footer, className, children }: AppShellRailProps): import("react").JSX.Element;
 /**
  * A figure at the end of a row in the foot, and what it counts.

package/dist/AppShell/index.d.ts

@@ -9,4 +9,4 @@ export { useScreenBelow, useScreenWidth } from './screenWidth.js';
 export type { StoredWidth, StoredWidthOptions, WidthStorage } from './storedWidth.js';
 export { AccountRow } from './AccountRow.js';
 export type { AccountRowMenu, AccountRowProps } from './AccountRow.js';
-export type { ActionRailRowProps, ActionRailStatusProps, AppShellAsideResize, AppShellAsideShape, AppShellContextValue, AppShellPeekShape, AppShellProps, AppShellRailProps, AppShellRailRowProps, AppShellRailStatusProps, AppShellRegionValue, AppShellToggleProps, AppShellTopbarProps, RailRowCount, StaticRailRowProps, StaticRailStatusProps, } from './AppShell.js';
+export type { ActionRailRowProps, ActionRailStatusProps, AppShellAsideResize, AppShellAsideShape, AppShellContextValue, AppShellPeekShape, AppShellProps, AppShellRailMotion, AppShellRailShape, AppShellRailProps, AppShellRailRowProps, AppShellRailStatusProps, AppShellRegionValue, AppShellToggleProps, AppShellTopbarProps, RailRowCount, StaticRailRowProps, StaticRailStatusProps, } from './AppShell.js';

package/dist/AppShell/index.js

@@ -1,13 +1,19 @@
-export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-UY3FWQWG.js';
-import '../chunk-RTPQDNW3.js';
-import '../chunk-OQG4P5KU.js';
+export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-PGBKZSSQ.js';
+import '../chunk-PCAT2EFB.js';
+import '../chunk-JLOESTT2.js';
+import '../chunk-YJQXESOJ.js';
+import '../chunk-7ZSEUO5Q.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-TGGYSQRD.js';
+import '../chunk-L72URIHR.js';
 export { RESIZE_HANDLE_LARGE_STEP, RESIZE_HANDLE_STEP, ResizeHandle, clampSize, useAppShellAside, useAppShellPeek } from '../chunk-PIYJNCN7.js';
+import '../chunk-CMAZZY2I.js';
 import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AppShell/railMotion.d.ts

@@ -0,0 +1,60 @@
+/**
+ * How the rail moves between its two shapes.
+ *
+ * THE STYLESHEET MOVES IT, THIS DECIDES THE ORDER. The rail's width eases
+ * between the full rail and the compact column (AppShell.css), and its
+ * content is laid out at the width of the shape drawn, clipped by the moving
+ * edge, so nothing in it rewraps at a width it will never rest at. What the
+ * stylesheet cannot decide is WHEN the content changes shape, because the
+ * application draws a different tree for each one:
+ *
+ * - UNFOLDING, the full rail is drawn at once, and the moving edge uncovers
+ *   it while its words fade in (`unfold`).
+ * - FOLDING, the full rail stays drawn, inert, while the edge narrows over it
+ *   and its words fade out (`fold`), and the compact column is drawn once the
+ *   rail's motion has ended, fading in (`folded`). Drawn at once instead, the
+ *   column would replace the words before the reader saw them go.
+ *
+ * ONE MECHANISM FOR EVERY COLUMN THAT EASES. Both shapes are a `usePresence`
+ * each, waiting on the motion actually running on the rail, as a
+ * `DockColumn` waits on its own: no duration is written again here, nothing
+ * waits under reduced motion, and where nothing moves the new shape is drawn
+ * in the same commit, before any paint.
+ */
+import { type RefObject } from 'react';
+import type { AppShellRailShape } from './railShape.js';
+/**
+ * Where a change of shape is: `fold` while the rail narrows over the full
+ * rail's fading words, `folded` while the compact column fades in after it,
+ * `unfold` while the rail widens and the full rail's words fade in, and
+ * `reverse` while a fold pressed again mid way widens the rail back and its
+ * words return from wherever their fade had reached.
+ */
+export type AppShellRailMotion = 'fold' | 'folded' | 'unfold' | 'reverse';
+/**
+ * The rail's own motion, which a change of shape waits for: its width, on the
+ * rail itself, and the keyframes its words arrive by (AppShell.css), wherever
+ * they run inside it. Named, so that nothing else moving inside the rail (a
+ * meter filling, a badge arriving, a paused animation) holds a fold. The
+ * words LEAVE by a transition of their opacity, which a reversal turns back
+ * from where it is, and the rail's width outlasts it.
+ */
+export declare const RAIL_MOTION: {
+    readonly transitions: readonly ["width"];
+    readonly animations: readonly ["crewlet-app-shell-rail-unfold", "crewlet-app-shell-rail-settle"];
+};
+/**
+ * The shape to draw the rail's content in, the phase of the change under
+ * way, and whether the content drawn is only leaving (and so inert), for a
+ * rail whose chosen shape is `target`.
+ *
+ * `moves` is whether a change may animate at all: never in the drawer, where
+ * the rail is always the full list and a shape is not a width. A change that
+ * arrives WITH the window crossing into the wide layout does not animate
+ * either: the reader resized a window, they did not fold a rail.
+ */
+export declare function useRailMotion(target: AppShellRailShape, moves: boolean, rail: RefObject<HTMLElement | null>): {
+    drawn: AppShellRailShape;
+    motion: AppShellRailMotion | null;
+    leaving: boolean;
+};

package/dist/AppShell/railShape.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Which shape the shell's rail is drawn in, for the pieces that stand in it
+ * and are also used outside a shell: the brand lockup and the account row.
+ *
+ * A CONTEXT OF ITS OWN, AND ONE THAT NEVER THROWS, because those pieces are
+ * drawn on screens with no shell at all (a sign-in page draws the lockup), and
+ * there the answer is simply the full shape. `useAppShell().rail` is the same
+ * answer for code that is always inside a shell.
+ */
+/**
+ * The rail's two shapes: `full`, the navigation's rows under their headings,
+ * and `compact`, the same places folded to a column of glyphs (`CompactNav`).
+ */
+export type AppShellRailShape = 'full' | 'compact';
+export declare const RailShapeContext: import("react").Context<AppShellRailShape>;
+/** The shape the rail around this component is drawn in now: `full` outside a shell, and in the drawer. */
+export declare function useRailShape(): AppShellRailShape;
+/**
+ * Whether the rail's content is drawn only to finish leaving, while the rail
+ * folds over it (railMotion.ts): `AppShell.Rail` makes it inert then.
+ */
+export declare const RailLeavingContext: import("react").Context<boolean>;

package/dist/{AppShell-2IBUS4TH.css → AppShell-U7D2MUUF.css}

@@ -27,30 +27,40 @@
   --crewlet-app-shell-rail: var(--size-shell-rail);
   --crewlet-app-shell-topbar: var(--size-shell-topbar);
   /* What stands on the frame to the sheet's left: the rail's column, or
-     nothing where there is no rail or the rail is a drawer. The aside's cap
-     below subtracts it, so it is one name for both. */
+     nothing where there is no rail or the rail is a drawer. */
   --crewlet-app-shell-beside: var(--crewlet-app-shell-rail);
-  /* THE ASIDE'S TRACK, while it is a column: the panel's width and the inset
-     it is held off the window's edge by, capped so the sheet keeps the
-     host's floor (`--crewlet-app-shell-aside-reserve`, the page's sheet with
-     its own inset and hairlines). The host publishes both widths on this
-     element; with no reserve the panel takes the width it was given. */
-  --crewlet-app-shell-aside-track: calc(
-    min(
-      var(--crewlet-app-shell-aside),
-      max(
-        0px,
-        100% - var(--crewlet-app-shell-beside) - var(--crewlet-app-shell-aside-reserve, 0px) - var(--size-shell-inset)
-      )
-    ) +
-      var(--size-shell-inset)
+  /*
+   * THE ASIDE'S TRACK, while it is a column: the inset it is held off the
+   * window's edge by at least, and the panel's width and that inset at most.
+   * THE CAP IS THE GRID'S. The page's sheet takes the host's floor as its
+   * own track's minimum (`--crewlet-app-shell-aside-reserve`, the page's sheet
+   * with its own inset and hairlines), and the grid hands the aside what is
+   * left once the rail and that floor have theirs, up to its width. The rail's
+   * track is the rail's live width, so while the rail eases between its
+   * shapes the cap eases with it: a cap computed from the rail's VARIABLE
+   * named the shape drawn, and jumped at both ends of a fold. With no reserve
+   * the panel takes the width it was given, as far as the window holds it.
+   */
+  --crewlet-app-shell-aside-track: minmax(
+    var(--size-shell-inset),
+    calc(var(--crewlet-app-shell-aside) + var(--size-shell-inset))
+  );
+  /* The page's floor beside an aside column, never more than the window
+     leaves it: on a window too narrow for the floor, the page gives way rather
+     than the shell growing past the window's edge. */
+  --crewlet-app-shell-sheet-floor: min(
+    var(--crewlet-app-shell-aside-reserve, 0px),
+    max(0px, 100% - var(--crewlet-app-shell-beside) - var(--size-shell-inset))
   );
   /* Where the drawer's veil sits while it is open. The shell replaces it with
      the surface's own place in the layer band; this default only has to clear
      the page chrome for the moment before that lands. */
   --crewlet-app-shell-drawer-z: var(--z-index-overlay);
   display: grid;
-  grid-template-columns: var(--crewlet-app-shell-rail) minmax(0, 1fr);
+  /* The rail's track is the rail's own width (`auto`), and the rail takes
+     `--crewlet-app-shell-rail` itself, so the track follows it while it eases
+     between its two shapes (see the rail's motion, below). */
+  grid-template-columns: auto minmax(0, 1fr);
   /* One row, the viewport's height less nothing: the sheet's own margin is
      what holds it off the frame's edges, and a row sized by its content would
      let a tall screen push the sheet's bottom edge off the window. */
@@ -89,11 +99,11 @@
    keeps its column and is only narrower, so nothing under the bar moves but
    its end edge. */
 .crewlet-app-shell[data-aside='column'] {
-  grid-template-columns: var(--crewlet-app-shell-rail) minmax(0, 1fr) var(--crewlet-app-shell-aside-track);
+  grid-template-columns: auto minmax(var(--crewlet-app-shell-sheet-floor), 1fr) var(--crewlet-app-shell-aside-track);
 }
 
 .crewlet-app-shell--no-rail[data-aside='column'] {
-  grid-template-columns: minmax(0, 1fr) var(--crewlet-app-shell-aside-track);
+  grid-template-columns: minmax(var(--crewlet-app-shell-sheet-floor), 1fr) var(--crewlet-app-shell-aside-track);
 }
 
 /* The skip link, drawn only while it holds focus, over everything. */
@@ -133,16 +143,31 @@
  * run the height of the window parallel to it, eight pixels off.
  */
 .crewlet-app-shell__rail {
+  /* The fold control's containing block. Re-declared as `fixed` by the
+     narrow block below, which comes later at the same weight, so the drawer
+     keeps its layer. */
+  position: relative;
   display: flex;
   flex-direction: column;
+  width: var(--crewlet-app-shell-rail);
   min-height: 0;
   min-width: 0;
+  /* THE MOVING EDGE CUTS WHAT IT PASSES. While the rail eases between its
+     shapes its content keeps the width of the shape drawn (below), and the
+     edge clips it rather than squeezing it. Across only: a ring or a badge
+     at a row's top or bottom is never cut. */
+  overflow-x: clip;
   background: var(--color-surface-frame);
+  transition: width var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
+/* THE CONTENT IS LAID OUT AT ITS SHAPE'S WIDTH, never at a width between the
+   two, so no word in the rail rewraps while it moves and nothing drifts with
+   the edge: the column stands still and the edge travels over it. */
 .crewlet-app-shell__rail-inner {
   display: flex;
   flex-direction: column;
+  width: var(--crewlet-app-shell-rail);
   min-height: 0;
   height: 100%;
 }
@@ -718,6 +743,24 @@
   height: 100%;
 }
 
+/*
+ * A FLUSH SCREEN draws its own frame to the sheet's edges: the column gives up
+ * its pad, its measure and its gap, and the scroller reserves no gutter, since
+ * nothing in it scrolls and a strip at its end would cut the screen's own
+ * edge. The column is the containing block for a `LayerHost` the screen
+ * keeps, so its layers fill the screen rather than the window.
+ */
+.crewlet-app-shell--fill-flush .crewlet-app-shell__main {
+  scrollbar-gutter: auto;
+}
+
+.crewlet-app-shell--fill-flush .crewlet-app-shell__content {
+  position: relative;
+  gap: 0;
+  max-width: none;
+  padding: 0;
+}
+
 /* Hidden by default, revealed by the breakpoint below: the wide layout has the
    rail on screen already, so the control that opens it has nothing to do. */
 .crewlet-app-shell__toggle {
@@ -867,6 +910,180 @@
   animation: crewlet-app-shell-aside-slide var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
+/*
+ * THE COMPACT RAIL: the same rail, narrowed to the compact column. One
+ * variable is the rail's width for the grid, the aside's cap and the drawer
+ * alike, so folding the rail is this one declaration. The shell writes the
+ * attribute only where the layout is wide: the drawer under the step is
+ * always the full list.
+ */
+.crewlet-app-shell[data-rail='compact'] {
+  --crewlet-app-shell-rail: var(--size-shell-rail-compact);
+}
+
+/*
+ * THE FOLD CONTROL stands in the rail's top left corner, in both shapes, so
+ * it never moves under the pointer that pressed it: a minus while the rail is
+ * full and a plus while it is compact. The corner is the square the head
+ * leaves empty up and to the left of the brand's mark, and the control is the
+ * target floor (`--size-target-min`), so it ends short of the mark on the
+ * compact column's centre at every density.
+ *
+ * Quiet until the rail is pointed at: the tertiary ink, which holds 3:1 on
+ * the frame, then the secondary, and the ghost's own primary under the
+ * pointer. Its ring is drawn inside its own box, because the corner it
+ * stands in is the window's, and a ring outside it would be cut there.
+ */
+.crewlet-app-shell__fold {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  display: inline-flex;
+}
+
+.crewlet-app-shell__fold > .crewlet-icon-btn {
+  width: var(--size-target-min);
+  height: var(--size-target-min);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-app-shell__rail:hover > .crewlet-app-shell__fold > .crewlet-icon-btn:not(:hover) {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-app-shell__fold > .crewlet-icon-btn:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/*
+ * THE MARK STANDS WHERE THE COMPACT RAIL'S DOES, in both shapes: centred over
+ * the compact column, in the head. Full, the name follows it; compact, the
+ * name is not drawn (the link keeps it as its name and title).
+ */
+.crewlet-app-shell--foldable .crewlet-app-shell__rail-head > .crewlet-brand,
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-head > .crewlet-brand {
+  padding-left: calc((var(--size-shell-rail-compact) - var(--crewlet-brand-mark)) / 2);
+}
+
+.crewlet-app-shell[data-rail='compact'] .crewlet-brand__name,
+.crewlet-app-shell[data-rail='compact'] .crewlet-brand__context {
+  display: none;
+}
+
+/*
+ * COMPACT, THE STATUS HAS A ROW OF ITS OWN under the mark, a small control
+ * step tall, its dot and its count centred in the column: the first thing
+ * under the head, before the places, where the fold control stood before it
+ * moved to the corner.
+ */
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-inner > .crewlet-app-shell__rail-status {
+  justify-content: center;
+  min-width: 0;
+  min-height: var(--size-control-sm);
+  margin: 0;
+}
+
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-body {
+  padding: var(--spacing-1) 0;
+  scrollbar-width: thin;
+}
+
+/*
+ * The compact foot: what the full foot holds, centred in the column, a step
+ * apart: a Settings tile, the reader's face.
+ */
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-foot {
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1) 0 var(--spacing-3);
+}
+
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-foot > .crewlet-compact-nav {
+  align-self: stretch;
+}
+
+/*
+ * THE COMPACT FACE IS CENTRED ON THE TILES' LINE. It gives up the full row's
+ * badge column and the step after it (above): kept, the step stood the face
+ * 4px left of the column's centre, in a box 8px wider than the face, so the
+ * face sat off the line every tile above it is centred on.
+ */
+.crewlet-app-shell__rail-foot .crewlet-account-row--compact .crewlet-account-row__avatar {
+  width: auto;
+  margin-inline-end: 0;
+}
+
+/*
+ * THE RAIL'S MOTION (railMotion.ts). The rail's width eases between the two
+ * shapes on the slow step with the emphasized curve, the motion a
+ * `DockColumn` opens and closes by, so a column of the frame and a column of
+ * a screen move as one. What the rail holds keeps the width of the shape
+ * drawn, so the moving edge clips the words rather than squeezing them.
+ *
+ * FOLDING, the full rail stays drawn, inert, while the edge narrows to the
+ * compact column, and its words fade out on the base step; the compact column
+ * is drawn when the rail's motion has ended, and fades in on the fast step.
+ * UNFOLDING, the full rail is drawn at once and fades in while the edge
+ * uncovers it. The brand's mark and the fold control are in the same place in
+ * both shapes, so neither fades.
+ *
+ * THE WORDS LEAVE BY A TRANSITION and arrive by keyframes. A fold takes their
+ * opacity to nothing; a fold pressed again mid way (`reverse`) declares
+ * nothing of its own, so the same transition takes the opacity back from
+ * wherever it had reached. Faded out by keyframes instead, a reversal could
+ * only start an entrance from nothing, and the words blinked out and back.
+ * The transition is declared only while the rail moves, so nothing else that
+ * sets these parts' opacity is eased.
+ */
+.crewlet-app-shell[data-rail-motion='fold'] > .crewlet-app-shell__rail {
+  width: var(--size-shell-rail-compact);
+}
+
+/* Two names for one entrance, so an unfold pressed while the compact column
+   is still arriving starts the full rail's entrance afresh. */
+@keyframes crewlet-app-shell-rail-unfold {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes crewlet-app-shell-rail-settle {
+  from {
+    opacity: 0;
+  }
+}
+
+.crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-body,
+.crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-foot,
+.crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-status,
+.crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-head .crewlet-brand__name,
+.crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-head .crewlet-brand__context {
+  transition: opacity var(--motion-duration-base) var(--motion-easing-out);
+}
+
+.crewlet-app-shell[data-rail-motion='fold'] .crewlet-app-shell__rail-body,
+.crewlet-app-shell[data-rail-motion='fold'] .crewlet-app-shell__rail-foot,
+.crewlet-app-shell[data-rail-motion='fold'] .crewlet-app-shell__rail-status,
+.crewlet-app-shell[data-rail-motion='fold'] .crewlet-app-shell__rail-head .crewlet-brand__name,
+.crewlet-app-shell[data-rail-motion='fold'] .crewlet-app-shell__rail-head .crewlet-brand__context {
+  opacity: 0;
+}
+
+.crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-body,
+.crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-foot,
+.crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-status,
+.crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-head .crewlet-brand__name,
+.crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-head .crewlet-brand__context {
+  animation: crewlet-app-shell-rail-unfold var(--motion-duration-slow) var(--motion-easing-out);
+}
+
+.crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-body,
+.crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-foot,
+.crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-status {
+  animation: crewlet-app-shell-rail-settle var(--motion-duration-fast) var(--motion-easing-out);
+}
+
 @media (width < 1024px) {
   .crewlet-app-shell {
     --crewlet-app-shell-beside: 0px;
@@ -877,7 +1094,7 @@
      step is still a column; the rail is a drawer here and takes no track. */
   .crewlet-app-shell[data-aside='column'],
   .crewlet-app-shell--no-rail[data-aside='column'] {
-    grid-template-columns: minmax(0, 1fr) var(--crewlet-app-shell-aside-track);
+    grid-template-columns: minmax(var(--crewlet-app-shell-sheet-floor), 1fr) var(--crewlet-app-shell-aside-track);
   }
 
   .crewlet-app-shell--no-rail {
@@ -942,6 +1159,12 @@
     transition: transform var(--motion-duration-slow) var(--motion-easing-emphasized);
   }
 
+  /* The drawer never changes shape, and on a window narrower than the rail
+     it is the window's width: its content fills it rather than being cut. */
+  .crewlet-app-shell__rail-inner {
+    width: auto;
+  }
+
   .crewlet-app-shell__toggle {
     display: inline-flex;
   }
@@ -976,6 +1199,27 @@
   .crewlet-app-shell__aside[data-shape='sheet'] {
     animation: none;
   }
+
+  /* Under reduced motion the shell draws the new shape at once
+     (`usePresence`), so no phase starts; these hold even if one did. */
+  .crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-body,
+  .crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-foot,
+  .crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-status,
+  .crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-head .crewlet-brand__name,
+  .crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-head .crewlet-brand__context {
+    transition: none;
+  }
+
+  .crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-body,
+  .crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-foot,
+  .crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-status,
+  .crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-head .crewlet-brand__name,
+  .crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-head .crewlet-brand__context,
+  .crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-body,
+  .crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-foot,
+  .crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-status {
+    animation: none;
+  }
 }
 
 /* ── the account row ───────────────────────────────────────────────────── */
@@ -1176,6 +1420,33 @@ button.crewlet-account-row__who:focus-visible {
   gap: var(--spacing-1);
 }
 
+/*
+ * THE COMPACT ACCOUNT: the reader's face alone, centred in the compact rail's
+ * foot, the face's own corner carrying the lift, the hover and the ring. It
+ * keeps the row's link and menu rules above (hover, current, ring), with no
+ * pad of its own, so the box is the face.
+ */
+.crewlet-account-row--compact {
+  justify-content: center;
+  padding: 0;
+}
+
+.crewlet-account-row__who--compact,
+.crewlet-app-shell__rail-foot .crewlet-account-row__who--compact {
+  flex: none;
+  width: auto;
+  min-height: 0;
+  padding: calc(var(--spacing-1) / 2);
+  border-radius: var(--radius-md);
+}
+
+/* The ring stands off the face, outside it: drawn inside, it would cover the
+   face's own edge and status. */
+.crewlet-account-row__who.crewlet-account-row__who--compact:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-account-row__who {
     transition: none;

package/dist/ArrangeFrame/index.js

@@ -1,5 +1,5 @@
-export { ArrangeFrame, useGridResize } from '../chunk-PLNJEDGI.js';
-import '../chunk-2G355KDJ.js';
+export { ArrangeFrame, useGridResize } from '../chunk-I4IO56EY.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArrangeGroup/index.js

@@ -1,4 +1,4 @@
-export { ArrangeGroup } from '../chunk-CYYBE2MM.js';
-import '../chunk-MLDTLZAO.js';
+export { ArrangeGroup } from '../chunk-7U6PK242.js';
+import '../chunk-D2GT3CR4.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArrangeList/index.js

@@ -1,13 +1,14 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-TKUAGWNR.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-XTJHMP3W.js';
 import '../chunk-3XDT5ZWL.js';
-import '../chunk-MPVMB2DV.js';
-import '../chunk-LMQG3VPG.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-BVML4UVB.js';
+import '../chunk-YQ7Q52XU.js';
+import '../chunk-YJQXESOJ.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';