@dloizides/ui-nav 1.29.0 → 1.31.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle, StyleProp } from 'react-native';
+import { ViewStyle, ImageSourcePropType, StyleProp } from 'react-native';
 import { UiTheme } from '@dloizides/ui-feedback';
 import { DropdownVariant } from '@dloizides/ui-layout';
 import { resolveAccessibleRoutes, RoleRouteTable, RoleRoute } from '@dloizides/auth-web';
@@ -155,7 +155,7 @@ interface SidebarProps {
     /** Navigation callback — receives a `NavItem.route`. */
     onNavigate: (route: string) => void;
     /** Localized menu title (heading). */
-    title: string;
+    title: React.ReactNode;
     /** Localized accessibility label for the navigation landmark. */
     regionLabel: string;
     /** a11y hint for a leaf item, given its label. Defaults to the label. */
@@ -471,6 +471,18 @@ interface BrandHomeLinkProps {
 /** 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;
 
+interface BrandMarkProps {
+    source: ImageSourcePropType;
+    name: string;
+    route: string;
+    label: string;
+    onNavigate: (route: string) => void;
+    size?: number;
+    iconOnly?: boolean;
+}
+/** The app icon with its name, as a link to the app's home route. */
+declare const BrandMark: ({ source, name, route, label, onNavigate, size, iconOnly, }: BrandMarkProps) => 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
@@ -699,6 +711,13 @@ interface AppShellProps {
 }
 declare const AppShell: ({ header, nav, sidebar, collapsedSidebar, collapsedRailRange, mobileMenu, banner, width, contentPadding, chromeAlignment, gate, state, testID, children, }: AppShellProps) => React.ReactElement | null;
 
+interface NavShellCollapsedRail {
+    items?: NavItem[];
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    range?: CollapsedRailRange;
+}
+
 /**
  * NavShell — the ONE first-class navigation shell that renders a **top bar**, a
  * **side rail**, or **BOTH together**, chosen by a single `layout` prop
@@ -774,22 +793,7 @@ interface NavShellTopBar {
      */
     barTheme?: UiTheme;
 }
-/**
- * Config for the intermediate COLLAPSED (icon-only) rail — opts the side layout
- * into a THREE-tier responsive scheme (full rail → collapsed rail → drawer). When
- * present, NavShell builds a `<CollapsedRail>` and hands it to `AppShell` for the
- * tablet band; omit it and the layout stays two-tier.
- */
-interface NavShellCollapsedRail {
-    /** Items for the icon rail. Defaults to the full rail's `items`. */
-    items?: NavItem[];
-    /** Optional header slot (e.g. a home shortcut). */
-    header?: React.ReactNode;
-    /** Optional footer slot (dark-mode toggle, logout). */
-    footer?: React.ReactNode;
-    /** The `[min, max)` viewport band for the collapsed rail (default `{ min: 768, max: 1024 }`). */
-    range?: CollapsedRailRange;
-}
+
 /**
  * Config for the SIDE rail (rendered as a `Sidebar` in `AppShell`'s sidebar
  * slot). Used when `layout` is `'side'` or `'both'`.
@@ -797,6 +801,7 @@ interface NavShellCollapsedRail {
 interface NavShellSideRail {
     /** Side-rail nav entries (sections — leaf + expandable). */
     items: NavItem[];
+    brand?: React.ReactNode;
     /** Localized menu title (heading). */
     title: string;
     /** Optional header slot rendered above the items (e.g. a Home shortcut). */
@@ -1135,6 +1140,8 @@ declare const NAV_TEST_IDS: {
     /** the optional middle slot of `Topbar` (rendered only when `center` is passed). */
     readonly topbarCenter: "topbar-center";
     readonly brandHome: "nav-brand-home";
+    readonly brandMarkIcon: "nav-brand-mark-icon";
+    readonly brandMarkName: "nav-brand-mark-name";
 };
 /** Suffixes appended to an `AppShell`'s required `testID` to name its regions. */
 declare const APP_SHELL_SUFFIX: {
@@ -1358,6 +1365,9 @@ declare const navStyles: {
         borderRightWidth: number;
         height: "100%";
     };
+    sidebarBrand: {
+        marginBottom: number;
+    };
     sidebarTitle: {
         fontWeight: "700";
         marginBottom: number;
@@ -1653,4 +1663,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 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 };
+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, BrandMark, type BrandMarkProps, 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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle, StyleProp } from 'react-native';
+import { ViewStyle, ImageSourcePropType, StyleProp } from 'react-native';
 import { UiTheme } from '@dloizides/ui-feedback';
 import { DropdownVariant } from '@dloizides/ui-layout';
 import { resolveAccessibleRoutes, RoleRouteTable, RoleRoute } from '@dloizides/auth-web';
@@ -155,7 +155,7 @@ interface SidebarProps {
     /** Navigation callback — receives a `NavItem.route`. */
     onNavigate: (route: string) => void;
     /** Localized menu title (heading). */
-    title: string;
+    title: React.ReactNode;
     /** Localized accessibility label for the navigation landmark. */
     regionLabel: string;
     /** a11y hint for a leaf item, given its label. Defaults to the label. */
@@ -471,6 +471,18 @@ interface BrandHomeLinkProps {
 /** 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;
 
+interface BrandMarkProps {
+    source: ImageSourcePropType;
+    name: string;
+    route: string;
+    label: string;
+    onNavigate: (route: string) => void;
+    size?: number;
+    iconOnly?: boolean;
+}
+/** The app icon with its name, as a link to the app's home route. */
+declare const BrandMark: ({ source, name, route, label, onNavigate, size, iconOnly, }: BrandMarkProps) => 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
@@ -699,6 +711,13 @@ interface AppShellProps {
 }
 declare const AppShell: ({ header, nav, sidebar, collapsedSidebar, collapsedRailRange, mobileMenu, banner, width, contentPadding, chromeAlignment, gate, state, testID, children, }: AppShellProps) => React.ReactElement | null;
 
+interface NavShellCollapsedRail {
+    items?: NavItem[];
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    range?: CollapsedRailRange;
+}
+
 /**
  * NavShell — the ONE first-class navigation shell that renders a **top bar**, a
  * **side rail**, or **BOTH together**, chosen by a single `layout` prop
@@ -774,22 +793,7 @@ interface NavShellTopBar {
      */
     barTheme?: UiTheme;
 }
-/**
- * Config for the intermediate COLLAPSED (icon-only) rail — opts the side layout
- * into a THREE-tier responsive scheme (full rail → collapsed rail → drawer). When
- * present, NavShell builds a `<CollapsedRail>` and hands it to `AppShell` for the
- * tablet band; omit it and the layout stays two-tier.
- */
-interface NavShellCollapsedRail {
-    /** Items for the icon rail. Defaults to the full rail's `items`. */
-    items?: NavItem[];
-    /** Optional header slot (e.g. a home shortcut). */
-    header?: React.ReactNode;
-    /** Optional footer slot (dark-mode toggle, logout). */
-    footer?: React.ReactNode;
-    /** The `[min, max)` viewport band for the collapsed rail (default `{ min: 768, max: 1024 }`). */
-    range?: CollapsedRailRange;
-}
+
 /**
  * Config for the SIDE rail (rendered as a `Sidebar` in `AppShell`'s sidebar
  * slot). Used when `layout` is `'side'` or `'both'`.
@@ -797,6 +801,7 @@ interface NavShellCollapsedRail {
 interface NavShellSideRail {
     /** Side-rail nav entries (sections — leaf + expandable). */
     items: NavItem[];
+    brand?: React.ReactNode;
     /** Localized menu title (heading). */
     title: string;
     /** Optional header slot rendered above the items (e.g. a Home shortcut). */
@@ -1135,6 +1140,8 @@ declare const NAV_TEST_IDS: {
     /** the optional middle slot of `Topbar` (rendered only when `center` is passed). */
     readonly topbarCenter: "topbar-center";
     readonly brandHome: "nav-brand-home";
+    readonly brandMarkIcon: "nav-brand-mark-icon";
+    readonly brandMarkName: "nav-brand-mark-name";
 };
 /** Suffixes appended to an `AppShell`'s required `testID` to name its regions. */
 declare const APP_SHELL_SUFFIX: {
@@ -1358,6 +1365,9 @@ declare const navStyles: {
         borderRightWidth: number;
         height: "100%";
     };
+    sidebarBrand: {
+        marginBottom: number;
+    };
     sidebarTitle: {
         fontWeight: "700";
         marginBottom: number;
@@ -1653,4 +1663,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 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 };
+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, BrandMark, type BrandMarkProps, 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

@@ -34,6 +34,9 @@ var navStyles = reactNative.StyleSheet.create({
     borderRightWidth: 1,
     height: "100%"
   },
+  sidebarBrand: {
+    marginBottom: 12
+  },
   sidebarTitle: {
     fontWeight: "700",
     marginBottom: 12
@@ -821,7 +824,7 @@ var Sidebar = ({
         containerStyle
       ],
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityRole: "header", style: [navStyles.sidebarTitle, { color: colors.text }], children: title }),
+        typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityRole: "header", style: [navStyles.sidebarTitle, { color: colors.text }], children: title }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navStyles.sidebarBrand, children: title }),
         showInlineSearch && search !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
           SidebarSearch,
           {
@@ -884,7 +887,9 @@ var NAV_TEST_IDS = {
   pillNavMenu: "pill-nav-menu",
   /** the optional middle slot of `Topbar` (rendered only when `center` is passed). */
   topbarCenter: "topbar-center",
-  brandHome: "nav-brand-home"
+  brandHome: "nav-brand-home",
+  brandMarkIcon: "nav-brand-mark-icon",
+  brandMarkName: "nav-brand-mark-name"
 };
 var APP_SHELL_SUFFIX = {
   content: "-content",
@@ -1572,6 +1577,44 @@ var BrandHomeLink = ({ route, label, onNavigate, children }) => {
     }
   );
 };
+var DEFAULT_ICON_SIZE = 32;
+var NAME_FONT_SIZE = 16;
+var NAME_GAP = 8;
+var styles4 = reactNative.StyleSheet.create({
+  name: { flexShrink: 1, fontSize: NAME_FONT_SIZE, fontWeight: "700" },
+  row: { alignItems: "center", flexDirection: "row", gap: NAME_GAP }
+});
+var BrandMark = ({
+  source,
+  name,
+  route,
+  label,
+  onNavigate,
+  size = DEFAULT_ICON_SIZE,
+  iconOnly = false
+}) => {
+  const { theme } = uiFeedback.useUi();
+  return /* @__PURE__ */ jsxRuntime.jsx(BrandHomeLink, { label, route, onNavigate, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.row, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Image,
+      {
+        accessibilityElementsHidden: true,
+        source,
+        style: { height: size, width: size },
+        testID: NAV_TEST_IDS.brandMarkIcon
+      }
+    ),
+    iconOnly ? null : /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Text,
+      {
+        numberOfLines: 1,
+        style: [styles4.name, { color: theme.colors.text }],
+        testID: NAV_TEST_IDS.brandMarkName,
+        children: name
+      }
+    )
+  ] }) });
+};
 var Nav = (props) => {
   if (props.orientation === "vertical") {
     return /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { ...props });
@@ -1589,7 +1632,7 @@ function resolveRailMode({ viewport, hasSidebar, hasCollapsed, range }) {
   }
   return viewport >= RAIL_FULL_BREAKPOINT ? "full" : "drawer";
 }
-var styles4 = reactNative.StyleSheet.create({
+var styles5 = reactNative.StyleSheet.create({
   band: { left: 0, position: "absolute", right: 0, top: 0 }
 });
 function readBackdrop(theme) {
@@ -1612,7 +1655,7 @@ function resolveShellBackdrop(theme, viewport, contentPadding, testID) {
     reactNative.View,
     {
       pointerEvents: "none",
-      style: [styles4.band, { backgroundColor: band.color, height: contentPadding + overlap }],
+      style: [styles5.band, { backgroundColor: band.color, height: contentPadding + overlap }],
       testID: `${testID}${APP_SHELL_SUFFIX.band}`
     }
   );
@@ -1624,7 +1667,7 @@ var CARD_BORDER_WIDTH = 1;
 var CARD_TITLE_FONT_SIZE = 16;
 var CARD_MESSAGE_FONT_SIZE = 14;
 var CARD_TITLE_MARGIN_BOTTOM = 8;
-var styles5 = reactNative.StyleSheet.create({
+var styles6 = 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
@@ -1656,9 +1699,9 @@ function MessageCard({
 }) {
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
-  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 })
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles6.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.cardTitle, { color: accentColor }], children: message.titleText }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.cardMessage, { color: colors.textSecondary }], children: message.messageText })
   ] });
 }
 function useContentBody(state, children, testID) {
@@ -1670,12 +1713,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: styles5.loadingHost, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.loadingHost, children: [
     children,
     state.loading === true ? /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.View,
       {
-        style: [styles5.loadingOverlay, { backgroundColor: theme.colors.background }],
+        style: [styles6.loadingOverlay, { backgroundColor: theme.colors.background }],
         testID: `${testID}${APP_SHELL_SUFFIX.loading}`,
         children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary, size: "large" })
       }
@@ -1702,7 +1745,7 @@ var DEFAULT_DRAWER_LABELS = {
   closeLabel: "Close menu",
   closeHint: "Close the navigation menu"
 };
-var styles6 = reactNative.StyleSheet.create({
+var styles7 = 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
@@ -1737,10 +1780,10 @@ var MenuToggle = ({ label, hint, onOpen, testID }) => {
       accessibilityHint: hint,
       accessibilityLabel: label,
       ringColor: theme.palette.primary["500"],
-      style: styles6.menuToggle,
+      style: styles7.menuToggle,
       testID,
       onPress: onOpen,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
     }
   );
 };
@@ -1766,14 +1809,14 @@ var MobileDrawer = ({
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);
   }, [onClose]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.overlay, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.overlay, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles6.scrim,
+        style: styles7.scrim,
         testID: scrimTestID,
         onPress: onClose
       }
@@ -1784,7 +1827,7 @@ var MobileDrawer = ({
         ref: panelRef,
         "aria-modal": true,
         role: "dialog",
-        style: [styles6.panel, { backgroundColor: theme.colors.surface }],
+        style: [styles7.panel, { backgroundColor: theme.colors.surface }],
         testID: drawerTestID,
         children: renderTextSlot(sidebar, { color: theme.colors.text })
       }
@@ -1802,7 +1845,7 @@ function useContentMaxWidth(width) {
   return resolveContentMaxWidth(width, viewport);
 }
 var DEFAULT_CONTENT_PADDING = 24;
-var styles7 = reactNative.StyleSheet.create({
+var styles8 = 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
@@ -1864,13 +1907,13 @@ var AppShell = ({
   }, [isUnauthenticated, gate]);
   const gatePending = gate?.pending === true;
   if (isUnauthenticated) return null;
-  const columnStyle = maxWidth === "full" ? styles7.columnFull : [styles7.columnCapped, { maxWidth }];
-  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles7.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
+  const columnStyle = maxWidth === "full" ? styles8.columnFull : [styles8.columnCapped, { maxWidth }];
+  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles8.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
   const scroller = /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.ScrollView,
     {
-      contentContainerStyle: [styles7.scrollContent, { padding: contentPadding }],
-      style: styles7.scroll,
+      contentContainerStyle: [styles8.scrollContent, { padding: contentPadding }],
+      style: styles8.scroll,
       testID: `${testID}${APP_SHELL_SUFFIX.content}`,
       children: [
         look.band,
@@ -1878,7 +1921,7 @@ var AppShell = ({
       ]
     }
   );
-  const headerRegion = useDrawer ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles7.headerRow, look.chrome], testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
+  const headerRegion = useDrawer ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles8.headerRow, look.chrome], testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       MenuToggle,
       {
@@ -1888,14 +1931,14 @@ var AppShell = ({
         onOpen: openDrawer
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.headerFill, children: renderTextSlot(header, { color: look.chromeText }) })
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles8.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: [styles7.root, look.root], testID, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles8.root, look.root], testID, children: [
     headerRegion,
     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: styles7.bodyRow, children: [
+    railRegion !== null ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.bodyRow, children: [
       railRegion,
       scroller
     ] }) : scroller,
@@ -1912,7 +1955,7 @@ var AppShell = ({
     gatePending ? /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.View,
       {
-        style: [styles7.pendingOverlay, { backgroundColor: theme.colors.background }],
+        style: [styles8.pendingOverlay, { backgroundColor: theme.colors.background }],
         testID: `${testID}${APP_SHELL_SUFFIX.pending}`,
         children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary, size: "large" })
       }
@@ -2033,7 +2076,7 @@ var NavShell = ({
       renderChevron: sideRail.renderChevron,
       search: sideRail.search,
       searchQuery: sideRail.searchQuery,
-      title: sideRail.title,
+      title: sideRail.brand ?? sideRail.title,
       onNavigate,
       onSearchChange: sideRail.onSearchChange
     }
@@ -2279,7 +2322,7 @@ var KEY_DOWN = "ArrowDown";
 var KEY_UP = "ArrowUp";
 var KEY_ENTER = "Enter";
 var KEY_ESCAPE = "Escape";
-var styles8 = reactNative.StyleSheet.create({
+var styles9 = reactNative.StyleSheet.create({
   overlay: { ...reactNative.StyleSheet.absoluteFillObject, zIndex: OVERLAY_Z_INDEX, alignItems: "center" },
   scrim: { ...reactNative.StyleSheet.absoluteFillObject, backgroundColor: SCRIM_COLOR2 },
   panel: {
@@ -2308,14 +2351,14 @@ var PaletteRow = ({ item, selected, onChoose }) => {
       accessibilityLabel: item.label,
       accessibilityRole: "button",
       accessibilityState: { selected },
-      style: [styles8.row, selected ? { backgroundColor: colors.border } : void 0],
+      style: [styles9.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: 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
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles9.rowText, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.rowLabel, { color: colors.text }], children: item.label }),
+          item.hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
         ] })
       ]
     }
@@ -2355,14 +2398,14 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
     [results, selected, choose, onClose]
   );
   if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.overlay, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles9.overlay, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles8.scrim,
+        style: styles9.scrim,
         testID: `${testID ?? "command-palette"}-scrim`,
         onPress: onClose
       }
@@ -2373,7 +2416,7 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
         "aria-modal": true,
         "aria-label": labels.regionLabel,
         role: "dialog",
-        style: [styles8.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
+        style: [styles9.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
         testID: testID ?? "command-palette",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2383,14 +2426,14 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
               accessibilityLabel: labels.placeholder,
               placeholder: labels.placeholder,
               placeholderTextColor: colors.textSecondary,
-              style: [styles8.input, { color: colors.text, borderBottomColor: colors.border }],
+              style: [styles9.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: [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)) })
+          results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { keyboardShouldPersistTaps: "handled", style: styles9.list, children: results.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
         ]
       }
     )
@@ -2495,7 +2538,7 @@ var TAB_MIN_HEIGHT = 56;
 var LABEL_SIZE = 12;
 var LABEL_GAP = 2;
 var TAB_PADDING = 4;
-var styles9 = reactNative.StyleSheet.create({
+var styles10 = reactNative.StyleSheet.create({
   tab: {
     flex: 1,
     minHeight: TAB_MIN_HEIGHT,
@@ -2532,31 +2575,31 @@ var BottomTab = ({
       accessibilityLabel: item.label,
       accessibilityRole: "link",
       accessibilityState: { selected: isActive },
-      style: [styles9.tab, { opacity: feedback.opacity }],
+      style: [styles10.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: [styles9.iconWrap, { transform: [{ scale }] }], children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Animated.View, { style: [styles10.iconWrap, { transform: [{ scale }] }], children: [
           feedback.pillScale === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.View,
             {
               pointerEvents: "none",
-              style: [styles9.pill, { backgroundColor: colors.pill, transform: [{ scale: feedback.pillScale }] }, motion]
+              style: [styles10.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: [styles9.label, { color }], children: item.label })
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.label, { color }], children: item.label })
       ]
     }
   );
 };
 var DEFAULT_TEST_ID = "bottom-tab-bar";
 var SLIDER_HEIGHT = 3;
-var styles10 = reactNative.StyleSheet.create({
+var styles11 = reactNative.StyleSheet.create({
   bar: { flexDirection: "row", borderTopWidth: reactNative.StyleSheet.hairlineWidth },
   slider: { position: "absolute", top: 0, height: SLIDER_HEIGHT }
 });
@@ -2583,14 +2626,14 @@ var BottomTabBar = ({
     {
       "aria-label": regionLabel,
       role: "navigation",
-      style: [styles10.bar, { backgroundColor: theme.colors.surface, borderTopColor: theme.colors.border }, containerStyle],
+      style: [styles11.bar, { backgroundColor: theme.colors.surface, borderTopColor: theme.colors.border }, containerStyle],
       testID,
       children: [
         bar === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.View,
           {
             pointerEvents: "none",
-            style: [styles10.slider, { left: bar.left, width: bar.width, backgroundColor: primary }, webTransition("left", barMs, reducedMotion)]
+            style: [styles11.slider, { left: bar.left, width: bar.width, backgroundColor: primary }, webTransition("left", barMs, reducedMotion)]
           }
         ),
         items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -2618,6 +2661,7 @@ exports.AppShell = AppShell;
 exports.BASE_INDENT = BASE_INDENT;
 exports.BottomTabBar = BottomTabBar;
 exports.BrandHomeLink = BrandHomeLink;
+exports.BrandMark = BrandMark;
 exports.CHEVRON_ICON_SIZE = CHEVRON_ICON_SIZE;
 exports.CollapsedRail = CollapsedRail;
 exports.CommandPalette = CommandPalette;