@crewlethq/ui 0.82.0 → 0.83.0

package/README.md

@@ -53,7 +53,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useHighlightRest` and `HIGHLIGHT_REST_MS`, `useClipboard`, `useDownload`, `downloadText`, `downloadBlob`, `safeFilename`, `toCsv`, `elementToPng` and `ElementToPngError`, `useOutcome`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
 | Layout | `Container`, `Section`, `Card`, `TileGrid`, `ListDetail`, `AsideLayout`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
 | Arranging a page | `ArrangeBoard`, `ArrangeGrid`, `ArrangeFrame` (with `useGridResize`), `ArrangeGroup`, `ArrangeList`, and the reorder hooks under them (`useReorder`, `useReorderLists`, `moveKey`) |
-| Application shell | `AppShell` with `AppShell.Rail`, the compact rail (`rail="compact"`, the one fold control from `onRailChange`, and `useAppShell().rail` to pick the shape) and `fill="flush"`, the `aside` track and the `peek` slot (`useAppShellAside`, `useAppShellPeek`), `AppShell.ResizeHandle` (also `ResizeHandle`) and `useStoredWidth`, `SidePanel` and `SidePanelFrame`, `PeekRail` and `PeekHost` (with `PeekNeighbours`, `usePeekNeighbours`, `usePeekStep`, `peekClickHandler`, `peekRowActivation`), `SectionFrame` (with `SectionFrame.Nav` and `SectionFrame.Body`), `LockedLabel`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem` (with `dense` lists, `unread` and `muted` rows and `collapsible` groups), `CompactNav` with `CompactNavItem`, `CompactNavGroup` and `CompactNavSeparator` (the rail folded to its marks, fed from the same places), `DirectoryList`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen`, `useIdle`, `useMediaMatch` |
+| Application shell | `AppShell` with `AppShell.Rail`, the compact rail (`rail="compact"`, the one fold control from `onRailChange`, and `useAppShell().rail` to pick the shape) and `fill="flush"`, the `aside` track and the `peek` slot (`useAppShellAside`, `useAppShellPeek`), `AppShell.ResizeHandle` (also `ResizeHandle`) and `useStoredWidth`, `SidePanel` and `SidePanelFrame`, `PeekRail` and `PeekHost` (with `PeekNeighbours`, `usePeekNeighbours`, `usePeekStep`, `peekClickHandler`, `peekRowActivation`), `SectionFrame` (with `SectionFrame.Nav` and `SectionFrame.Body`), `DockColumn` and `usePresence`, `LockedLabel`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem` (with `dense` lists, `unread` and `muted` rows and `collapsible` groups), `CompactNav` with `CompactNavItem`, `CompactNavGroup` and `CompactNavSeparator` (the rail folded to its marks, fed from the same places), `DirectoryList`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen`, `useIdle`, `useMediaMatch` |
 | Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `ThemeGallery`, `ThemeSwatch`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences`, and the framework-free `applyTheme`, `applyPalette`, `applyDensity` with `THEME_PREFERENCES`, `DENSITY_PREFERENCES` and their guards |
 | Artifacts | `SandboxedFrame` (with `SandboxedFramePlaceholder` and `SandboxedFrameNotice`), `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard`, `ArtifactKindGlyph` and `ArtifactPreviewGlyph` (the preview a card draws with no cover, for a cover with nothing to draw), `ArtifactBar` and `ArtifactVersionChip` (an open artifact's one slim bar), `ArtifactPanel` and `ArtifactWorkspace` (the panels it opens beside or over the artifact), `CanvasBoard` (a design's artboards and notes on a `Canvas`, with the visibility budget `liveBoards`), `CanvasToolbar` (a canvas's tool palette, with `toolForKey`), `LayersList` (the list of a canvas's items beside it, marked by the canvas's selection), `CanvasSchematic` (a design's cover, drawn from its boards' frames), `AccessDeniedCard`, `ArtifactIcon` (with `artifactIconGlyph` and `ARTIFACT_ICON_WORDS`), the native gallery covers (`DocCover`, `SheetCover`, `DashboardCover`), `MergeConflicts`, the dashboard pieces (`WidgetFrame`, `DatasetSource` and `DatasetSourceList`), and `FrameProtocol` (the wire between a host page and an embedded artifact, with no React in it), `ArtifactNameCell` and `ArtifactAccessLabel` (with `ArtifactAccessGlyph`) for a list of artifacts |
 | Sheets | `SheetGrid`, the cells on their own (`CheckboxCell`, `TextCell`, `LongTextCell`, `NumberCell`, `SelectCell`, `MultiSelectCell`, `PersonCell`, `StatusCell`, `DateCell`, `UrlCell`, `RatingCell`, and `SheetCell` for any type), `ChangeMark`, and `SheetModel` (every rule a sheet is drawn from, with no React in it: values, parsing, the keyboard model, TSV, the pending edits of D23) |
@@ -205,6 +205,34 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.83.0
+
+### The application rail
+
+**The fold control is a plus and a minus in the rail's top left corner.** The chevron in the row under the rail's head is gone. In its place `AppShell` draws one control in the corner the head leaves empty, up and to the left of the brand's mark: a minus (`MinusGlyph`) while the rail is full, to make it smaller, and a plus (`PlusGlyph`) while it is compact, to open it. It is the same element in both shapes and never moves, so focus stays on it across a fold. It keeps its names ("Collapse the sidebar" and "Expand the sidebar", or `railFoldLabels`), `aria-controls`, `aria-keyshortcuts` and the keys in its tooltip, and now says `aria-expanded` (true while the rail is full). It stands at the target floor (`--size-target-min`, 24px) at every density, its ring is drawn inside its own box, and it is quiet until the rail is pointed at. Full, the search field keeps the nav's own columns, since nothing stands before it any more. Props are unchanged.
+
+**The rail eases between its two shapes.** Its width moves on the slow step with the emphasized curve, the motion a `DockColumn` opens by, and what it holds keeps the width of the shape drawn, so the moving edge clips the rail's words rather than squeezing or rewrapping them, and the column under the edge never drifts. Folding, the full rail's middle, foot and status stay drawn and inert while its words fade out (focus inside them goes to the rail's first live control: the fold control, or the brand's link in the head, which stays live; with neither, the folded rail's first control once it is drawn), then the compact column fades in once the rail has moved; unfolding, the full rail is drawn at once and fades in while the edge uncovers it. The brand's mark and the fold control do not move or fade. Both shapes are a `usePresence` each, so the rail waits on the motion actually running on it, as a `DockColumn` does. `useAppShell().rail` reports the shape drawn, so it stays `full` until a fold has moved; the root's `data-rail-motion` (`fold`, `folded`, `unfold`, and `reverse` for a fold pressed again mid way, type `AppShellRailMotion`) names the phase under way. The words leave by a transition of their opacity, so a reversal brings them back from wherever their fade had reached rather than blinking them out and in; `usePresence` reports such a return as `returning`. Under reduced motion, and wherever nothing moves, the new shape is drawn at once. A change that arrives with the window crossing into the wide layout is drawn at once too. The rail's grid track is now `auto` and the rail takes `--crewlet-app-shell-rail` as its own width, which is still the one variable a host sets for a narrower rail. An aside column capped by the page's floor (`asideReserve`) now takes what the grid leaves it beside the rail's LIVE width, so it widens and narrows with the rail frame by frame, where a cap computed from the rail's variable jumped at both ends of a fold (story: `AppShellAside` Cap Follows A Folding Rail). While the rail moves the shell holds what it measures (the screen's width that `useScreenWidth` and `useScreenBelow` read, the scroller's gutter, the aside's width) and takes each once when the rail comes to rest, so no screen re-renders on every frame of a fold or changes shape mid way; a container query on the content column still follows every frame.
+
+**In the compact rail the status has a row of its own under the brand's mark**, where the fold chevron stood, rather than at the top of the foot: the `AppShell.RailStatus` dot and count, centred, a small control step tall, before the places. It keeps its button, its name ("Engine serving, 2 alarms"), its popup attributes and its ref. A panel it opens now stands at the top of the rail, so open it below the status (`side="bottom"`) in both shapes. Full, it stays at the end of the head's line.
+
+**The compact account face is centred on the tiles' line.** It took the full row's badge column and the step after it, which stood the face 4px left of the column's centre in a box 8px wider than the face. It now sits in a box of its own size, centred under the tiles. Hand the face at the tiles' height in the compact rail (`Avatar size="sm"`, 26px); the full row keeps `size="md"`.
+
+**A place that waits on the reader takes the badge, whichever place it is.** `NavItem` and `CompactNavItem` draw a `badge` as the one filled accent pill, centred on the row's line and ending on the row's end inset, so a column of badges lines up down the rail; a `count` is the quiet figure. Nothing changed in how either is drawn: to show the reader's own work as the inbox is shown, pass `badge` rather than `count`. New stories: `AppShell` Fold Control In Both Shapes, `SidebarNav` Badges On The Rows About You, and `DockColumn` (Pinned Beside A Conversation, Unpinned, At The End).
+
+### Columns that ease open and shut
+
+**`usePresence` is new**: something kept drawn while it leaves. `usePresence(shown, ref, { transitions, animations, instant })` answers `present` (draw it), `leaving` (drawn only to finish leaving: make it `inert`) and `entering` (shown again, never on the first draw, while its motion runs: the window a stylesheet scopes an entrance to). It waits only for the surface's OWN motion (`MotionOwnership`), as it is actually running (`getAnimations()`), never for a duration written in code: the transitions on `ref`'s element itself (by property; any, if `transitions` is left out) and the keyframes it names in `animations`, wherever they run under it. A motion something else inside it runs (a meter filling, a badge arriving), a paused one and an endless one (a pulse) are never waited for, a motion replaced mid way is waited out in its turn, a reopen on the way out cancels the wait, and no wait outlasts the motion's own remaining time and a margin (the fast step), so a tab hidden mid motion still settles. Under `prefers-reduced-motion: reduce`, where nothing runs, where the Web Animations API is missing, and for a change the host marks `instant`, it goes straight through in the same commit, before any paint. `afterMotion(element, done, owned)` and `runningMotion(element, owned)` are the same wait for a host with its own state, `tokenMs(motion.duration.fast)` turns a motion token into milliseconds (Tooltip and CompactNav each kept a copy), `releaseFocus(container, target)` takes focus out of something about to turn inert (to the host's `target`, or off it). The reader's motion preference is now asked through one spelling of the query, **`REDUCED_MOTION_QUERY`**, with **`prefersReducedMotion(view)`** for a read outside render, both beside `useMediaMatch`; `ChatThread`, `Outline`, `useReorder` and `TreeCanvas` use them where each kept a copy of the string. The ui-tests helper `apps/ui-tests/src/motion.ts` (`driveMotion`, `settleMotion`, `preferReducedMotion`) starts and ends motion by hand in jsdom.
+
+**`DockColumn` is new**: a column a host docks beside its content and takes away again, such as a list of rooms pinned beside a conversation. It stands in the host's own `auto` grid track (or as a flex item that does not grow) and eases its width between none and its panel's (`width`, px or any length) on the slow step with the emphasized curve, so the content beside it resizes frame by frame rather than jumping. The panel keeps its own width and is held to the edge that faces the content, so it slides in from the outer edge, and on close it stays drawn and `inert` until the column has closed over it; opened again on the way out, it is live where it is. Closed from inside (an Unpin in its own head), focus goes to `focusOnClose`, the control that docks it again, and is never left in the panel. `side` (`start`, the default, or `end`) places it, `divider` (on by default) draws the hairline on the edge that faces the content, and `--crewlet-dock-column-ground` gives the panel a ground. It is a plain column, not a landmark: what it holds names itself. Under reduced motion it simply is or is not. Types: `DockColumnProps`, `DockColumnSide`.
+
+### React
+
+**The package asks for React 19** (`react` and `react-dom` `>=19`, was `>=18`). The components already used what React 19 brought, `inert` as a boolean prop and `ref` as a plain prop of a function component and of an element (`ArrangeFrame`, `Tooltip`, `ListInput`, and now `DockColumn`, the folding rail and `Popover`), and under React 18 neither fails loudly: `inert` is dropped with a warning, so a panel on its way out stays focusable, and a ref read from props is undefined, so a trigger's own ref is lost. Every Crewlet application is on React 19. A suite holds the peer range to the source.
+
+### Refs
+
+**A trigger keeps its own ref across re-renders.** `Tooltip` cloned its trigger with a new ref callback on every render, so React took the element away from the trigger's own ref and gave it back in each commit, and a layout effect earlier in the tree read null while the control stood in the document (a `DockColumn` handing focus to a tooltip-wrapped Pin control as it closed). `Tooltip`, `Popover`, `Menu`'s trigger props and `Modal`'s frame now join their refs with **`useComposedRef(...refs)`** (new, with **`composeRefs`** for code outside a component and **`attachRef`** for one ref), one callback for any number of refs that is the same callback while they are the same and releases each the way React would. `Popover` also keeps the ref its trigger carried, which it used to replace.
+
 ## Changes in 0.82.0
 
 ### A conversation's messages

package/dist/AppShell/AccountRow.d.ts

@@ -13,6 +13,9 @@ export interface AccountRowProps {
     /**
      * The reader's badge, drawn decorative: the name beside it says who it is.
      * In a rail's foot the row is sized for a medium one (`size="md"`, 32px).
+     * In the compact rail the face stands among the compact places' tiles and
+     * takes their height, a small one (`size="sm"`, 26px), centred in the
+     * column as each tile is.
      */
     avatar: ReactNode;
     /** Who the reader is. */
@@ -73,6 +76,8 @@ export interface AccountRowProps {
  * IN THE COMPACT RAIL THE ROW IS THE READER'S FACE (`compact`): the same link
  * or menu button, holding the badge alone, named by the name and the detail
  * as the full row is, and showing them in a tooltip, since a face says who
- * it is only to somebody who already knows.
+ * it is only to somebody who already knows. The face is centred in the
+ * column on the line the tiles above it are centred on, and at their height
+ * when it is handed at the small step.
  */
 export declare function AccountRow({ avatar, name, detail, href, menu, current, title, linkSuffix, actions, compact: compactProp, className, }: AccountRowProps): import("react").JSX.Element;

package/dist/AppShell/AppShell.d.ts

@@ -63,6 +63,7 @@ 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. */
@@ -97,6 +98,8 @@ interface AppShellContextValue {
      * 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;
 }
@@ -159,8 +162,10 @@ export interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
     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); keeping the
-     * choice, and binding a key to it, are the application's.
+     * 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;
     /**
@@ -248,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;
     /**
@@ -268,9 +274,12 @@ export interface AppShellRailProps {
  * 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 at the top of
- * the foot as its dot and count, since the head has no line left beside the
- * mark. The middle and the foot are drawn as the application gives them.
+ * 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;
 /**

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, AppShellRailShape, 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,8 +1,11 @@
-export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-T4IEESXN.js';
-import '../chunk-RTPQDNW3.js';
-import '../chunk-ISQANI6Q.js';
-import '../chunk-3QQIGMY3.js';
-import '../chunk-YOJAGKTS.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';

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

@@ -15,3 +15,8 @@ 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-F7RID4P4.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. */
@@ -139,14 +149,25 @@
   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%;
 }
@@ -890,7 +911,7 @@
 }
 
 /*
- * THE COMPACT RAIL: the same track, narrowed to the compact column. One
+ * 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
@@ -901,21 +922,29 @@
 }
 
 /*
- * THE FOLD CONTROL stands over the compact column's centre, in the row under
- * the head, in both shapes, so it never moves under the pointer that pressed
- * it. 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.
+ * 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: calc(var(--size-shell-inset) + var(--crewlet-app-shell-topbar));
-  left: calc((var(--size-shell-rail-compact) - var(--size-control-sm)) / 2);
+  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);
 }
 
@@ -923,6 +952,10 @@
   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
@@ -939,30 +972,16 @@
 }
 
 /*
- * FULL, THE FIELD STARTS AFTER THE FOLD CONTROL, a step off it, on the row
- * the control stands in. The field holds its place at the top of the rail's
- * middle while the rows scroll under it, on the frame's own ground, so the
- * control beside it is always beside it.
+ * 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.
  */
-/* The middle is a stacking context of its own, so the field pinned in it
-   stands over the rows scrolling under it and the whole middle stands under
-   the fold control, which is painted a step above the rail. */
-.crewlet-app-shell--foldable .crewlet-app-shell__rail-body {
-  isolation: isolate;
-}
-
-.crewlet-app-shell--foldable[data-rail='full'] .crewlet-app-shell__rail-search {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  padding-left: calc((var(--size-shell-rail-compact) + var(--size-control-sm)) / 2 + var(--spacing-2));
-  background: var(--color-surface-frame);
-}
-
-/* COMPACT, THE FOLD CONTROL HAS A ROW OF ITS OWN under the mark, which the
-   head leaves room for, and the column of tiles starts under it. */
-.crewlet-app-shell--foldable[data-rail='compact'] .crewlet-app-shell__rail-head {
-  margin-bottom: var(--size-control-sm);
+.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 {
@@ -972,7 +991,7 @@
 
 /*
  * The compact foot: what the full foot holds, centred in the column, a step
- * apart: the status's dot, a Settings tile, the reader's face.
+ * apart: a Settings tile, the reader's face.
  */
 .crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-foot {
   align-items: center;
@@ -984,10 +1003,85 @@
   align-self: stretch;
 }
 
-.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-foot > .crewlet-app-shell__rail-status {
-  justify-content: center;
-  min-width: 0;
-  margin: 0;
+/*
+ * 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) {
@@ -1000,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 {
@@ -1065,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;
   }
@@ -1099,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 ───────────────────────────────────────────────────── */

package/dist/ArrangeList/index.js

@@ -1,7 +1,8 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-WT3B76MG.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-XTJHMP3W.js';
 import '../chunk-3XDT5ZWL.js';
-import '../chunk-MPVMB2DV.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';

package/dist/ArtifactBar/index.js

@@ -1,13 +1,15 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-XY4O2XMR.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-BXGBGYKH.js';
 import '../chunk-36WK24AI.js';
-import '../chunk-GZVAZ3LL.js';
-import '../chunk-HCUECVZ3.js';
+import '../chunk-AZYE7NR4.js';
+import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-AVL52EME.js';
 import '../chunk-RSKW25Y5.js';
-import '../chunk-3QQIGMY3.js';
-import '../chunk-YOJAGKTS.js';
+import '../chunk-7ZSEUO5Q.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-TGGYSQRD.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-CMAZZY2I.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';

package/dist/ArtifactCard/index.js

@@ -1,4 +1,4 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-2H6YDUR5.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-QM3432PH.js';
 import '../chunk-I4IUX3JF.js';
 import '../chunk-HF5L56YQ.js';
 import '../chunk-EJNJMHQG.js';
@@ -8,8 +8,8 @@ import '../chunk-AV2DXAEL.js';
 import '../chunk-IRONPJB4.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-ZB3E2Z4Y.js';
-import '../chunk-DOY3KC6I.js';
 import '../chunk-YQ7Q52XU.js';
+import '../chunk-DOY3KC6I.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';
 import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';