@marinoscar/platform-web 0.1.0-next.3 → 0.1.0-next.4

package/dist/shell/ui/ShellLayout.d.ts

@@ -0,0 +1,49 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { ShellNavigation } from '../headless/navigation.js';
+/**
+ * Props of {@link ShellLayout}: the app's navigation and branding, and the
+ * slots. Every slot has a default built from `navigation` and `brand`; an app
+ * that replaces one keeps the breakpoint gates, which stay here.
+ *
+ * @stability experimental
+ */
+export interface ShellLayoutProps {
+    /** The app's navigation. Required unless `appBar`, `rail` and `bottomNav` are all given. */
+    navigation?: ShellNavigation;
+    /** The brand for the default AppBar (the app's name or a logo). */
+    brand?: ReactNode;
+    /** The top bar. Default `<ShellAppBar navigation={navigation} brand={brand} />`. */
+    appBar?: ReactNode;
+    /** The rail, mounted at `sm` and up only. Default `<ShellNavigationRail navigation={navigation} />`. */
+    rail?: ReactNode;
+    /** The bottom bar, mounted below `sm` only. Default `<ShellBottomNav navigation={navigation} />`. */
+    bottomNav?: ReactNode;
+    /**
+     * Above the page, inside `<main>`: shell-wide banners (maintenance, an app
+     * update, notification permission). Each should render NOTHING on an
+     * ordinary day, so a pixel baseline never sees it.
+     */
+    banners?: ReactNode;
+    /** After the bottom bar: dialogs mounted once for the shell (a welcome dialog). */
+    overlays?: ReactNode;
+    /** The page. Default `<Outlet />` (the layout is a route element). */
+    children?: ReactNode;
+}
+/**
+ * The app shell: the AppBar, the rail OR the bottom bar, and `<main>`.
+ *
+ * @param props - see {@link ShellLayoutProps}.
+ * @returns the shell.
+ *
+ * @example
+ * ```tsx
+ * <Route element={<ShellLayout navigation={APP_NAVIGATION} brand={APP_NAME} />}>
+ *   <Route index element={<Home />} />
+ * </Route>
+ * ```
+ *
+ * @extensionPoint slot
+ * @stability experimental
+ */
+export declare function ShellLayout(props: ShellLayoutProps): ReactElement;
+//# sourceMappingURL=ShellLayout.d.ts.map

package/dist/shell/ui/ShellLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellLayout.d.ts","sourceRoot":"","sources":["../../../src/shell/ui/ShellLayout.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAKjE;;;;;;GAMG;AACH,MAAM,WAAW,gBAAgB;IAC/B,4FAA4F;IAC5F,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oFAAoF;IACpF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qGAAqG;IACrG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AASD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CA2EjE"}

package/dist/shell/ui/ShellLayout.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// =============================================================================
+// The app shell (issue #868; moved from the reference app's
+// `components/common/Layout.tsx`, issues #55, #90, #258, #365, #745, #746)
+// =============================================================================
+//
+// Two navigation treatments, one per size class:
+//
+//   compact (< sm)  ->  the bottom bar only. No drawer, no hamburger, and so no
+//                       drawer state to manage.
+//   medium  (sm-lg) ->  a permanent collapsed rail (56px).
+//   expanded (>= lg)->  the same rail, expanded to 220px.
+//
+// The chrome is chosen by MOUNTING, not by rendering-then-hiding: exactly one
+// navigation surface exists in the tree at any width, so a resize across `sm`
+// swaps it rather than briefly showing two.
+// =============================================================================
+import { Box, useMediaQuery, useTheme } from '@mui/material';
+import { Outlet } from 'react-router-dom';
+import { ShellAppBar } from './ShellAppBar.js';
+import { ShellBottomNav } from './ShellBottomNav.js';
+import { ShellNavigationRail } from './ShellNavigationRail.js';
+function required(navigation, slot) {
+    if (navigation === undefined) {
+        throw new Error(`ShellLayout: pass \`navigation\`, or the \`${slot}\` slot (its default needs the navigation).`);
+    }
+    return navigation;
+}
+/**
+ * The app shell: the AppBar, the rail OR the bottom bar, and `<main>`.
+ *
+ * @param props - see {@link ShellLayoutProps}.
+ * @returns the shell.
+ *
+ * @example
+ * ```tsx
+ * <Route element={<ShellLayout navigation={APP_NAVIGATION} brand={APP_NAME} />}>
+ *   <Route index element={<Home />} />
+ * </Route>
+ * ```
+ *
+ * @extensionPoint slot
+ * @stability experimental
+ */
+export function ShellLayout(props) {
+    const theme = useTheme();
+    // 600px, NOT 900px. This is Material 3's compact/medium window-class
+    // boundary (compact < 600dp, medium 600-840dp), and M3 is explicit that a
+    // rail is the correct chrome from medium upward. Gating at MUI's `md`
+    // (900px) would hand the PHONE treatment to every 600-899px device: tablets
+    // in portrait, foldables unfolded, phones in landscape.
+    //
+    // ⚠️ FIVE GATES ARE COUPLED AND MUST MOVE TOGETHER. Moving the rail alone
+    // renders two navigation surfaces, or none, in the gap:
+    //   1. this `showRail`                     - the rail itself
+    //   2. `ShellBottomNav`'s `down('sm')`     - the EXACT complement
+    //   3. `<main>`'s `pb` below               - clears the fixed bottom bar, and
+    //                                            so is only needed where it exists
+    //   4. `SettingsHub`'s `isCompactWindow`   - drill-down list below it, card
+    //      (`settings/ui/SettingsHub.tsx`)       grid at and above it
+    //   5. `ShellAppBar`'s `isCompactWindow`   - back arrow + resolved page title
+    //                                            on a settings route
+    // (4) and (5) are coupled to EACH OTHER as tightly as (1)-(3) are: the hub is
+    // the page body and the AppBar is the header directly above it. They are
+    // tied to (1)-(3) as well, because "there is no rail here" is exactly what
+    // makes the hub itself the navigation below `sm`.
+    //
+    // This comment is the invariant's only enforcement; there is deliberately no
+    // shared constant, because a constant would let (3) drift while still
+    // compiling (docs/specs/settings-ui.md, "Breakpoint gates"). If you change
+    // one number here, change all five.
+    const showRail = useMediaQuery(theme.breakpoints.up('sm'));
+    const appBar = props.appBar ?? _jsx(ShellAppBar, { navigation: required(props.navigation, 'appBar'), brand: props.brand });
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            // The shell is the ONLY owner of viewport height: pages must not nest
+            // their own 100vh inside it. `100dvh` tracks mobile browser chrome;
+            // `100vh` is the fallback.
+            minHeight: '100vh',
+            '@supports (min-height: 100dvh)': { minHeight: '100dvh' },
+            backgroundColor: theme.palette.background.default,
+        }, children: [appBar, _jsxs(Box, { sx: { display: 'flex', flexGrow: 1, minWidth: 0 }, children: [showRail && (props.rail ?? _jsx(ShellNavigationRail, { navigation: required(props.navigation, 'rail') })), _jsxs(Box, { component: "main", sx: {
+                            flexGrow: 1,
+                            // Load-bearing: a flex item's `min-width` defaults to its
+                            // min-content width, so without this a wide table widens the
+                            // whole shell past the viewport.
+                            minWidth: 0,
+                            p: 3,
+                            // Clears the fixed bottom bar, which only exists below `sm`: the
+                            // same breakpoint the bottom bar gates on (gate 3).
+                            pb: { xs: 10, sm: 3 },
+                        }, children: [props.banners, props.children ?? _jsx(Outlet, {})] })] }), !showRail && (props.bottomNav ?? _jsx(ShellBottomNav, { navigation: required(props.navigation, 'bottomNav') })), props.overlays] }));
+}
+//# sourceMappingURL=ShellLayout.js.map

package/dist/shell/ui/ShellLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellLayout.js","sourceRoot":"","sources":["../../../src/shell/ui/ShellLayout.tsx"],"names":[],"mappings":"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"}

package/dist/shell/ui/ShellNavigationRail.d.ts

@@ -0,0 +1,34 @@
+import type { ReactElement } from 'react';
+import type { ShellNavigation } from '../headless/navigation.js';
+/**
+ * The collapsed rail's width in px (the medium tier, and a collapsed desktop rail).
+ *
+ * @stability experimental
+ */
+export declare const RAIL_WIDTH_COLLAPSED = 56;
+/**
+ * The expanded rail's width in px (desktop, at `lg` and up).
+ *
+ * @stability experimental
+ */
+export declare const RAIL_WIDTH_EXPANDED = 220;
+/**
+ * Props of {@link ShellNavigationRail}.
+ *
+ * @stability experimental
+ */
+export interface ShellNavigationRailProps {
+    /** The app's navigation: destinations, ownership, the Console, the collapse preference. */
+    navigation: ShellNavigation;
+}
+/**
+ * The navigation rail. `ShellLayout` mounts it at `sm` and up only (gate 1).
+ *
+ * @param props - see {@link ShellNavigationRailProps}.
+ * @returns the rail.
+ *
+ * @extensionPoint component
+ * @stability experimental
+ */
+export declare function ShellNavigationRail({ navigation }: ShellNavigationRailProps): ReactElement;
+//# sourceMappingURL=ShellNavigationRail.d.ts.map

package/dist/shell/ui/ShellNavigationRail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellNavigationRail.d.ts","sourceRoot":"","sources":["../../../src/shell/ui/ShellNavigationRail.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AA+B1C,OAAO,KAAK,EAA+B,eAAe,EAAuB,MAAM,2BAA2B,CAAC;AAInH;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAiHvC;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACvC,2FAA2F;IAC3F,UAAU,EAAE,eAAe,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,EAAE,wBAAwB,GAAG,YAAY,CAyP1F"}

package/dist/shell/ui/ShellNavigationRail.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// =============================================================================
+// The navigation rail (issue #868; moved from the reference app's
+// `components/navigation/NavigationRail.tsx`, issues #55, #94, #105)
+// =============================================================================
+//
+// Tablet and desktop chrome for the app's destinations, always visible, so
+// navigating costs zero taps.
+//
+//   medium  (sm-lg)  ->  collapsed, 56px, icon over a short caption
+//   expanded (>= lg) ->  220px, labelled rows + a collapse toggle
+//
+// Pinned destinations (the Console) sit at the foot, below a divider. A
+// desktop user may collapse the rail (the `navigation` user setting); the
+// medium tier is ALWAYS collapsed, or a stale preference would spend a third
+// of a 600px screen on chrome.
+//
+// CONSOLE MODE: on a route under `navigation.console.prefix`, the EXPANDED
+// rail swaps its contents for the visible cards of the console's registry,
+// with a permanent "back" row at the top. Collapsed, it stays the library
+// rail: 56px cannot hold a dozen card titles.
+// =============================================================================
+import { Fragment, useMemo } from 'react';
+import { Box, Divider, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, Tooltip, Typography, useMediaQuery, useTheme, } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { Link as RouterLink, useLocation } from 'react-router-dom';
+import { usePermissions } from '../../identity/index.js';
+import { useSettingsFeatures, visibleSettingsSections } from '../../settings/index.js';
+import { groupDestinationRuns, isDestinationVisible, owns, resolveActiveDestination, shellDestinationRoutes, } from '../headless/navigation.js';
+import { useShellRailPreference } from '../headless/rail-preference.js';
+import { DestinationIcon, EXTERNAL_LINK_PROPS, destinationAccessibleName, useDestinationBadge } from './destination-parts.js';
+/**
+ * The collapsed rail's width in px (the medium tier, and a collapsed desktop rail).
+ *
+ * @stability experimental
+ */
+export const RAIL_WIDTH_COLLAPSED = 56;
+/**
+ * The expanded rail's width in px (desktop, at `lg` and up).
+ *
+ * @stability experimental
+ */
+export const RAIL_WIDTH_EXPANDED = 220;
+/**
+ * The sticky AppBar's height: the rail sticks below it and fills the rest of
+ * the viewport, so its own list scrolls instead of the page.
+ */
+const APPBAR_HEIGHT = 64;
+const DEFAULT_CONSOLE_BACK = { label: 'Back to library', path: '/' };
+/** A destination with nothing to evaluate, for the rows that draw no destination. */
+const NO_DESTINATION = {};
+function RailRow({ to, Icon, label, compactLabel, accessibleName, active, expanded, destination }) {
+    const theme = useTheme();
+    const badge = useDestinationBadge(destination ?? NO_DESTINATION);
+    const external = destination?.external === true;
+    const onClick = destination?.onClick;
+    const button = (_jsxs(ListItemButton, { ...(external ? { component: 'a', href: to, ...EXTERNAL_LINK_PROPS } : { component: RouterLink, to }), selected: active, "aria-current": active ? 'page' : undefined, "aria-label": destinationAccessibleName(accessibleName, badge, external), ...(onClick ? { onClick } : {}), sx: {
+            borderRadius: 1,
+            mx: 0.5,
+            minWidth: 0,
+            // Collapsed: icon over caption, centred, with the side padding cut so
+            // the 56px rail leaves a 48px target.
+            ...(expanded
+                ? { py: 0.75 }
+                : {
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 0.25,
+                    mx: 0.25,
+                    px: 0.25,
+                    py: 0.75,
+                }),
+            '&.Mui-focusVisible': {
+                outline: `2px solid ${theme.palette.primary.main}`,
+                outlineOffset: -2,
+            },
+        }, children: [_jsx(ListItemIcon, { sx: {
+                    color: active ? theme.palette.primary.main : theme.palette.text.secondary,
+                    minWidth: expanded ? 40 : 'auto',
+                    justifyContent: 'center',
+                }, children: badge ? (_jsx(DestinationIcon, { Icon: Icon, badge: badge, fontSize: expanded ? 'medium' : 'small' })) : (_jsx(Icon, { fontSize: expanded ? 'medium' : 'small' })) }), expanded ? (_jsxs(_Fragment, { children: [_jsx(ListItemText, { primary: label, slotProps: { primary: { variant: 'body2', noWrap: true } }, sx: { minWidth: 0, my: 0 } }), external && _jsx(OpenInNewIcon, { "aria-hidden": true, fontSize: "inherit", sx: { ml: 0.5, color: theme.palette.text.secondary } })] })) : (_jsx(Typography, { "aria-hidden": true, variant: "caption", noWrap: true, sx: {
+                    fontSize: '0.625rem',
+                    lineHeight: 1.2,
+                    maxWidth: '100%',
+                    color: active ? theme.palette.primary.main : theme.palette.text.secondary,
+                }, children: compactLabel ?? label }))] }));
+    return (_jsx(ListItem, { disablePadding: true, sx: { minWidth: 0 }, children: expanded ? button : _jsx(Tooltip, { title: label, placement: "right", children: button }) }));
+}
+/**
+ * The navigation rail. `ShellLayout` mounts it at `sm` and up only (gate 1).
+ *
+ * @param props - see {@link ShellNavigationRailProps}.
+ * @returns the rail.
+ *
+ * @extensionPoint component
+ * @stability experimental
+ */
+export function ShellNavigationRail({ navigation }) {
+    const theme = useTheme();
+    const { pathname } = useLocation();
+    const { hasPermission } = usePermissions();
+    const useRailPreference = navigation.useRailPreference ?? useShellRailPreference;
+    const { railCollapsed, toggleRailCollapsed } = useRailPreference();
+    // `lg`, not a settings-UI gate: this is the rail's own medium/expanded split.
+    const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
+    // The medium tier ignores the preference entirely (see the file header).
+    const expanded = isDesktop && !railCollapsed;
+    const consoleConfig = navigation.console;
+    const isConsole = consoleConfig !== undefined && owns(consoleConfig.prefix, pathname);
+    // Console mode needs the expanded rail; collapsed, the library rail shows.
+    const consoleMode = isConsole && expanded;
+    const activeDestination = resolveActiveDestination(shellDestinationRoutes(navigation), pathname);
+    const features = useSettingsFeatures();
+    const visibleDestinations = navigation.destinations.filter((destination) => isDestinationVisible(destination, hasPermission, features));
+    // Pinned destinations leave the list for the foot; the rest keep order.
+    const listDestinations = visibleDestinations.filter((destination) => !destination.pinned);
+    const pinnedDestinations = visibleDestinations.filter((destination) => destination.pinned);
+    const destinationRuns = groupDestinationRuns(listDestinations);
+    // The same filter the hub applies (permission AND feature), so the rail
+    // never lists a card the hub would hide. Empty query: no search here.
+    const consoleSections = useMemo(() => (consoleMode && consoleConfig ? visibleSettingsSections(consoleConfig.sections, hasPermission, '', features) : []), [consoleMode, consoleConfig, hasPermission, features]);
+    // The longest card path owning the pathname is the active row, so a nested
+    // card (`/admin/settings/jobs/insights`) beats its parent.
+    const consoleActivePath = useMemo(() => {
+        if (!consoleMode)
+            return null;
+        return consoleSections
+            .flatMap((section) => section.cards)
+            .reduce((best, card) => {
+            if (!card.path || card.disabled)
+                return best;
+            if (!owns(card.path, pathname))
+                return best;
+            return best === null || card.path.length > best.length ? card.path : best;
+        }, null);
+    }, [consoleMode, consoleSections, pathname]);
+    const consoleBack = consoleConfig?.back ?? DEFAULT_CONSOLE_BACK;
+    const subheaderSx = {
+        fontSize: '0.65rem',
+        fontWeight: 700,
+        letterSpacing: '0.08em',
+        textTransform: 'uppercase',
+        color: theme.palette.text.disabled,
+        lineHeight: '2rem',
+        backgroundColor: 'transparent',
+    };
+    return (_jsxs(Box, { component: "nav", "aria-label": consoleMode ? 'Console navigation' : 'Main navigation', sx: {
+            width: expanded ? RAIL_WIDTH_EXPANDED : RAIL_WIDTH_COLLAPSED,
+            flexShrink: 0,
+            minWidth: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: theme.palette.background.paper,
+            borderRight: `1px solid ${theme.palette.divider}`,
+            position: 'sticky',
+            top: APPBAR_HEIGHT,
+            alignSelf: 'flex-start',
+            height: `calc(100vh - ${APPBAR_HEIGHT}px)`,
+            '@supports (height: 100dvh)': {
+                height: `calc(100dvh - ${APPBAR_HEIGHT}px)`,
+            },
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            transition: theme.transitions.create('width', {
+                duration: theme.transitions.duration.shorter,
+            }),
+            '@media (prefers-reduced-motion: reduce)': {
+                transition: 'none',
+            },
+        }, children: [consoleMode ? (_jsxs(Box, { sx: { flexGrow: 1, py: 1, minWidth: 0 }, children: [_jsx(List, { dense: true, disablePadding: true, children: _jsx(RailRow, { to: consoleBack.path, Icon: ArrowBackIcon, label: consoleBack.label, accessibleName: consoleBack.label, active: false, expanded: true }) }), _jsx(Divider, { sx: { my: 1 } }), consoleSections.map((section) => (_jsx(List, { dense: true, disablePadding: true, subheader: _jsx(ListSubheader, { disableSticky: true, sx: subheaderSx, children: section.label }), children: section.cards.map((card) => !card.path || card.disabled ? null : (_jsx(RailRow, { to: card.path, Icon: card.Icon, label: card.title, accessibleName: card.title, active: card.path === consoleActivePath, expanded: true }, card.path))) }, section.label)))] })) : (_jsx(Box, { sx: { flexGrow: 1, py: 1, minWidth: 0 }, children: destinationRuns.length === 1 && destinationRuns[0]?.group === undefined ? (_jsx(List, { dense: true, disablePadding: true, children: listDestinations.map((destination) => (_jsx(RailRow, { to: destination.path, Icon: destination.Icon, label: destination.label, compactLabel: destination.compactLabel, accessibleName: destination.label, active: activeDestination === destination.key, expanded: expanded, destination: destination }, destination.key))) })) : (
+                /* PP-14.25: destinations that declare a `group` are drawn as labelled
+                   runs (the expanded rail) or runs apart by a divider (collapsed). */
+                destinationRuns.map((run, index) => (_jsxs(Fragment, { children: [index > 0 && !expanded && _jsx(Divider, { sx: { my: 0.5 } }), _jsx(List, { dense: true, disablePadding: true, ...(run.group !== undefined
+                                ? {
+                                    'aria-label': run.group,
+                                    ...(expanded
+                                        ? { subheader: _jsx(ListSubheader, { disableSticky: true, sx: subheaderSx, children: run.group }) }
+                                        : {}),
+                                }
+                                : {}), children: run.destinations.map((destination) => (_jsx(RailRow, { to: destination.path, Icon: destination.Icon, label: destination.label, compactLabel: destination.compactLabel, accessibleName: destination.label, active: activeDestination === destination.key, expanded: expanded, destination: destination }, destination.key))) })] }, `${index}:${run.group ?? ''}`)))) })), !consoleMode && pinnedDestinations.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(List, { dense: true, disablePadding: true, sx: { py: 0.5 }, children: pinnedDestinations.map((destination) => (_jsx(RailRow, { to: destination.path, Icon: destination.Icon, label: destination.label, compactLabel: destination.compactLabel, accessibleName: destination.label, active: activeDestination === destination.key, expanded: expanded, destination: destination }, destination.key))) })] })), isDesktop && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Box, { sx: {
+                            display: 'flex',
+                            justifyContent: expanded ? 'flex-end' : 'center',
+                            px: 0.5,
+                            py: 0.5,
+                        }, children: _jsx(IconButton, { size: "small", onClick: toggleRailCollapsed, "aria-expanded": expanded, "aria-label": expanded ? 'Collapse navigation' : 'Expand navigation', sx: {
+                                '&.Mui-focusVisible': {
+                                    outline: `2px solid ${theme.palette.primary.main}`,
+                                    outlineOffset: -2,
+                                },
+                            }, children: expanded ? _jsx(ChevronLeftIcon, { fontSize: "small" }) : _jsx(ChevronRightIcon, { fontSize: "small" }) }) })] }))] }));
+}
+//# sourceMappingURL=ShellNavigationRail.js.map

package/dist/shell/ui/ShellNavigationRail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellNavigationRail.js","sourceRoot":"","sources":["../../../src/shell/ui/ShellNavigationRail.tsx"],"names":[],"mappings":"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"}

package/dist/shell/ui/ShellThemeProvider.d.ts

@@ -0,0 +1,64 @@
+import type { Theme } from '@mui/material/styles';
+import type { ReactElement, ReactNode } from 'react';
+/**
+ * The app's themes: light and dark, and any number of further modes by id.
+ *
+ * The extra keys are theme MODES the viewer can choose (`setMode('high-contrast')`);
+ * they are added to the ones registered with `registerThemeMode`, and a key here
+ * wins over a registered mode of the same id. `light`, `dark` and `system` are
+ * reserved: `system` has no entry because it picks `light` or `dark`.
+ *
+ * @stability experimental
+ */
+export interface ShellThemes {
+    /** Shown for `light`, and for `system` when the OS prefers light. */
+    light: Theme;
+    /** Shown for `dark`, and for `system` when the OS prefers dark. */
+    dark: Theme;
+    /** Further modes by id. */
+    [mode: string]: Theme;
+}
+/**
+ * Props of {@link ShellThemeProvider}.
+ *
+ * @stability experimental
+ */
+export interface ShellThemeProviderProps {
+    /** The two themes (`createShellTheme('light' | 'dark', ...)`); keep them module constants. */
+    themes: ShellThemes;
+    /** Where the choice is kept in `localStorage`. Default `'theme_mode'`. */
+    storageKey?: string;
+    /** The app. */
+    children: ReactNode;
+}
+/**
+ * Holds the viewer's theme choice (default `system`, persisted in
+ * `localStorage`) and resolves it to one of `themes`. Read it with
+ * `useShellTheme()`; it renders no MUI `ThemeProvider` itself (see
+ * {@link ShellRoot} for both).
+ *
+ * @param props - see {@link ShellThemeProviderProps}.
+ * @returns the provider element.
+ *
+ * @extensionPoint component
+ * @stability experimental
+ */
+export declare function ShellThemeProvider({ themes, storageKey, children }: ShellThemeProviderProps): ReactElement;
+/**
+ * The shell's root: {@link ShellThemeProvider} plus MUI's `ThemeProvider` and
+ * `CssBaseline` for the resolved theme. Mount it once, around the router.
+ *
+ * @param props - see {@link ShellThemeProviderProps}.
+ * @returns the root element.
+ *
+ * @example
+ * ```tsx
+ * <ShellRoot themes={{ light: lightTheme, dark: darkTheme }}>
+ *   <BrowserRouter><App /></BrowserRouter>
+ * </ShellRoot>
+ * ```
+ *
+ * @stability experimental
+ */
+export declare function ShellRoot(props: ShellThemeProviderProps): ReactElement;
+//# sourceMappingURL=ShellThemeProvider.d.ts.map

package/dist/shell/ui/ShellThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/shell/ui/ShellThemeProvider.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBrD;;;;;;;;;GASG;AACH,MAAM,WAAW,WAAW;IAC1B,qEAAqE;IACrE,KAAK,EAAE,KAAK,CAAC;IACb,mEAAmE;IACnE,IAAI,EAAE,KAAK,CAAC;IACZ,2BAA2B;IAC3B,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC;CACvB;AAED;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACtC,8FAA8F;IAC9F,MAAM,EAAE,WAAW,CAAC;IACpB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,UAAgC,EAAE,QAAQ,EAAE,EAAE,uBAAuB,GAAG,YAAY,CAmDhI;AAaD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,CAOtE"}

package/dist/shell/ui/ShellThemeProvider.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The shell's theme context (issue #868; moved from the reference app's
+// `contexts/ThemeContext.tsx`): the viewer's light / dark / system choice,
+// persisted in this browser, resolved against `prefers-color-scheme`.
+import { useMediaQuery } from '@mui/material';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider } from '@mui/material/styles';
+import { useCallback, useMemo, useState } from 'react';
+import { ShellThemeContext, isBuiltinThemeMode, listThemeModes, useShellTheme } from '../headless/theme.js';
+/** The `localStorage` key the reference app has always used. */
+const DEFAULT_STORAGE_KEY = 'theme_mode';
+/** `mode` when it is built in or names a theme in `extra`, else `system`. */
+function readStoredMode(storageKey, extra) {
+    try {
+        const saved = localStorage.getItem(storageKey);
+        if (saved !== null && (isBuiltinThemeMode(saved) || Object.prototype.hasOwnProperty.call(extra, saved)))
+            return saved;
+    }
+    catch {
+        // Storage blocked (a private window): fall through to the default.
+    }
+    return 'system';
+}
+/**
+ * Holds the viewer's theme choice (default `system`, persisted in
+ * `localStorage`) and resolves it to one of `themes`. Read it with
+ * `useShellTheme()`; it renders no MUI `ThemeProvider` itself (see
+ * {@link ShellRoot} for both).
+ *
+ * @param props - see {@link ShellThemeProviderProps}.
+ * @returns the provider element.
+ *
+ * @extensionPoint component
+ * @stability experimental
+ */
+export function ShellThemeProvider({ themes, storageKey = DEFAULT_STORAGE_KEY, children }) {
+    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+    // The modes beyond light and dark: the registered ones, then the provider's own
+    // (which win). Registered at module scope, so the registry is complete by the first render.
+    const extraThemes = useMemo(() => {
+        const extra = Object.create(null);
+        const labels = new Map();
+        for (const registered of listThemeModes()) {
+            extra[registered.id] = registered.theme;
+            labels.set(registered.id, registered.label);
+        }
+        for (const [id, extraTheme] of Object.entries(themes)) {
+            if (id === 'light' || id === 'dark' || isBuiltinThemeMode(id))
+                continue;
+            extra[id] = extraTheme;
+            if (!labels.has(id))
+                labels.set(id, id);
+        }
+        return { themes: extra, modes: [...labels].map(([id, label]) => ({ id, label })) };
+    }, [themes]);
+    const [mode, setModeState] = useState(() => readStoredMode(storageKey, extraThemes.themes));
+    const setMode = useCallback((next) => {
+        // Only a built-in mode or a known theme can be chosen; anything else (a stored
+        // preference for a theme this app does not ship) leaves the choice alone.
+        if (!isBuiltinThemeMode(next) && !Object.prototype.hasOwnProperty.call(extraThemes.themes, next))
+            return;
+        setModeState(next);
+        try {
+            localStorage.setItem(storageKey, next);
+        }
+        catch {
+            // Storage blocked: the choice lasts for this page only.
+        }
+    }, [storageKey, extraThemes]);
+    const custom = isBuiltinThemeMode(mode) ? undefined : extraThemes.themes[mode];
+    // `system` follows the OS; so does a mode whose theme is no longer known.
+    // A custom theme counts as dark by its own palette.
+    const isDarkMode = custom ? custom.palette.mode === 'dark' : mode === 'dark' || (mode !== 'light' && prefersDarkMode);
+    const resolved = custom ?? (isDarkMode ? themes.dark : themes.light);
+    const toggleMode = useCallback(() => setMode(isDarkMode ? 'light' : 'dark'), [isDarkMode, setMode]);
+    const modes = extraThemes.modes;
+    const value = useMemo(() => ({ mode, theme: resolved, setMode, toggleMode, isDarkMode, modes }), [mode, resolved, setMode, toggleMode, isDarkMode, modes]);
+    return _jsx(ShellThemeContext.Provider, { value: value, children: children });
+}
+/** Applies the theme in context. */
+function ShellMuiTheme({ children }) {
+    const { theme } = useShellTheme();
+    return (_jsxs(ThemeProvider, { theme: theme, children: [_jsx(CssBaseline, {}), children] }));
+}
+/**
+ * The shell's root: {@link ShellThemeProvider} plus MUI's `ThemeProvider` and
+ * `CssBaseline` for the resolved theme. Mount it once, around the router.
+ *
+ * @param props - see {@link ShellThemeProviderProps}.
+ * @returns the root element.
+ *
+ * @example
+ * ```tsx
+ * <ShellRoot themes={{ light: lightTheme, dark: darkTheme }}>
+ *   <BrowserRouter><App /></BrowserRouter>
+ * </ShellRoot>
+ * ```
+ *
+ * @stability experimental
+ */
+export function ShellRoot(props) {
+    const { children, ...rest } = props;
+    return (_jsx(ShellThemeProvider, { ...rest, children: _jsx(ShellMuiTheme, { children: children }) }));
+}
+//# sourceMappingURL=ShellThemeProvider.js.map

package/dist/shell/ui/ShellThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellThemeProvider.js","sourceRoot":"","sources":["../../../src/shell/ui/ShellThemeProvider.tsx"],"names":[],"mappings":"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"}

package/dist/shell/ui/ShellUserMenu.d.ts

@@ -0,0 +1,36 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { ShellNavigation } from '../headless/navigation.js';
+/**
+ * Props of {@link ShellUserMenu}.
+ *
+ * @stability experimental
+ */
+export interface ShellUserMenuProps {
+    /** The app's navigation: its destinations (except home) are the menu's rows. */
+    navigation: ShellNavigation;
+    /**
+     * Extra rows after the destinations (the onboarding slice's
+     * `GettingStartedMenuItem`). Given `close`, to close the menu after acting.
+     */
+    items?: (close: () => void) => ReactNode;
+    /**
+     * Below sign-out and a divider, inside the menu (closed by default, so a
+     * pixel baseline never captures it): a version line, a legal link. A label
+     * should not be a `MenuItem` (not focusable, not announced as an action);
+     * stop its click from bubbling if selecting its text must not close the menu.
+     */
+    footer?: ReactNode;
+    /** The sign-out row's label. Default `'Logout'`. */
+    logoutLabel?: string;
+}
+/**
+ * The avatar button and the user menu. Renders nothing without a signed-in user.
+ *
+ * @param props - see {@link ShellUserMenuProps}.
+ * @returns the button and menu, or `null`.
+ *
+ * @extensionPoint slot
+ * @stability experimental
+ */
+export declare function ShellUserMenu({ navigation, items, footer, logoutLabel }: ShellUserMenuProps): ReactElement | null;
+//# sourceMappingURL=ShellUserMenu.d.ts.map

package/dist/shell/ui/ShellUserMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellUserMenu.d.ts","sourceRoot":"","sources":["../../../src/shell/ui/ShellUserMenu.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAc,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMjE,OAAO,KAAK,EAAoB,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGnF;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,gFAAgF;IAChF,UAAU,EAAE,eAAe,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IACzC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAuBD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,WAAsB,EAAE,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,CAwG5H"}