@12-apps/ui 6.51.1 → 6.52.1

package/dist/user-avatar.js

@@ -1,7 +1,7 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-MG3SRQ6N.js";
+} from "./chunk-EOTV5BLM.js";
 import "./chunk-UDQSIRAP.js";
 import "./chunk-PGPPN63I.js";
 import "./chunk-TNQDSTIA.js";
@@ -10,29 +10,29 @@ import "./chunk-3ZVUNSFF.js";
 import "./chunk-MTEQEPNY.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";
-import "./chunk-OP5JR5Q5.js";
-import "./chunk-76X6JRVI.js";
+import "./chunk-WN5PNP6F.js";
 import "./chunk-FKUYRQSP.js";
+import "./chunk-76X6JRVI.js";
 import "./chunk-JH7EEJEQ.js";
 import "./chunk-BA4RHQ3B.js";
 import "./chunk-RIZRF5XR.js";
 import "./chunk-LTE2QHBH.js";
 import "./chunk-LN46DSMF.js";
 import "./chunk-TAMIZE4Q.js";
-import "./chunk-YZHX2HTC.js";
-import "./chunk-6IWO7CM2.js";
+import "./chunk-MKLIMY3D.js";
+import "./chunk-PAT2BQOQ.js";
 import "./chunk-TYJR4GOF.js";
 import "./chunk-2TZ6X265.js";
 import "./chunk-7FDU3FIN.js";
 import "./chunk-EPEJMTCQ.js";
 import "./chunk-GDN2LUTZ.js";
-import "./chunk-6WZUZHJM.js";
+import "./chunk-YFODI4KT.js";
+import "./chunk-VBP46YP4.js";
 import "./chunk-2BYKTBDL.js";
 import "./chunk-AG66JBNH.js";
 import "./chunk-FZXKH2ZT.js";
-import "./chunk-VBP46YP4.js";
-import "./chunk-O6MJWHU5.js";
 import "./chunk-26X4CZVR.js";
+import "./chunk-O6MJWHU5.js";
 import "./chunk-FQ6UW7IY.js";
 import "./chunk-6JAIFIPW.js";
 import "./chunk-N3GAFIXG.js";

package/dist/utility/WorkflowStep.js

@@ -6,23 +6,23 @@ import "../chunk-LV4WSWQZ.js";
 import "../chunk-KNWG77FB.js";
 import "../chunk-TM5QQJTF.js";
 import "../chunk-3IPPMWUA.js";
-import "../chunk-7ZPUN7TV.js";
-import "../chunk-SJ4IAZ3V.js";
+import "../chunk-DH6J64PS.js";
 import "../chunk-25MSGLNU.js";
 import "../chunk-GAXHYRX6.js";
 import "../chunk-NP6SHLQ3.js";
+import "../chunk-7ZPUN7TV.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-2TZ6X265.js";
 import "../chunk-7FDU3FIN.js";
 import "../chunk-EPEJMTCQ.js";
 import "../chunk-GDN2LUTZ.js";
-import "../chunk-6WZUZHJM.js";
+import "../chunk-YFODI4KT.js";
+import "../chunk-VBP46YP4.js";
 import "../chunk-2BYKTBDL.js";
 import "../chunk-AG66JBNH.js";
 import "../chunk-FZXKH2ZT.js";
-import "../chunk-VBP46YP4.js";
-import "../chunk-O6MJWHU5.js";
 import "../chunk-26X4CZVR.js";
+import "../chunk-O6MJWHU5.js";
 import "../chunk-FQ6UW7IY.js";
 import "../chunk-6JAIFIPW.js";
 import "../chunk-N3GAFIXG.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.51.1",
+  "version": "6.52.1",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/DataGrid/DataGrid.md

@@ -165,7 +165,7 @@ export interface DataGridProps<T = any> extends React.HTMLAttributes<HTMLElement
 
   /** Sizing, density, and layout */
   sizeMode?: GridSizeMode; // auto | fixed | fill
-  density?: GridDensity; // compact | comfortable | spacious
+  density?: GridDensity; // compact | comfortable | spacious; defaults to 'comfortable', never the theme (FUT-2886)
   rowHeight?: number; // default row height (px)
   headerHeight?: number; // default header height (px)
   footerHeight?: number; // optional
@@ -303,6 +303,17 @@ Use Requisio tokens only:
 - Elevation (optional for sticky header shadow): `--rs-shadow-sm`
 - Density mapping adjusts `rowHeight`, paddings, and font sizes.
 
+**A theme density scales a grid once, through `rem()`** (FUT-2886). With no
+`density` prop, the grid's own discrete density stays `'comfortable'` no
+matter what the host theme's density is set to — it is NOT re-picked from the
+theme. The theme's density factor still applies, exactly the way it scales
+every other size on the page, so a compact theme still gives smaller rows
+(≈0.9× the unthemed default) and a comfortable one still gives taller ones
+(≈1.1×); it does so by scaling the `'comfortable'` row through `rem()`, not by
+swapping in a different discrete row-height table (`'compact'`'s 0.8× or
+`'spacious'`'s 1.2×). Pass `density` explicitly for a deliberate, second,
+per-grid choice on top of that.
+
 Dark mode:
 
 - Verify AA contrast for header/body text, dividers, selected rows, and focus outlines.

package/src/components/data-display/DataGrid/DataGrid.model.ts

@@ -15,7 +15,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type React from 'react';
 
 import { rem, remPx } from '../../../tokens/relative';
-import { useDensity, type DensityLevel } from '../../../tokens/density';
 
 import { processRows } from './DataGrid.rows';
 import type {
@@ -53,8 +52,9 @@ export interface VisibleRange {
 export interface DataGridModel<T extends Record<string, unknown>> {
   containerRef: React.RefObject<HTMLDivElement | null>;
   /**
-   * The density this render actually used: `props.density`, else the
-   * theme-driven default (FUT-2769, {@link mapThemeToGridDensity}). The same
+   * The density this render actually used: `props.density`, else
+   * `'comfortable'` — the grid's own normal density, never re-picked from the
+   * theme (FUT-2886, reverting FUT-2769's default-from-theme half). The same
    * value `rowHeight` was scaled by — read it here rather than re-deriving it,
    * so the reported default and the geometry can never disagree.
    */
@@ -91,21 +91,6 @@ function densityHeight(base: number, density: DataGridProps['density']): number
   return base;
 }
 
-/**
- * The theme's density level, aliased to `GridDensity` (FUT-2769 — umbrella
- * Decision 7, non-breaking): `GridDensity`'s three names are not the theme's
- * three names, so this is an alias table rather than a verbatim read.
- * `'normal'` (the theme's own default, and what a theme with no density at
- * all resolves to) maps to `'comfortable'` — today's literal default,
- * unchanged — so the mapping is a no-op exactly when nothing about density
- * has been said.
- */
-export function mapThemeToGridDensity(level: DensityLevel): GridDensity {
-  if (level === 'compact') return 'compact';
-  if (level === 'comfortable') return 'spacious';
-  return 'comfortable';
-}
-
 /** The rows this render should show, with every client-mode step resolved. */
 function useProcessedRows<T extends Record<string, unknown>>(
   props: DataGridProps<T>,
@@ -316,13 +301,13 @@ export function useDataGridModel<T extends Record<string, unknown>>(
 ): DataGridModel<T> {
   const { columns } = props;
   const theme = useTheme();
-  const themeDensity = useDensity();
   const containerRef = useRef<HTMLDivElement>(null);
   const [editingCell, setEditingCell] = useState<EditingCell | null>(null);
   const { sortBy, filters, setInternalSortBy } = useSortAndFilter(props);
-  // An explicit `density` prop wins; otherwise the theme's own level, aliased
-  // to this grid's three names (FUT-2769).
-  const density = props.density ?? mapThemeToGridDensity(themeDensity.level ?? 'normal');
+  // An explicit `density` prop wins; otherwise the grid's own normal density,
+  // never from the theme (FUT-2886) — the theme's factor still scales the row
+  // height below, but only once, through `rem()`.
+  const density = props.density ?? 'comfortable';
   // 52 design px unless the caller says; the density scales it, then the type scale does.
   const designRowHeight = densityHeight(props.rowHeight ?? 52, density);
   const rowPitch = remPx(theme, designRowHeight);

package/src/components/data-display/DataGrid/DataGrid.types.ts

@@ -158,7 +158,13 @@ export interface DataGridProps<T = Record<string, unknown>> extends React.HTMLAt
 
   /** Sizing, density, and layout */
   sizeMode?: GridSizeMode; // auto | fixed | fill
-  density?: GridDensity; // compact | comfortable | spacious
+  /**
+   * compact | comfortable | spacious. Defaults to `'comfortable'` — NOT the
+   * host theme's density: a theme density still scales row height, but only
+   * once, through `rem()` (FUT-2886). Pass this explicitly for a deliberate,
+   * per-grid density on top of that.
+   */
+  density?: GridDensity;
   /** Row height (default 52) — design px, scaled with the theme's type scale; `density` scales it first. */
   rowHeight?: number;
   /** Header row height (default 56) — design px, scaled with the theme's type scale. */

package/src/components/data-display/DataViews/data-views-layout-context.tsx

@@ -7,7 +7,6 @@ import GridViewOutlinedIcon from "@mui/icons-material/GridViewOutlined";
 import { Slider } from "../../form/Slider";
 import { Box } from "../../../mui/Box";
 import { sxRem } from "../../../tokens/relative";
-import { useDensity, type DensityLevel } from "../../../tokens/density";
 
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { DATA_VIEWS_LAYOUTS, type DataViewsLayout } from "./data-views-types";
@@ -168,20 +167,18 @@ function isDensity(value: unknown): value is DataViewsDensity {
 }
 
 /**
- * The theme's density level, aliased to `DataViewsDensity` (FUT-2769 —
- * umbrella Decision 7, non-breaking): `DataViewsDensity`'s three names are not
- * the theme's three names, so this is an alias table rather than a verbatim
- * read. `'normal'` (the theme's own default, and what a theme with no density
- * at all resolves to) maps to `'cozy'` — today's literal default, unchanged —
- * so the mapping is a no-op exactly when nothing about density has been said.
- * The STORED per-viewer preference still wins over this default, unchanged
+ * `density`'s default with nothing stored and nothing passed (FUT-2886,
+ * reverting FUT-2769's own half of this): always `'cozy'` — today's literal,
+ * unchanged — never sourced from `useDensity()`. FUT-2769 aliased the theme's
+ * level to this density through `mapThemeToDataViewsDensity`, which — like
+ * `Table`'s own theme default — made a theme scale a DataViews table's row
+ * height twice: once by picking a DIFFERENT discrete density, and again
+ * through the `rem()` that density's own row height is drawn with. A theme
+ * density now scales a DataViews table's rows exactly ONCE, through `rem()`;
+ * the STORED per-viewer preference still wins over this default, unchanged
  * from today (below).
  */
-export function mapThemeToDataViewsDensity(level: DensityLevel): DataViewsDensity {
-  if (level === 'compact') return 'compact';
-  if (level === 'comfortable') return 'comfortable';
-  return 'cozy';
-}
+const DEFAULT_DENSITY: DataViewsDensity = 'cozy';
 
 /** The remembered density, or undefined (no window, no value, junk). */
 function readStoredDensity(): DataViewsDensity | undefined {
@@ -275,20 +272,16 @@ export function DataViewsLayoutProvider({
   children,
 }: LayoutProviderProps): React.JSX.Element {
   const availability = { canUseCards, canUseList, canUseBoard };
-  // Read once, outside the lazy initializer below: a hook cannot be called
-  // from inside one (FUT-2769 — the theme is only a fallback when nothing is
-  // stored, same precedence as before this ticket).
-  const themeDensity = useDensity();
   const [layout, setLayoutState] = useState<DataViewsLayout>(() =>
     pinLayout(
       viewLayout ?? (ignoreStoredLayout ? undefined : readStoredLayout()) ?? defaultLayout,
       availability,
     ),
   );
+  // `DEFAULT_DENSITY` ('cozy'), never the theme (FUT-2886 — see that
+  // constant's own doc comment): the stored per-viewer preference still wins.
   const [density, setDensityState] = useState<DataViewsDensity>(
-    () =>
-      (ignoreStoredLayout ? undefined : readStoredDensity()) ??
-      mapThemeToDataViewsDensity(themeDensity.level ?? "normal"),
+    () => (ignoreStoredLayout ? undefined : readStoredDensity()) ?? DEFAULT_DENSITY,
   );
   const [zoom, setZoom] = useState(DEFAULT_ZOOM);
   // A newly applied view carrying a layout switches to it (its reference-change

package/src/components/data-display/Table/Table.helpers.ts

@@ -3,7 +3,6 @@ import type { Theme } from '@mui/material/styles/index.js';
 import type React from 'react';
 
 import { rem } from '../../../tokens/relative';
-import type { DensityLevel } from '../../../tokens/density';
 
 import type { TableDensity, TableProps } from './Table.types';
 
@@ -15,16 +14,23 @@ import type { TableDensity, TableProps } from './Table.types';
 export const tableRowHeight = (rowHeight: number | undefined): number => rowHeight ?? 52;
 
 /**
- * `density`'s default (FUT-2769): the caller's own prop, else the theme's
- * level — `'normal'` for a theme with no density at all (`useDensity()`'s own
- * fallback) or an unnamed numeric one. `TableDensity` is a verbatim match for
- * the theme's `DensityLevel`, so no alias table is needed, unlike `DataGrid`'s
- * `mapThemeToGridDensity` or `DataViews`' `mapThemeToDataViewsDensity`.
+ * `density`'s default (FUT-2886, reverting FUT-2769's half of this): the
+ * caller's own `density` prop, else `'normal'` — never the theme's level.
+ *
+ * FUT-2769 defaulted this from `useDensity()`, which combined with
+ * `Table.styles.ts`'s own discrete per-density row-height table
+ * (`densityConfig.rowHeightPx`, already 36/52/68) to scale row height TWICE
+ * under a themed density: that table picked the discrete height for the
+ * theme's level, and the `rem()` it is drawn through then scaled it AGAIN by
+ * the same theme's `typography.fontSize` factor — a compact theme gave
+ * `36 * 0.9 = 32.4px` rows, not a clean `0.9×` of anything. A theme density
+ * now scales a table's rows exactly ONCE, through `rem()`: `density` alone
+ * picks the discrete row-height table, and the theme's factor is applied on
+ * top of THAT by `rem()`, giving `52 * 0.9` under a compact theme rather than
+ * a second discrete step.
  */
-export const resolveTableDensity = (
-  explicit: TableDensity | undefined,
-  themeLevel: DensityLevel | undefined,
-): TableDensity => explicit ?? themeLevel ?? 'normal';
+export const resolveTableDensity = (explicit: TableDensity | undefined): TableDensity =>
+  explicit ?? 'normal';
 
 /** The scroll box's height: a number is design px, 400 unless the caller says otherwise. */
 const scrollHeight = (theme: Theme, containerHeight: number | string | undefined): string => {
@@ -84,12 +90,13 @@ export const virtualHeight = (p: TableProps): number | undefined =>
     ? p.containerHeight
     : undefined;
 
-// `density` is NOT here (FUT-2769): `TableDensity` is a verbatim match for
-// the theme's `DensityLevel`, so `Table.tsx` resolves it itself —
-// `props.density ?? (useDensity().level ?? 'normal')` — reading the theme
-// requires a hook, which this module-level constant cannot call. At
-// `theme.density` unset, or its level `'normal'`, that reproduces this
-// object's OTHER defaults' shape exactly: today's literal `'normal'`.
+// `density` is NOT here (kept in `resolveTableDensity` instead, FUT-2886):
+// this object's OTHER defaults are read at the module level, before any
+// props exist, while `density`'s default is `explicit ?? 'normal'` — a
+// two-argument fallback that reads just as well next to `Table.tsx`'s own
+// assignment as it would spread from here. No theme read is involved any
+// more (FUT-2769's `useDensity()` default was reverted): a table's own
+// discrete density is always `'normal'` unless the caller says otherwise.
 export const TABLE_DEFAULTS: Partial<TableProps> = {
   variant: 'default',
   stripeColor: 'neutral',

package/src/components/data-display/Table/Table.md

@@ -178,6 +178,17 @@ const columns = [
 - **normal** - Standard padding (default)
 - **comfortable** - Extra padding for improved readability
 
+**A theme density scales a table once, through `rem()`.** With no `density`
+prop, the table's own discrete density stays `'normal'` no matter what the
+host theme's density is set to — it is NOT re-picked from the theme. The
+theme's density factor still applies, exactly the way it scales every other
+size on the page, so a compact theme still gives smaller rows (≈0.9× normal)
+and a comfortable one still gives taller ones (≈1.1× normal); it does so by
+scaling the `'normal'` row through `rem()`, not by swapping in a different
+discrete row-height table. Pass `density` explicitly (or let a viewer's stored
+DataViews preference apply it) for a deliberate, second, per-table choice on
+top of that.
+
 ## Accessibility
 
 - Proper `role="table"` attributes

package/src/components/data-display/Table/Table.tsx

@@ -35,7 +35,6 @@ import { EnhancedTableBody, EnhancedTableHeader } from './TableParts';
 import { EmptyRow, NoDataPlaceholder } from './TableStates';
 import { tableStyles } from './Table.styles';
 import { rem } from '../../../tokens/relative';
-import { useDensity } from '../../../tokens/density';
 
 // Helper function to get stripe color from theme
 const StyledTable = styled(MuiTable, {
@@ -330,9 +329,9 @@ const TableEmptyState: React.FC<{
 
 export const Table = React.forwardRef<globalThis.HTMLTableElement, TableProps>(
   (tableProps, ref) => {
-    const themeDensity = useDensity(); // FUT-2769 — density's default; see resolveTableDensity
     const resolved = { ...TABLE_DEFAULTS, ...definedProps(tableProps) } as TableProps;
-    resolved.density = resolveTableDensity(resolved.density, themeDensity.level);
+    // Never from the theme (FUT-2886) — see `resolveTableDensity`.
+    resolved.density = resolveTableDensity(resolved.density);
     const {
       columns,
       data,

package/src/components/data-display/Table/Table.types.ts

@@ -118,7 +118,10 @@ export interface TableProps extends Omit<MuiTableProps, 'variant'> {
   // Advanced Features
   
   /**
-   * The density of the table rows
+   * The density of the table rows. Defaults to `'normal'` — NOT the host
+   * theme's density: a theme density still scales row height, but only once,
+   * through `rem()` (`resolveTableDensity`, FUT-2886). Pass this explicitly
+   * for a deliberate, per-table density on top of that.
    */
   density?: TableDensity;
   

package/src/components/feedback/Dialog/Dialog.look.native.ts

@@ -120,6 +120,23 @@ function overlayFor(theme: UiTheme, variant: DialogVariant): ViewStyle {
   return centredOverlay(theme);
 }
 
+/**
+ * The overlay's bottom inset while the soft keyboard covers `overlap` dp of it
+ * (FUT-3021), or nothing while it covers none.
+ *
+ * The inset grows by exactly the overlap, on top of the margin the variant
+ * already keeps, so the space the paper may fill — its `maxHeight: '100%'`, or
+ * the `height: '100%'` of `fullscreen` and `drawer` — shrinks by the same
+ * amount and ends where the keyboard starts. A centred paper re-centres in what
+ * is left, and a body taller than that scrolls inside `DialogContent` with the
+ * actions still on screen.
+ */
+export function dialogKeyboardLift(theme: UiTheme, variant: DialogVariant, overlap: number): ViewStyle | null {
+  if (overlap <= 0) return null;
+  const margin = variant === 'fullscreen' || variant === 'drawer' ? 0 : theme.spacing(DIALOG_MARGIN_UNITS);
+  return { paddingBottom: margin + overlap };
+}
+
 /**
  * Everything the dialog paints, decided once per render.
  *

package/src/components/feedback/Dialog/Dialog.native.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Modal, Pressable, ScrollView, StyleSheet, View } from 'react-native';
 
 import { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';
-import { dialogBackdrop, dialogLook } from './Dialog.look.native';
+import { dialogBackdrop, dialogKeyboardLift, dialogLook } from './Dialog.look.native';
 import { DIALOG_BODY_PADDING_UNITS, DIALOG_PULSE } from './Dialog.metrics';
 import type { DialogProps } from './Dialog.types.native';
 import {
@@ -12,6 +12,7 @@ import {
   DialogTitledContext,
   dialogBodyTextStyle,
 } from './DialogParts.native';
+import { useKeyboardOverlap } from '../../../platform/keyboard-overlap.native';
 import { PulseRing } from '../../../platform/pulse-ring.native';
 import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import { renderTextChildren } from '../../../platform/text-children';
@@ -106,9 +107,18 @@ export function Dialog(rawProps: DialogProps): React.JSX.Element {
   // backdrop and Escape (which `Modal` routes through `onRequestClose`).
   const dismiss = persistent ? undefined : onClose;
 
+  // Edge-to-edge defeats the `SOFT_INPUT_ADJUST_RESIZE` that `Modal` asks for,
+  // so the window never shrinks for the keyboard and nothing else moves the
+  // paper: the overlay measures how much of it the keyboard covers and takes
+  // that off the paper's room itself (FUT-3021).
+  const keyboard = useKeyboardOverlap();
+
   return (
     <Modal visible={open} transparent onRequestClose={dismiss} {...modalProps}>
-      <View style={look.overlay}>
+      <View
+        style={[look.overlay, dialogKeyboardLift(theme, variant, keyboard.overlap)]}
+        onLayout={keyboard.onLayout}
+      >
         <Pressable
           aria-hidden
           tabIndex={-1}

package/src/components/navigation/SectionNav/SectionNav.md

@@ -20,7 +20,7 @@ action, the sheets, and the rail's sections.
 | `layout` | draws | menus |
 |---|---|---|
 | `bar` | a bottom row: the destinations, `more` last, `primary` raised in the middle | open as bottom sheets over the page, stopping above the bar |
-| `rail` | a vertical list: `back`, `heading`, the destinations, then each menu | listed under their `title`: nothing is folded on a wide screen |
+| `rail` | a vertical list: `back`, `heading`, a `primary` menu as one button, the destinations, then `more` | `primary` opens as a menu anchored to its button (named by `title`); `more` is listed under its `title` |
 
 Which layout to use is the HOST's call. A bar beside a sidebar is two
 navigations competing for one glance, and only the host knows what else is on
@@ -76,8 +76,9 @@ looks one tap apart.
   reports `aria-pressed="true"` (`false` when `active: false`). Only a link
   reports `aria-current="page"`; an action is not a page.
 - A menu entry, and a whole menu, can be `disabled` too. In the bar a disabled
-  menu's trigger is inert and opens no sheet; in the rail, where the menu is
-  listed rather than behind a trigger, every row of it is inert.
+  menu's trigger is inert and opens no sheet. In the rail a disabled `primary`
+  is a disabled button, and a disabled `more`, listed rather than behind a
+  trigger, has every row inert.
 - `dataTestId` on a destination, entry, action or menu replaces the id the nav
   would derive, for a host whose suites already drive their own.
 
@@ -124,4 +125,6 @@ icon turns 45° while open.
 
 `<prefix>-dest-<id>`, `<prefix>-primary`, `<prefix>-more`,
 `<prefix>-{primary,more}-sheet`, `<prefix>-{primary,more}-sheet-entry-<id>` (bar),
-`<prefix>-{primary,more}-entry-<id>` (rail), and `<prefix>-back`.
+`<prefix>-{primary,more}-entry-<id>` (rail; a `primary` entry exists once its
+menu is open), `<prefix>-primary-menu` (the rail's open `primary` menu), and
+`<prefix>-back`.

package/src/components/navigation/SectionNav/SectionNav.rail.tsx

@@ -16,6 +16,7 @@ import {
   destinationControl,
   focusRing,
 } from './SectionNav.parts';
+import { RailCreateMenu } from './SectionNav.railCreate';
 import type {
   SectionNavAction,
   SectionNavBack,
@@ -114,9 +115,10 @@ function RailHeading({ children }: { children: ReactNode }): React.JSX.Element {
 }
 
 /**
- * A menu's groups, listed under its title — nothing folded away on a wide
- * screen. A `disabled` menu has no trigger here to refuse, so every row of it
- * is inert instead.
+ * The `more` menu's groups, listed under its title — the rail has room for the
+ * places it holds. A `disabled` menu has no trigger here to refuse, so every
+ * row of it is inert instead. (`primary` folds behind one button instead —
+ * `RailCreateMenu`.)
  */
 function RailMenu({
   menu,
@@ -262,8 +264,9 @@ function RailDestination({
 }
 
 /**
- * The wide-screen layout: a vertical rail — the way back, the destinations,
- * then every menu's entries.
+ * The wide-screen layout: a vertical rail — the way back, the heading, a
+ * `primary` menu as one button that opens it (FUT-3015), the destinations, a
+ * `primary` action as a row, then `more` listed in full.
  *
  * It fills the column the host gives it and scrolls on its own, like the
  * sidebar it stands in for.
@@ -300,6 +303,9 @@ export function SectionNavRail({
     >
       {back ? <RailBack back={back} linkComponent={linkComponent} testId={`${dataTestId}-back`} /> : null}
       {heading ? <RailHeading>{heading}</RailHeading> : null}
+      {isMenu(primary) ? (
+        <RailCreateMenu menu={primary} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-primary`} />
+      ) : null}
       {destinations.map((destination) => (
         <RailDestination
           key={destination.id}
@@ -312,9 +318,6 @@ export function SectionNavRail({
       {primary && !isMenu(primary) ? (
         <RailAction action={primary} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-primary`} />
       ) : null}
-      {isMenu(primary) ? (
-        <RailMenu menu={primary} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-primary`} />
-      ) : null}
       {more ? <RailMenu menu={more} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-more`} /> : null}
     </Box>
   );