@dloizides/ui-nav 1.27.0 → 1.29.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.28.0
+
+- INVOICE-5 "Edit invoices before sending, shared background and menu hover" (AC-UI-3, AC-UI-6): `AppShell` draws `theme.backdrop` (the `@dloizides/theme-web` 1.5.0 `resolveBackdrop` shape, typed here as `AppShellBackdrop`): its colour and web image on the root, and for `horizon` a brand band behind header and nav that the content overlaps by `overlap.compact` (< 768 px) or `overlap.wide`. No `theme.backdrop` keeps today's flat background.
+
 ## 1.27.0
 
 - INVOICE-5 "Edit invoices before sending, shared background and menu hover" (AC-UI-2, AC-UI-6): `NavBar` takes `hoverFeedback` (`NavHoverFeedback`: `default`, `tint-pill`, `underline`, `lift`, `sliding-highlight`); the new phone `BottomTabBar` takes `tabFeedback` (`TabFeedback`: `default`, `indicator-pill`, `dim-spring`, `sliding-bar`, `icon-lift`). Timings come from the `@dloizides/ui-motion` tokens (<= 300 ms); reduced motion keeps every option still. `default` keeps today's look, so existing apps do not change.

package/dist/index.d.mts

@@ -398,8 +398,7 @@ declare enum NavHoverFeedback {
  *
  * Contract discipline (same as the rest of `@dloizides/ui-nav`): NO FM, router,
  * icon set, or store imports. Labels are pre-localized strings, icons are render
- * slots, and every colour is read from the theme. This is purely additive —
- * `Sidebar`/`Topbar` are unchanged and the new overflow labels are optional.
+ * slots, and every colour is read from the theme.
  */
 
 interface NavBarProps {
@@ -463,6 +462,15 @@ interface NavBarProps {
  */
 declare const NavBar: ({ barTheme, ...props }: NavBarProps) => React.ReactElement;
 
+interface BrandHomeLinkProps {
+    route: string;
+    label: string;
+    onNavigate: (route: string) => void;
+    children: React.ReactNode;
+}
+/** The app logo as a link to the app's home route, for `NavBar` and apps with their own header. */
+declare const BrandHomeLink: ({ route, label, onNavigate, children }: BrandHomeLinkProps) => React.ReactElement;
+
 /**
  * `Nav` — ONE component that renders EITHER the horizontal top bar (`NavBar`) or the
  * vertical rail (`Sidebar`) from the same `NavItem[]`, chosen by a single
@@ -1085,6 +1093,21 @@ interface NavOverflowMenuProps {
 }
 declare const NavOverflowMenu: ({ items, pathname, onNavigate, colors, label, hint, testID, variant, }: NavOverflowMenuProps) => React.ReactElement;
 
+interface AppShellBackdropBand {
+    color: string;
+    text: string;
+    overlap: {
+        compact: number;
+        wide: number;
+    };
+}
+interface AppShellBackdrop {
+    color: string;
+    image: string | null;
+    imageSize: string | null;
+    band: AppShellBackdropBand | null;
+}
+
 /**
  * Default testIDs for `@dloizides/ui-nav`. Kept as a small central map (mirrors
  * `@dloizides/ui-layout`'s `LAYOUT_TEST_IDS`) so the app-agnostic chrome exposes
@@ -1111,6 +1134,7 @@ declare const NAV_TEST_IDS: {
     readonly pillNavMenu: "pill-nav-menu";
     /** the optional middle slot of `Topbar` (rendered only when `center` is passed). */
     readonly topbarCenter: "topbar-center";
+    readonly brandHome: "nav-brand-home";
 };
 /** Suffixes appended to an `AppShell`'s required `testID` to name its regions. */
 declare const APP_SHELL_SUFFIX: {
@@ -1132,6 +1156,7 @@ declare const APP_SHELL_SUFFIX: {
     readonly loading: "-loading";
     readonly error: "-error";
     readonly forbidden: "-forbidden";
+    readonly band: "-backdrop-band";
 };
 
 /**
@@ -1628,4 +1653,4 @@ interface BottomTabBarProps {
 /** Phone tab bar; `tabFeedback` picks the press feedback, `Default` adds no motion. */
 declare const BottomTabBar: ({ items, pathname, onNavigate, tabFeedback, navigateHint, regionLabel, containerStyle, testID, }: BottomTabBarProps) => React.ReactElement;
 
-export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, BottomTabBar, type BottomTabBarProps, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, NavHoverFeedback, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, PillNavVariant, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type SearchAffordance, type ShellMessage, Sidebar, SidebarChevron, type SidebarChevronProps, type SidebarPaletteTriggerConfig, type SidebarProps, SidebarSearch, type SidebarSearchConfig, type SidebarSearchLabels, type SidebarSearchProps, TabFeedback, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolvePillMenuLabel, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellBackdrop, type AppShellBackdropBand, type AppShellProps, type AppShellWidth, BASE_INDENT, BottomTabBar, type BottomTabBarProps, BrandHomeLink, type BrandHomeLinkProps, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, NavHoverFeedback, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, PillNavVariant, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type SearchAffordance, type ShellMessage, Sidebar, SidebarChevron, type SidebarChevronProps, type SidebarPaletteTriggerConfig, type SidebarProps, SidebarSearch, type SidebarSearchConfig, type SidebarSearchLabels, type SidebarSearchProps, TabFeedback, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolvePillMenuLabel, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };

package/dist/index.d.ts

@@ -398,8 +398,7 @@ declare enum NavHoverFeedback {
  *
  * Contract discipline (same as the rest of `@dloizides/ui-nav`): NO FM, router,
  * icon set, or store imports. Labels are pre-localized strings, icons are render
- * slots, and every colour is read from the theme. This is purely additive —
- * `Sidebar`/`Topbar` are unchanged and the new overflow labels are optional.
+ * slots, and every colour is read from the theme.
  */
 
 interface NavBarProps {
@@ -463,6 +462,15 @@ interface NavBarProps {
  */
 declare const NavBar: ({ barTheme, ...props }: NavBarProps) => React.ReactElement;
 
+interface BrandHomeLinkProps {
+    route: string;
+    label: string;
+    onNavigate: (route: string) => void;
+    children: React.ReactNode;
+}
+/** The app logo as a link to the app's home route, for `NavBar` and apps with their own header. */
+declare const BrandHomeLink: ({ route, label, onNavigate, children }: BrandHomeLinkProps) => React.ReactElement;
+
 /**
  * `Nav` — ONE component that renders EITHER the horizontal top bar (`NavBar`) or the
  * vertical rail (`Sidebar`) from the same `NavItem[]`, chosen by a single
@@ -1085,6 +1093,21 @@ interface NavOverflowMenuProps {
 }
 declare const NavOverflowMenu: ({ items, pathname, onNavigate, colors, label, hint, testID, variant, }: NavOverflowMenuProps) => React.ReactElement;
 
+interface AppShellBackdropBand {
+    color: string;
+    text: string;
+    overlap: {
+        compact: number;
+        wide: number;
+    };
+}
+interface AppShellBackdrop {
+    color: string;
+    image: string | null;
+    imageSize: string | null;
+    band: AppShellBackdropBand | null;
+}
+
 /**
  * Default testIDs for `@dloizides/ui-nav`. Kept as a small central map (mirrors
  * `@dloizides/ui-layout`'s `LAYOUT_TEST_IDS`) so the app-agnostic chrome exposes
@@ -1111,6 +1134,7 @@ declare const NAV_TEST_IDS: {
     readonly pillNavMenu: "pill-nav-menu";
     /** the optional middle slot of `Topbar` (rendered only when `center` is passed). */
     readonly topbarCenter: "topbar-center";
+    readonly brandHome: "nav-brand-home";
 };
 /** Suffixes appended to an `AppShell`'s required `testID` to name its regions. */
 declare const APP_SHELL_SUFFIX: {
@@ -1132,6 +1156,7 @@ declare const APP_SHELL_SUFFIX: {
     readonly loading: "-loading";
     readonly error: "-error";
     readonly forbidden: "-forbidden";
+    readonly band: "-backdrop-band";
 };
 
 /**
@@ -1628,4 +1653,4 @@ interface BottomTabBarProps {
 /** Phone tab bar; `tabFeedback` picks the press feedback, `Default` adds no motion. */
 declare const BottomTabBar: ({ items, pathname, onNavigate, tabFeedback, navigateHint, regionLabel, containerStyle, testID, }: BottomTabBarProps) => React.ReactElement;
 
-export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, BottomTabBar, type BottomTabBarProps, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, NavHoverFeedback, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, PillNavVariant, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type SearchAffordance, type ShellMessage, Sidebar, SidebarChevron, type SidebarChevronProps, type SidebarPaletteTriggerConfig, type SidebarProps, SidebarSearch, type SidebarSearchConfig, type SidebarSearchLabels, type SidebarSearchProps, TabFeedback, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolvePillMenuLabel, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellBackdrop, type AppShellBackdropBand, type AppShellProps, type AppShellWidth, BASE_INDENT, BottomTabBar, type BottomTabBarProps, BrandHomeLink, type BrandHomeLinkProps, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, NavHoverFeedback, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, PillNavVariant, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type SearchAffordance, type ShellMessage, Sidebar, SidebarChevron, type SidebarChevronProps, type SidebarPaletteTriggerConfig, type SidebarProps, SidebarSearch, type SidebarSearchConfig, type SidebarSearchLabels, type SidebarSearchProps, TabFeedback, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolvePillMenuLabel, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };

package/dist/index.js

@@ -883,7 +883,8 @@ var NAV_TEST_IDS = {
   /** the compact "Current ▾" trigger of `PillNav` with `variant={PillNavVariant.Menu}`. */
   pillNavMenu: "pill-nav-menu",
   /** the optional middle slot of `Topbar` (rendered only when `center` is passed). */
-  topbarCenter: "topbar-center"
+  topbarCenter: "topbar-center",
+  brandHome: "nav-brand-home"
 };
 var APP_SHELL_SUFFIX = {
   content: "-content",
@@ -903,7 +904,8 @@ var APP_SHELL_SUFFIX = {
   pending: "-pending",
   loading: "-loading",
   error: "-error",
-  forbidden: "-forbidden"
+  forbidden: "-forbidden",
+  band: "-backdrop-band"
 };
 var FocusableTouchable = ({
   onPress,
@@ -1389,6 +1391,7 @@ var NavBarInner = ({
     () => contentMaxWidth === void 0 ? null : { maxWidth: contentMaxWidth, width: "100%", alignSelf: "center" },
     [contentMaxWidth]
   );
+  React.useEffect(() => setOpen(false), [pathname]);
   const toggleMenu = React.useCallback(() => setOpen((v) => !v), []);
   const handlePress = React.useCallback(
     (route) => {
@@ -1536,19 +1539,92 @@ var NavBar = ({ barTheme, ...props }) => {
   if (barTheme === void 0) return /* @__PURE__ */ jsxRuntime.jsx(NavBarInner, { ...props });
   return /* @__PURE__ */ jsxRuntime.jsx(uiFeedback.UiProvider, { navigate, t, theme: barTheme, children: /* @__PURE__ */ jsxRuntime.jsx(NavBarInner, { ...props }) });
 };
+var styles3 = reactNative.StyleSheet.create({
+  hitBox: { minHeight: MIN_TOUCH_TARGET, minWidth: MIN_TOUCH_TARGET, justifyContent: "center" }
+});
+function anchorProps(route) {
+  return { href: route };
+}
+function hasNewTabModifier(event) {
+  const { ctrlKey, metaKey, shiftKey } = event.nativeEvent;
+  return ctrlKey === true || metaKey === true || shiftKey === true;
+}
+var BrandHomeLink = ({ route, label, onNavigate, children }) => {
+  const { theme } = uiFeedback.useUi();
+  const [focused, setFocused] = React.useState(false);
+  const handlePress = (event) => {
+    if (hasNewTabModifier(event)) return;
+    event.preventDefault();
+    onNavigate(route);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      accessibilityLabel: label,
+      accessibilityRole: "link",
+      style: [styles3.hitBox, focusRingStyle(focused, theme.palette.primary["500"])],
+      testID: NAV_TEST_IDS.brandHome,
+      onBlur: () => setFocused(false),
+      onFocus: () => setFocused(true),
+      onPress: handlePress,
+      ...anchorProps(route),
+      children
+    }
+  );
+};
 var Nav = (props) => {
   if (props.orientation === "vertical") {
     return /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { ...props });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(NavBar, { ...props });
 };
+var RAIL_FULL_BREAKPOINT = uiLayout.LAYOUT_COLLAPSE_BREAKPOINT;
+var DEFAULT_COLLAPSED_RAIL_MAX = 1024;
+function resolveRailMode({ viewport, hasSidebar, hasCollapsed, range }) {
+  if (!hasSidebar) return "none";
+  if (hasCollapsed) {
+    if (viewport >= range.max) return "full";
+    if (viewport >= range.min) return "collapsed";
+    return "drawer";
+  }
+  return viewport >= RAIL_FULL_BREAKPOINT ? "full" : "drawer";
+}
+var styles4 = reactNative.StyleSheet.create({
+  band: { left: 0, position: "absolute", right: 0, top: 0 }
+});
+function readBackdrop(theme) {
+  return theme.backdrop;
+}
+function rootStyle(backdrop, fallback) {
+  if (backdrop === void 0) return { backgroundColor: fallback };
+  const base = { backgroundColor: backdrop.color };
+  if (!IS_WEB || backdrop.image === null) return base;
+  const web = { backgroundImage: backdrop.image, backgroundSize: backdrop.imageSize ?? "auto" };
+  return { ...base, ...web };
+}
+function resolveShellBackdrop(theme, viewport, contentPadding, testID) {
+  const backdrop = readBackdrop(theme);
+  const band = backdrop?.band ?? null;
+  const root = rootStyle(backdrop, theme.colors.background);
+  if (band === null) return { root, chrome: void 0, chromeText: theme.colors.text, band: null };
+  const overlap = viewport < RAIL_FULL_BREAKPOINT ? band.overlap.compact : band.overlap.wide;
+  const element = /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      pointerEvents: "none",
+      style: [styles4.band, { backgroundColor: band.color, height: contentPadding + overlap }],
+      testID: `${testID}${APP_SHELL_SUFFIX.band}`
+    }
+  );
+  return { root, chrome: { backgroundColor: band.color }, chromeText: band.text, band: element };
+}
 var CARD_PADDING = 20;
 var CARD_BORDER_RADIUS = 12;
 var CARD_BORDER_WIDTH = 1;
 var CARD_TITLE_FONT_SIZE = 16;
 var CARD_MESSAGE_FONT_SIZE = 14;
 var CARD_TITLE_MARGIN_BOTTOM = 8;
-var styles3 = reactNative.StyleSheet.create({
+var styles5 = reactNative.StyleSheet.create({
   // Loading is a TRANSITIONAL state: the spinner is an absolute overlay ON TOP of
   // stably-mounted children, never a replacement for them. Replacing children here
   // would unmount whatever they host (e.g. a navigator), and on remount React
@@ -1580,9 +1656,9 @@ function MessageCard({
 }) {
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles3.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.cardTitle, { color: accentColor }], children: message.titleText }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.cardMessage, { color: colors.textSecondary }], children: message.messageText })
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles5.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.cardTitle, { color: accentColor }], children: message.titleText }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.cardMessage, { color: colors.textSecondary }], children: message.messageText })
   ] });
 }
 function useContentBody(state, children, testID) {
@@ -1594,12 +1670,12 @@ function useContentBody(state, children, testID) {
     return /* @__PURE__ */ jsxRuntime.jsx(MessageCard, { accentColor: errorColor, message: state.forbidden, testID: `${testID}${APP_SHELL_SUFFIX.forbidden}` });
   if (state.error)
     return /* @__PURE__ */ jsxRuntime.jsx(MessageCard, { accentColor: errorColor, message: state.error, testID: `${testID}${APP_SHELL_SUFFIX.error}` });
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.loadingHost, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.loadingHost, children: [
     children,
     state.loading === true ? /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.View,
       {
-        style: [styles3.loadingOverlay, { backgroundColor: theme.colors.background }],
+        style: [styles5.loadingOverlay, { backgroundColor: theme.colors.background }],
         testID: `${testID}${APP_SHELL_SUFFIX.loading}`,
         children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary, size: "large" })
       }
@@ -1626,7 +1702,7 @@ var DEFAULT_DRAWER_LABELS = {
   closeLabel: "Close menu",
   closeHint: "Close the navigation menu"
 };
-var styles4 = reactNative.StyleSheet.create({
+var styles6 = reactNative.StyleSheet.create({
   overlay: { ...reactNative.StyleSheet.absoluteFillObject, zIndex: DRAWER_Z_INDEX },
   // The scrim's tap-to-close hit area is anchored to the RIGHT of the panel
   // (`left: DRAWER_WIDTH`), so it NEVER overlaps the panel: nav-item taps always
@@ -1661,10 +1737,10 @@ var MenuToggle = ({ label, hint, onOpen, testID }) => {
       accessibilityHint: hint,
       accessibilityLabel: label,
       ringColor: theme.palette.primary["500"],
-      style: styles4.menuToggle,
+      style: styles6.menuToggle,
       testID,
       onPress: onOpen,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
     }
   );
 };
@@ -1690,14 +1766,14 @@ var MobileDrawer = ({
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);
   }, [onClose]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.overlay, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.overlay, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles4.scrim,
+        style: styles6.scrim,
         testID: scrimTestID,
         onPress: onClose
       }
@@ -1708,24 +1784,13 @@ var MobileDrawer = ({
         ref: panelRef,
         "aria-modal": true,
         role: "dialog",
-        style: [styles4.panel, { backgroundColor: theme.colors.surface }],
+        style: [styles6.panel, { backgroundColor: theme.colors.surface }],
         testID: drawerTestID,
         children: renderTextSlot(sidebar, { color: theme.colors.text })
       }
     )
   ] });
 };
-var RAIL_FULL_BREAKPOINT = uiLayout.LAYOUT_COLLAPSE_BREAKPOINT;
-var DEFAULT_COLLAPSED_RAIL_MAX = 1024;
-function resolveRailMode({ viewport, hasSidebar, hasCollapsed, range }) {
-  if (!hasSidebar) return "none";
-  if (hasCollapsed) {
-    if (viewport >= range.max) return "full";
-    if (viewport >= range.min) return "collapsed";
-    return "drawer";
-  }
-  return viewport >= RAIL_FULL_BREAKPOINT ? "full" : "drawer";
-}
 function resolveContentMaxWidth(width, viewport) {
   if (width === "full") return "full";
   const wideMinViewport = width.wideMinViewport ?? Number.POSITIVE_INFINITY;
@@ -1737,7 +1802,7 @@ function useContentMaxWidth(width) {
   return resolveContentMaxWidth(width, viewport);
 }
 var DEFAULT_CONTENT_PADDING = 24;
-var styles5 = reactNative.StyleSheet.create({
+var styles7 = reactNative.StyleSheet.create({
   root: { flex: 1 },
   // Auth-pending spinner: an opaque absolute overlay over the mounted shell, so
   // `children` (and any navigator they host) are never unmounted while the gate
@@ -1777,6 +1842,7 @@ var AppShell = ({
   const maxWidth = useContentMaxWidth(width);
   const body = useContentBody(state, children, testID);
   const { width: viewportWidth } = reactNative.useWindowDimensions();
+  const look = resolveShellBackdrop(theme, viewportWidth, contentPadding, testID);
   const railRange = collapsedRailRange ?? { min: RAIL_FULL_BREAKPOINT, max: DEFAULT_COLLAPSED_RAIL_MAX };
   const railMode = resolveRailMode({
     viewport: viewportWidth,
@@ -1798,18 +1864,21 @@ var AppShell = ({
   }, [isUnauthenticated, gate]);
   const gatePending = gate?.pending === true;
   if (isUnauthenticated) return null;
-  const columnStyle = maxWidth === "full" ? styles5.columnFull : [styles5.columnCapped, { maxWidth }];
-  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles5.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
-  const scroller = /* @__PURE__ */ jsxRuntime.jsx(
+  const columnStyle = maxWidth === "full" ? styles7.columnFull : [styles7.columnCapped, { maxWidth }];
+  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles7.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
+  const scroller = /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.ScrollView,
     {
-      contentContainerStyle: [styles5.scrollContent, { padding: contentPadding }],
-      style: styles5.scroll,
+      contentContainerStyle: [styles7.scrollContent, { padding: contentPadding }],
+      style: styles7.scroll,
       testID: `${testID}${APP_SHELL_SUFFIX.content}`,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: columnStyle, children: body })
+      children: [
+        look.band,
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: columnStyle, children: body })
+      ]
     }
   );
-  const headerRegion = useDrawer ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.headerRow, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
+  const headerRegion = useDrawer ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles7.headerRow, look.chrome], testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       MenuToggle,
       {
@@ -1819,14 +1888,14 @@ var AppShell = ({
         onOpen: openDrawer
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.headerFill, children: renderTextSlot(header, { color: theme.colors.text }) })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: renderTextSlot(header, { color: theme.colors.text }) });
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.headerFill, children: renderTextSlot(header, { color: look.chromeText }) })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: look.chrome, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: renderTextSlot(header, { color: look.chromeText }) });
   const railRegion = railMode === "full" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.sidebar}`, children: renderTextSlot(sidebar, { color: theme.colors.text }) }) : railMode === "collapsed" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.collapsedSidebar}`, children: renderTextSlot(collapsedSidebar, { color: theme.colors.text }) }) : null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles5.root, { backgroundColor: theme.colors.background }], testID, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles7.root, look.root], testID, children: [
     headerRegion,
-    nav !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.nav}`, children: navInnerStyle !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navInnerStyle, children: renderTextSlot(nav, { color: theme.colors.text }) }) : renderTextSlot(nav, { color: theme.colors.text }) }) : null,
+    nav !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: look.chrome, testID: `${testID}${APP_SHELL_SUFFIX.nav}`, children: navInnerStyle !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navInnerStyle, children: renderTextSlot(nav, { color: look.chromeText }) }) : renderTextSlot(nav, { color: look.chromeText }) }) : null,
     banner !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.banner}`, children: renderTextSlot(banner, { color: theme.colors.text }) }) : null,
-    railRegion !== null ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.bodyRow, children: [
+    railRegion !== null ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.bodyRow, children: [
       railRegion,
       scroller
     ] }) : scroller,
@@ -1843,7 +1912,7 @@ var AppShell = ({
     gatePending ? /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.View,
       {
-        style: [styles5.pendingOverlay, { backgroundColor: theme.colors.background }],
+        style: [styles7.pendingOverlay, { backgroundColor: theme.colors.background }],
         testID: `${testID}${APP_SHELL_SUFFIX.pending}`,
         children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary, size: "large" })
       }
@@ -2210,7 +2279,7 @@ var KEY_DOWN = "ArrowDown";
 var KEY_UP = "ArrowUp";
 var KEY_ENTER = "Enter";
 var KEY_ESCAPE = "Escape";
-var styles6 = reactNative.StyleSheet.create({
+var styles8 = reactNative.StyleSheet.create({
   overlay: { ...reactNative.StyleSheet.absoluteFillObject, zIndex: OVERLAY_Z_INDEX, alignItems: "center" },
   scrim: { ...reactNative.StyleSheet.absoluteFillObject, backgroundColor: SCRIM_COLOR2 },
   panel: {
@@ -2239,14 +2308,14 @@ var PaletteRow = ({ item, selected, onChoose }) => {
       accessibilityLabel: item.label,
       accessibilityRole: "button",
       accessibilityState: { selected },
-      style: [styles6.row, selected ? { backgroundColor: colors.border } : void 0],
+      style: [styles8.row, selected ? { backgroundColor: colors.border } : void 0],
       testID: item.testID ?? item.key,
       onPress: () => onChoose(item),
       children: [
         typeof item.renderIcon === "function" ? item.renderIcon(colors.textSecondary, NAV_ICON_SIZE) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.rowText, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.rowLabel, { color: colors.text }], children: item.label }),
-          item.hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.rowText, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.rowLabel, { color: colors.text }], children: item.label }),
+          item.hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
         ] })
       ]
     }
@@ -2286,14 +2355,14 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
     [results, selected, choose, onClose]
   );
   if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.overlay, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.overlay, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles6.scrim,
+        style: styles8.scrim,
         testID: `${testID ?? "command-palette"}-scrim`,
         onPress: onClose
       }
@@ -2304,7 +2373,7 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
         "aria-modal": true,
         "aria-label": labels.regionLabel,
         role: "dialog",
-        style: [styles6.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
+        style: [styles8.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
         testID: testID ?? "command-palette",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2314,14 +2383,14 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
               accessibilityLabel: labels.placeholder,
               placeholder: labels.placeholder,
               placeholderTextColor: colors.textSecondary,
-              style: [styles6.input, { color: colors.text, borderBottomColor: colors.border }],
+              style: [styles8.input, { color: colors.text, borderBottomColor: colors.border }],
               testID: `${testID ?? "command-palette"}-input`,
               value: query,
               onChangeText: setQuery,
               onKeyPress
             }
           ),
-          results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { keyboardShouldPersistTaps: "handled", style: styles6.list, children: results.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
+          results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { keyboardShouldPersistTaps: "handled", style: styles8.list, children: results.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
         ]
       }
     )
@@ -2426,7 +2495,7 @@ var TAB_MIN_HEIGHT = 56;
 var LABEL_SIZE = 12;
 var LABEL_GAP = 2;
 var TAB_PADDING = 4;
-var styles7 = reactNative.StyleSheet.create({
+var styles9 = reactNative.StyleSheet.create({
   tab: {
     flex: 1,
     minHeight: TAB_MIN_HEIGHT,
@@ -2463,31 +2532,31 @@ var BottomTab = ({
       accessibilityLabel: item.label,
       accessibilityRole: "link",
       accessibilityState: { selected: isActive },
-      style: [styles7.tab, { opacity: feedback.opacity }],
+      style: [styles9.tab, { opacity: feedback.opacity }],
       testID: item.testID ?? item.key,
       onPress: () => onPress(item.route),
       onPressIn: () => setPressed(true),
       onPressOut: () => setPressed(false),
       ...ariaCurrentProps3(isActive),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Animated.View, { style: [styles7.iconWrap, { transform: [{ scale }] }], children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Animated.View, { style: [styles9.iconWrap, { transform: [{ scale }] }], children: [
           feedback.pillScale === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.View,
             {
               pointerEvents: "none",
-              style: [styles7.pill, { backgroundColor: colors.pill, transform: [{ scale: feedback.pillScale }] }, motion]
+              style: [styles9.pill, { backgroundColor: colors.pill, transform: [{ scale: feedback.pillScale }] }, motion]
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [{ transform: feedback.iconTransform }, motion], children: item.renderIcon?.(color, ICON_SIZE) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.label, { color }], children: item.label })
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.label, { color }], children: item.label })
       ]
     }
   );
 };
 var DEFAULT_TEST_ID = "bottom-tab-bar";
 var SLIDER_HEIGHT = 3;
-var styles8 = reactNative.StyleSheet.create({
+var styles10 = reactNative.StyleSheet.create({
   bar: { flexDirection: "row", borderTopWidth: reactNative.StyleSheet.hairlineWidth },
   slider: { position: "absolute", top: 0, height: SLIDER_HEIGHT }
 });
@@ -2514,14 +2583,14 @@ var BottomTabBar = ({
     {
       "aria-label": regionLabel,
       role: "navigation",
-      style: [styles8.bar, { backgroundColor: theme.colors.surface, borderTopColor: theme.colors.border }, containerStyle],
+      style: [styles10.bar, { backgroundColor: theme.colors.surface, borderTopColor: theme.colors.border }, containerStyle],
       testID,
       children: [
         bar === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.View,
           {
             pointerEvents: "none",
-            style: [styles8.slider, { left: bar.left, width: bar.width, backgroundColor: primary }, webTransition("left", barMs, reducedMotion)]
+            style: [styles10.slider, { left: bar.left, width: bar.width, backgroundColor: primary }, webTransition("left", barMs, reducedMotion)]
           }
         ),
         items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -2548,6 +2617,7 @@ exports.APP_SHELL_SUFFIX = APP_SHELL_SUFFIX;
 exports.AppShell = AppShell;
 exports.BASE_INDENT = BASE_INDENT;
 exports.BottomTabBar = BottomTabBar;
+exports.BrandHomeLink = BrandHomeLink;
 exports.CHEVRON_ICON_SIZE = CHEVRON_ICON_SIZE;
 exports.CollapsedRail = CollapsedRail;
 exports.CommandPalette = CommandPalette;