@marinoscar/platform-web 0.0.0-stage → 0.1.0-next.11

package/dist/shell/testing/shell-local-host.suite.js.map

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

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

@@ -0,0 +1,58 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { SettingsFeatures } from '../../settings/index.js';
+import type { ShellNavigation, ShellSettingsSurface } from '../headless/navigation.js';
+interface DrillDown {
+    /** The resolved page title: a card's title, or the surface's hub title. */
+    title: string;
+    /** Where the back button goes. */
+    upPath: string;
+}
+/**
+ * Resolve a pathname to the compact bar's title and its UP destination, or
+ * `null` when the path is on no settings surface.
+ *
+ * UP ONE LEVEL, NEVER `navigate(-1)`: history-relative back diverges the
+ * moment the user arrived any other way (a deep link, a redirect, an OAuth
+ * callback), and then "back" silently means "leave the app". The hub's own
+ * parent is the home path.
+ *
+ * No permission gate (the route guard denies an unpermitted page; naming the
+ * page the user is looking at leaks nothing), but the FEATURE gate applies: a
+ * card whose feature is off does not exist in this deployment.
+ */
+export declare function resolveDrillDown(surfaces: readonly ShellSettingsSurface[], pathname: string, features: SettingsFeatures, homePath?: string): DrillDown | null;
+/**
+ * Props of {@link ShellAppBar}: the navigation and the slots.
+ *
+ * @stability experimental
+ */
+export interface ShellAppBarProps {
+    /** The app's navigation (its settings surfaces drive the drill-down; its destinations the default user menu). */
+    navigation: ShellNavigation;
+    /** The brand: the app's name or a logo. Clicking it goes home. */
+    brand: ReactNode;
+    /**
+     * Actions in BOTH treatments, before the theme toggle (the notification
+     * bell: on a settings screen it is still the only way into the centre).
+     */
+    actions?: ReactNode;
+    /**
+     * Actions outside the drill-down only, after the theme toggle (an
+     * organization switcher). The drill-down is sized for three icon buttons.
+     */
+    wideActions?: ReactNode;
+    /** The user menu. Default `<ShellUserMenu navigation={navigation} />`. */
+    userMenu?: ReactNode;
+}
+/**
+ * The top bar. Gate 5 of the five coupled breakpoint gates.
+ *
+ * @param props - see {@link ShellAppBarProps}.
+ * @returns the bar.
+ *
+ * @extensionPoint slot
+ * @stability experimental
+ */
+export declare function ShellAppBar({ navigation, brand, actions, wideActions, userMenu }: ShellAppBarProps): ReactElement;
+export {};
+//# sourceMappingURL=ShellAppBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShellAppBar.d.ts","sourceRoot":"","sources":["../../../src/shell/ui/ShellAppBar.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAIvF,UAAU,SAAS;IACjB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,SAAS,oBAAoB,EAAE,EACzC,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,QAAQ,SAAM,GACb,SAAS,GAAG,IAAI,CAQlB;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC/B,iHAAiH;IACjH,UAAU,EAAE,eAAe,CAAC;IAC5B,kEAAkE;IAClE,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,gBAAgB,GAAG,YAAY,CA6FjH"}

package/dist/shell/ui/ShellAppBar.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// =============================================================================
+// The top bar (issue #868; moved from the reference app's
+// `components/navigation/AppBar.tsx`, issues #55, #95, #127, #425, #726)
+// =============================================================================
+//
+// Two treatments, chosen by window class AND route. Below `sm` on a settings
+// route the brand is replaced by a back arrow and the resolved page title (the
+// DRILL-DOWN); everywhere else the brand, the actions, the theme toggle and
+// the user menu. The app fills the slots: `brand`, `actions` (both
+// treatments: the notification bell), `wideActions` (dropped in the
+// drill-down: an organization switcher) and `userMenu`.
+// =============================================================================
+import { AppBar as MuiAppBar, Box, IconButton, Toolbar, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { ArrowBack as ArrowBackIcon, Brightness4 as DarkModeIcon, Brightness7 as LightModeIcon } from '@mui/icons-material';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { settingsPageTitle, useSettingsFeatures } from '../../settings/index.js';
+import { useOptionalShellTheme } from '../headless/theme.js';
+import { ShellUserMenu } from './ShellUserMenu.js';
+/**
+ * Resolve a pathname to the compact bar's title and its UP destination, or
+ * `null` when the path is on no settings surface.
+ *
+ * UP ONE LEVEL, NEVER `navigate(-1)`: history-relative back diverges the
+ * moment the user arrived any other way (a deep link, a redirect, an OAuth
+ * callback), and then "back" silently means "leave the app". The hub's own
+ * parent is the home path.
+ *
+ * No permission gate (the route guard denies an unpermitted page; naming the
+ * page the user is looking at leaks nothing), but the FEATURE gate applies: a
+ * card whose feature is off does not exist in this deployment.
+ */
+export function resolveDrillDown(surfaces, pathname, features, homePath = '/') {
+    for (const surface of surfaces) {
+        const title = settingsPageTitle(surface.sections, surface.hubPath, surface.hubTitle, pathname, features);
+        // `null` means "not this surface", a different answer from the hub's own title.
+        if (title === null)
+            continue;
+        return { title, upPath: pathname === surface.hubPath ? homePath : surface.hubPath };
+    }
+    return null;
+}
+/**
+ * The top bar. Gate 5 of the five coupled breakpoint gates.
+ *
+ * @param props - see {@link ShellAppBarProps}.
+ * @returns the bar.
+ *
+ * @extensionPoint slot
+ * @stability experimental
+ */
+export function ShellAppBar({ navigation, brand, actions, wideActions, userMenu }) {
+    const theme = useTheme();
+    const navigate = useNavigate();
+    const { pathname } = useLocation();
+    const shellTheme = useOptionalShellTheme();
+    const homePath = navigation.homePath ?? '/';
+    // 600px: `down('sm')`, byte-identical to `ShellBottomNav`'s and
+    // `SettingsHub`'s gates and the exact complement of `ShellLayout`'s
+    // `showRail` (`up('sm')`).
+    //
+    // ⚠️ FIVE COUPLED GATES: the list and the reasoning live in `ShellLayout`.
+    // This is member (5), bound most tightly to member (4), `SettingsHub`'s
+    // `isCompactWindow`: that hub is the page body directly under this header.
+    // If the two disagree the user gets a back-arrow header above a card grid,
+    // or a brand toolbar above a drill-down list with no way back up. Do not
+    // change this number alone.
+    const isCompactWindow = useMediaQuery(theme.breakpoints.down('sm'));
+    // Resolved at every width: a pure lookup, and hoisting it keeps the two
+    // treatments one render decision.
+    const features = useSettingsFeatures();
+    const drillDown = isCompactWindow ? resolveDrillDown(navigation.settingsSurfaces ?? [], pathname, features, homePath) : null;
+    return (_jsx(MuiAppBar, { position: "sticky", color: "default", elevation: 0, sx: {
+            backgroundColor: theme.palette.background.paper,
+        }, children: _jsxs(Toolbar, { children: [drillDown ? (_jsxs(_Fragment, { children: [_jsx(IconButton, { onClick: () => navigate(drillDown.upPath), color: "inherit", edge: "start", "aria-label": "Back", sx: { mr: 1, flexShrink: 0 }, children: _jsx(ArrowBackIcon, {}) }), _jsx(Typography, { variant: "h6", component: "div", noWrap: true, sx: { fontWeight: 600, minWidth: 0 }, children: drillDown.title })] })) : (_jsx(Typography, { variant: "h6", component: "div", sx: {
+                        cursor: 'pointer',
+                        fontWeight: 600,
+                        flexShrink: 0,
+                    }, onClick: () => navigate(homePath), children: brand })), _jsx(Box, { "aria-hidden": true, sx: { flexGrow: 1, minWidth: 0 } }), actions, !drillDown && shellTheme && (_jsx(IconButton, { onClick: shellTheme.toggleMode, color: "inherit", "aria-label": "toggle theme", sx: { mr: 1, flexShrink: 0 }, children: shellTheme.isDarkMode ? _jsx(LightModeIcon, {}) : _jsx(DarkModeIcon, {}) })), !drillDown && wideActions, _jsx(Box, { sx: { flexShrink: 0 }, children: userMenu ?? _jsx(ShellUserMenu, { navigation: navigation }) })] }) }));
+}
+//# sourceMappingURL=ShellAppBar.js.map

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

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

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

@@ -0,0 +1,31 @@
+import type { ReactElement } from 'react';
+import type { ShellNavigation } from '../headless/navigation.js';
+/**
+ * Props of {@link ShellBottomNav}.
+ *
+ * @stability experimental
+ */
+export interface ShellBottomNavProps {
+    /** The app's navigation. */
+    navigation: ShellNavigation;
+    /**
+     * The most actions the bar draws, the "More" action included. When more
+     * destinations are visible than this, the bar draws the first `maxItems - 1`
+     * and a "More" action that opens a sheet with the rest. At least 2.
+     *
+     * @defaultValue 4
+     */
+    maxItems?: number;
+}
+/**
+ * The bottom bar. Gate 2 of the five coupled breakpoint gates: it renders only
+ * below `sm`, even when mounted.
+ *
+ * @param props - see {@link ShellBottomNavProps}.
+ * @returns the bar, or `null` at `sm` and up.
+ *
+ * @extensionPoint component
+ * @stability experimental
+ */
+export declare function ShellBottomNav({ navigation, maxItems }: ShellBottomNavProps): ReactElement | null;
+//# sourceMappingURL=ShellBottomNav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShellBottomNav.d.ts","sourceRoot":"","sources":["../../../src/shell/ui/ShellBottomNav.tsx"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAWtD,OAAO,KAAK,EAAoB,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAenF;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,4BAA4B;IAC5B,UAAU,EAAE,eAAe,CAAC;IAC5B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAiHD;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,QAA4B,EAAE,EAAE,mBAAmB,GAAG,YAAY,GAAG,IAAI,CAwHrH"}

package/dist/shell/ui/ShellBottomNav.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// =============================================================================
+// The phone bottom bar (issue #868; moved from the reference app's
+// `components/navigation/BottomNav.tsx`, issue #55; PP-14.25 added `maxItems`)
+// =============================================================================
+//
+// The ONLY navigation chrome below `sm`: no drawer, no hamburger. FOUR
+// ACTIONS IS THE CEILING: five labelled tabs do not fit at 360px, so a fifth
+// destination forces a choice between labels and the tab. Active state comes
+// from the destination model, never a path prefix.
+//
+// PP-14.25: that ceiling is now the default of `maxItems` (4). With MORE
+// visible destinations than `maxItems`, the bar draws the first `maxItems - 1`
+// and a "More" action that opens a bottom sheet listing the rest, so a fifth
+// destination no longer squeezes the labels. With `maxItems` or fewer the bar
+// is exactly what it always was. The sheet lives inside this component, which
+// renders below `sm` only, so it adds no breakpoint gate.
+//
+// PINNED DESTINATIONS (`ShellDestination.pinned`) ARE RENDERED AT THE END of the
+// bar (and of its More sheet). `pinned` means "a mode at the foot of the rail,
+// not a peer of the library destinations" (the Console), so it goes last on the
+// bar like the rail, and stays reachable on a phone. The visible destinations
+// are stable-partitioned (non-pinned first in their original order, pinned
+// last) before the `maxItems` overflow is applied, so with an overflow a pinned
+// destination lands in the More sheet, after the non-pinned ones.
+//
+// LOCAL MODE: `usePermissions` falls back to the host's viewer and the local
+// identity, and nothing here calls the API, so the bar works with no session.
+// =============================================================================
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { Badge, BottomNavigation, BottomNavigationAction, Box, Drawer, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, Paper, Typography, useMediaQuery, useTheme, } from '@mui/material';
+import { Fragment, useCallback, useEffect, useState } from 'react';
+import { Link as RouterLink, useLocation, useNavigate } from 'react-router-dom';
+import { usePermissions } from '../../identity/index.js';
+import { useSettingsFeatures } from '../../settings/index.js';
+import { groupDestinationRuns, isDestinationVisible, resolveActiveDestination, shellDestinationRoutes, } from '../headless/navigation.js';
+import { DestinationIcon, EXTERNAL_LINK_PROPS, destinationAccessibleName, runDestinationClick, useDestinationBadge, } from './destination-parts.js';
+/** The value of the "More" action. Not a destination key (a key cannot contain a space). */
+const MORE_VALUE = 'more destinations';
+/** How many actions the bar draws by default, the "More" action included. */
+const DEFAULT_MAX_ITEMS = 4;
+/**
+ * One tab of the bar. `BottomNavigation` clones each child with `selected`,
+ * `showLabel`, `value` and `onChange`; this forwards what the action needs and
+ * handles the choice itself, so a destination's `onClick` can cancel the
+ * navigation (the action's own `onChange` fires before its `onClick`).
+ */
+function BottomNavItem({ destination, onNavigate, onChange, ...actionProps }) {
+    void onChange;
+    const badge = useDestinationBadge(destination);
+    const external = destination.external === true;
+    return (_jsx(BottomNavigationAction, { ...actionProps, ...(external ? { component: 'a', href: destination.path, ...EXTERNAL_LINK_PROPS } : {}), 
+        // The COMPACT label (a 4-up bar gives each tab ~90px); the full
+        // label is the accessible name.
+        label: destination.compactLabel, "aria-label": destinationAccessibleName(destination.label, badge, external), icon: _jsx(DestinationIcon, { Icon: destination.Icon, badge: badge }), onClick: (event) => {
+            if (runDestinationClick(destination, event))
+                return;
+            if (!external)
+                onNavigate(destination);
+        } }));
+}
+/** The "More" tab. Shows a dot when a destination in the sheet has a badge. */
+function MoreItem({ open, hasBadge, onOpen, onChange, ...actionProps }) {
+    void onChange;
+    return (_jsx(BottomNavigationAction, { ...actionProps, label: "More", "aria-label": hasBadge ? 'More destinations (new activity)' : 'More destinations', "aria-haspopup": "dialog", "aria-expanded": open, icon: hasBadge ? (_jsx(Badge, { variant: "dot", color: "error", "data-testid": "destination-badge", children: _jsx(MoreHorizIcon, {}) })) : (_jsx(MoreHorizIcon, {})), onClick: onOpen }));
+}
+/** Reports whether one overflow destination has a badge, so the "More" tab can show a dot. Renders nothing. */
+function OverflowBadgeProbe({ destination, report, }) {
+    const present = useDestinationBadge(destination) !== null;
+    useEffect(() => {
+        report(destination.key, present);
+        return () => report(destination.key, false);
+    }, [destination.key, present, report]);
+    return null;
+}
+/** One row of the sheet. A component of its own so the destination's `badge` has a stable hook order. */
+function SheetRow({ destination, active, onChoose, }) {
+    const badge = useDestinationBadge(destination);
+    const external = destination.external === true;
+    return (_jsx(ListItem, { disablePadding: true, children: _jsxs(ListItemButton, { ...(external
+                ? { component: 'a', href: destination.path, ...EXTERNAL_LINK_PROPS }
+                : { component: RouterLink, to: destination.path }), selected: active, "aria-current": active ? 'page' : undefined, "aria-label": destinationAccessibleName(destination.label, badge, external), onClick: (event) => onChoose(destination, event), children: [_jsx(ListItemIcon, { sx: { minWidth: 40 }, children: _jsx(DestinationIcon, { Icon: destination.Icon, badge: badge }) }), _jsx(ListItemText, { primary: destination.label }), external && _jsx(OpenInNewIcon, { "aria-hidden": true, fontSize: "small", sx: { color: 'text.secondary' } })] }) }));
+}
+/**
+ * The bottom bar. Gate 2 of the five coupled breakpoint gates: it renders only
+ * below `sm`, even when mounted.
+ *
+ * @param props - see {@link ShellBottomNavProps}.
+ * @returns the bar, or `null` at `sm` and up.
+ *
+ * @extensionPoint component
+ * @stability experimental
+ */
+export function ShellBottomNav({ navigation, maxItems = DEFAULT_MAX_ITEMS }) {
+    const theme = useTheme();
+    // The EXACT complement of `ShellLayout`'s `showRail` (`up('sm')`), and it
+    // must stay that way: any drift opens a band with two navigation surfaces or
+    // none. See the coupled-gate list in `ShellLayout`.
+    const isCompactWindow = useMediaQuery(theme.breakpoints.down('sm'));
+    const navigate = useNavigate();
+    const location = useLocation();
+    const { hasPermission } = usePermissions();
+    // Before the early return, per the rules of hooks.
+    const features = useSettingsFeatures();
+    const [sheetOpen, setSheetOpen] = useState(false);
+    const [badged, setBadged] = useState(new Set());
+    const reportBadge = useCallback((key, present) => {
+        setBadged((previous) => {
+            if (previous.has(key) === present)
+                return previous;
+            const next = new Set(previous);
+            if (present)
+                next.add(key);
+            else
+                next.delete(key);
+            return next;
+        });
+    }, []);
+    if (!isCompactWindow)
+        return null;
+    const visible = navigation.destinations.filter((destination) => isDestinationVisible(destination, hasPermission, features));
+    // Stable partition: non-pinned first (original order), pinned last.
+    const visibleDestinations = [...visible.filter((d) => d.pinned !== true), ...visible.filter((d) => d.pinned === true)];
+    const limit = Number.isFinite(maxItems) ? Math.max(2, Math.floor(maxItems)) : DEFAULT_MAX_ITEMS;
+    const overflows = visibleDestinations.length > limit;
+    const barDestinations = overflows ? visibleDestinations.slice(0, limit - 1) : visibleDestinations;
+    const sheetDestinations = overflows ? visibleDestinations.slice(limit - 1) : [];
+    const resolved = resolveActiveDestination(shellDestinationRoutes(navigation), location.pathname);
+    const activeInBar = resolved !== null && barDestinations.some((d) => d.key === resolved);
+    const activeInSheet = resolved !== null && sheetDestinations.some((d) => d.key === resolved);
+    // `false`, NOT `null`, is MUI's "nothing selected": the correct rendering on
+    // routes no destination owns, and for a destination the viewer cannot see.
+    const active = activeInBar && resolved !== null ? resolved : activeInSheet ? MORE_VALUE : false;
+    const choose = (destination, event) => {
+        setSheetOpen(false);
+        // A router link navigates on its own; the click handler's veto is all that needs care.
+        runDestinationClick(destination, event);
+    };
+    const sheetRuns = groupDestinationRuns(sheetDestinations);
+    const probes = sheetDestinations.filter((destination) => destination.badge);
+    return (_jsxs(Paper, { elevation: 3, sx: {
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: theme.zIndex.appBar,
+        }, children: [probes.map((destination) => (_jsx(OverflowBadgeProbe, { destination: destination, report: reportBadge }, destination.key))), _jsxs(BottomNavigation, { value: active, showLabels: true, children: [barDestinations.map((destination) => (_jsx(BottomNavItem, { value: destination.key, destination: destination, onNavigate: (next) => navigate(next.path) }, destination.key))), overflows && (_jsx(MoreItem, { value: MORE_VALUE, open: sheetOpen, hasBadge: sheetDestinations.some((destination) => badged.has(destination.key)), onOpen: () => setSheetOpen(true) }, MORE_VALUE))] }), overflows && (_jsx(Drawer, { anchor: "bottom", open: sheetOpen, onClose: () => setSheetOpen(false), slotProps: {
+                    paper: {
+                        'aria-label': 'More destinations',
+                        sx: { borderTopLeftRadius: 16, borderTopRightRadius: 16, maxHeight: '70vh', pb: 'env(safe-area-inset-bottom)' },
+                    },
+                }, children: _jsxs(Box, { component: "nav", "aria-label": "More destinations", sx: { py: 1 }, children: [_jsx(Typography, { variant: "subtitle2", component: "h2", sx: { px: 2, py: 1, color: 'text.secondary' }, children: "More" }), sheetRuns.map((run, index) => (_jsx(Fragment, { children: _jsx(List, { disablePadding: true, ...(run.group !== undefined
+                                    ? { subheader: _jsx(ListSubheader, { disableSticky: true, children: run.group }), 'aria-label': run.group }
+                                    : {}), children: run.destinations.map((destination) => (_jsx(SheetRow, { destination: destination, active: resolved === destination.key, onChoose: choose }, destination.key))) }) }, `${index}:${run.group ?? ''}`)))] }) }))] }));
+}
+//# sourceMappingURL=ShellBottomNav.js.map

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

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

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"}