@dloizides/ui-nav 1.6.1 → 1.8.0

package/dist/index.js

@@ -2,10 +2,15 @@
 
 var reactNative = require('react-native');
 var uiFeedback = require('@dloizides/ui-feedback');
-var react = require('react');
+var React5 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var uiLayout = require('@dloizides/ui-layout');
 var authWeb = require('@dloizides/auth-web');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React5__default = /*#__PURE__*/_interopDefault(React5);
+
 // src/Sidebar.tsx
 
 // src/isRouteActive.ts
@@ -14,6 +19,7 @@ function isRouteActive(pathname, route) {
   return pathname === route || pathname.startsWith(`${route}/`);
 }
 var ACTIVE_BORDER_RADIUS = 4;
+var NAV_LINK_GAP = 4;
 var navStyles = reactNative.StyleSheet.create({
   // --- Sidebar ---
   sidebarContainer: {
@@ -96,22 +102,26 @@ var navBarStyles = reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   toggleGlyph: { fontSize: 20, fontWeight: "700" },
-  // Expanded links live inside a horizontal ScrollView so the bar stays ONE ROW no matter how many
-  // items an app passes: they never wrap onto a second line — any overflow scrolls instead, with the
-  // brand (left) and right slot pinned. `linksScroll` is the ScrollView's own box (a shrinkable,
-  // growable flex child that may collapse to 0 and scroll); `links` is its non-wrapping content row.
-  linksScroll: {
+  // Expanded links live on ONE ROW that never wraps: it is a shrinkable/growable flex child that
+  // fills the space between the pinned brand (left) and right slot, and CLIPS overflow. A measure
+  // pass (priority+) then keeps only the leading items that fit inline and collapses the rest behind
+  // the "More ▾" overflow trigger — so no item is ever cut off; the surplus moves into a dropdown.
+  // `overflow:'hidden'` only masks the single unmeasured first frame before the fit resolves.
+  linksRow: {
     flexGrow: 1,
     flexShrink: 1,
-    minWidth: 0
-  },
-  links: {
+    minWidth: 0,
     flexDirection: "row",
     alignItems: "center",
     flexWrap: "nowrap",
-    columnGap: 4,
-    rowGap: 4
+    columnGap: NAV_LINK_GAP,
+    overflow: "hidden"
   },
+  // Each inline link + the overflow trigger sit in a natural-width cell that never shrinks, so their
+  // measured widths are their true content widths (what the priority+ fit computation reasons about).
+  linkCell: { flexShrink: 0 },
+  overflowTrigger: { columnGap: 4 },
+  overflowChevron: { fontSize: 12, fontWeight: "700" },
   // Collapsed (below breakpoint): links drop onto their own full-width line,
   // stacked vertically — mirrors the v1 `.gn-links` responsive behaviour.
   linksStacked: {
@@ -151,6 +161,86 @@ var navBarStyles = reactNative.StyleSheet.create({
     columnGap: 8
   }
 });
+var pillNavStyles = reactNative.StyleSheet.create({
+  // Cross-nav pill row (kefi coral dashboard switcher): fully-rounded pills, wraps.
+  container: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    columnGap: 8,
+    rowGap: 8,
+    paddingVertical: 8
+  },
+  pill: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 999,
+    minHeight: 36,
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: 6,
+    justifyContent: "center"
+  },
+  pillText: { fontSize: 14, fontWeight: "600" }
+});
+var darkModeStyles = reactNative.StyleSheet.create({
+  // Segmented Light / Dark / System control.
+  segmentRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: 8,
+    overflow: "hidden",
+    alignSelf: "flex-start"
+  },
+  segment: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    minHeight: 36,
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: 6,
+    justifyContent: "center"
+  },
+  segmentText: { fontSize: 13, fontWeight: "600" },
+  // Cycle-button variant.
+  cycle: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    minHeight: 44,
+    minWidth: 44,
+    borderRadius: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: 6,
+    justifyContent: "center"
+  },
+  cycleText: { fontSize: 13, fontWeight: "600" }
+});
+var collapsedRailStyles = reactNative.StyleSheet.create({
+  // Intermediate (tablet) icon-only rail: a narrow vertical strip of icon buttons.
+  container: {
+    width: 64,
+    paddingTop: 16,
+    paddingHorizontal: 8,
+    borderRightWidth: 1,
+    height: "100%",
+    alignItems: "center"
+  },
+  // Each item is a ≥44×44 centred touch target with a rounded active/hover pill.
+  item: {
+    width: 48,
+    height: 48,
+    marginVertical: 4,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // Glyph fallback (the label's first character) when an item has no renderIcon.
+  glyph: { fontSize: 18, fontWeight: "700" },
+  spacer: { flex: 1 },
+  slot: { alignItems: "center" }
+});
 var expandableStyles = reactNative.StyleSheet.create({
   childItem: {
     borderRadius: 4,
@@ -209,21 +299,21 @@ var NavExpandableItem = ({
   renderChevron,
   depth = 0
 }) => {
-  const [expanded, setExpanded] = react.useState(false);
-  const [focused, setFocused] = react.useState(false);
+  const [expanded, setExpanded] = React5.useState(false);
+  const [focused, setFocused] = React5.useState(false);
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
-  const toggle = react.useCallback(() => setExpanded((v) => !v), []);
+  const toggle = React5.useCallback(() => setExpanded((v) => !v), []);
   const indent = depth * BASE_INDENT;
   const hasChildren = Array.isArray(item.children) && item.children.length > 0;
   const isActive = isRouteActive(pathname, item.route);
-  const activeItemStyle = react.useMemo(
+  const activeItemStyle = React5.useMemo(
     () => ({ backgroundColor: colors.border, borderRadius: ACTIVE_BORDER_RADIUS }),
     [colors.border]
   );
-  const paddingStyle = react.useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);
-  const headerPaddingStyle = react.useMemo(() => ({ paddingLeft: indent }), [indent]);
+  const paddingStyle = React5.useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);
+  const headerPaddingStyle = React5.useMemo(() => ({ paddingLeft: indent }), [indent]);
   if (!hasChildren)
     return /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.TouchableOpacity,
@@ -357,7 +447,9 @@ var NAV_TEST_IDS = {
   /** responsive hamburger toggle in the horizontal NavBar (shown below the breakpoint). */
   navBarToggle: "navbar-toggle",
   /** links container in the horizontal NavBar. */
-  navBarLinks: "navbar-links"
+  navBarLinks: "navbar-links",
+  /** the "More ▾" priority+ overflow trigger in the horizontal NavBar (shown when items spill). */
+  navBarOverflow: "navbar-overflow"
 };
 var APP_SHELL_SUFFIX = {
   content: "-content",
@@ -365,6 +457,8 @@ var APP_SHELL_SUFFIX = {
   nav: "-nav",
   /** The persistent left rail of the back-office layout (only when `sidebar` is supplied). */
   sidebar: "-sidebar",
+  /** The intermediate persistent COLLAPSED (icon-only) rail (3-tier layout, tablet band). */
+  collapsedSidebar: "-collapsed-sidebar",
   /** Mobile hamburger that opens the nav drawer (back-office layout, below the breakpoint). */
   menuToggle: "-menu-toggle",
   /** The mobile nav drawer panel (holds the `sidebar` slot when opened on a narrow viewport). */
@@ -387,7 +481,7 @@ var FocusableTouchable = ({
   testID,
   children
 }) => {
-  const [focused, setFocused] = react.useState(false);
+  const [focused, setFocused] = React5.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Pressable,
     {
@@ -539,8 +633,8 @@ var NavBarLink = ({
   navigateHint,
   onPress
 }) => {
-  const [hovered, setHovered] = react.useState(false);
-  const [focused, setFocused] = react.useState(false);
+  const [hovered, setHovered] = React5.useState(false);
+  const [focused, setFocused] = React5.useState(false);
   const isHovered = hovered && !isActive;
   const textColor = isActive ? TEXT_ON_PRIMARY2 : isHovered ? colors.hoverText : colors.rest;
   const pillStyle = isActive ? { backgroundColor: colors.activeBg } : isHovered ? { backgroundColor: colors.hoverBg } : void 0;
@@ -572,14 +666,116 @@ var NavBarLink = ({
     }
   );
 };
+var TEXT_ON_PRIMARY3 = "#ffffff";
+var NO_ACTIVE_ROUTE = "";
+var NavOverflowMenu = ({
+  items,
+  pathname,
+  onNavigate,
+  colors,
+  label,
+  hint,
+  testID,
+  variant
+}) => {
+  const options = React5.useMemo(() => items.map((item) => ({ label: item.label, value: item.route })), [items]);
+  const activeRoute = React5.useMemo(
+    () => items.find((item) => isRouteActive(pathname, item.route))?.route ?? NO_ACTIVE_ROUTE,
+    [items, pathname]
+  );
+  const optionTestID = React5.useMemo(() => {
+    const byRoute = new Map(items.map((item) => [item.route, item.testID ?? item.key]));
+    return (route) => byRoute.get(route) ?? `${testID}-option-${route}`;
+  }, [items, testID]);
+  const hasActive = activeRoute !== NO_ACTIVE_ROUTE;
+  const textColor = hasActive ? TEXT_ON_PRIMARY3 : colors.rest;
+  const pillStyle = hasActive ? { backgroundColor: colors.activeBg } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    uiLayout.ModalDropdown,
+    {
+      accessibilityHint: hint,
+      accessibilityLabel: label,
+      optionTestID,
+      options,
+      testID,
+      value: activeRoute,
+      variant,
+      onChange: onNavigate,
+      renderTrigger: ({ isOpen }) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [navBarStyles.link, navBarStyles.overflowTrigger, pillStyle], children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navBarStyles.linkText, { color: textColor }], children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navBarStyles.overflowChevron, { color: textColor }], children: isOpen ? "\u25B4" : "\u25BE" })
+      ] })
+    }
+  );
+};
+
+// src/computeVisibleCount.ts
+function sum(values) {
+  return values.reduce((acc, value) => acc + value, 0);
+}
+function computeVisibleCount({ availableWidth, itemWidths, moreWidth, gap }) {
+  const total = itemWidths.length;
+  if (total === 0) return 0;
+  if (availableWidth <= 0 || itemWidths.some((width) => width <= 0)) return total;
+  const fullRowWidth = sum(itemWidths) + gap * (total - 1);
+  if (fullRowWidth <= availableWidth) return total;
+  const reservedForMore = moreWidth + gap;
+  let used = 0;
+  let count = 0;
+  for (let index = 0; index < total; index += 1) {
+    const width = itemWidths[index] ?? 0;
+    const withGap = used + (count > 0 ? gap : 0) + width;
+    if (withGap + reservedForMore > availableWidth) break;
+    used = withGap;
+    count += 1;
+  }
+  return count;
+}
+
+// src/useNavOverflow.ts
+function resizeWidthBuffer(previous, count) {
+  const next = new Array(count).fill(0);
+  const shared = Math.min(previous.length, count);
+  for (let index = 0; index < shared; index += 1) next[index] = previous[index] ?? 0;
+  return next;
+}
+function useNavOverflow(itemCount, gap) {
+  const [availableWidth, setAvailableWidthState] = React5.useState(0);
+  const [moreWidth, setMoreWidthState] = React5.useState(0);
+  const [itemWidths, setItemWidths] = React5.useState(() => new Array(itemCount).fill(0));
+  React5.useEffect(() => {
+    setItemWidths((previous) => previous.length === itemCount ? previous : resizeWidthBuffer(previous, itemCount));
+  }, [itemCount]);
+  const setItemWidth = React5.useCallback((index, width) => {
+    setItemWidths((previous) => {
+      if (index < 0 || index >= previous.length || previous[index] === width) return previous;
+      const next = previous.slice();
+      next[index] = width;
+      return next;
+    });
+  }, []);
+  const setAvailableWidth = React5.useCallback(
+    (width) => setAvailableWidthState((previous) => previous === width ? previous : width),
+    []
+  );
+  const setMoreWidth = React5.useCallback(
+    (width) => setMoreWidthState((previous) => previous === width ? previous : width),
+    []
+  );
+  const visibleCount = React5.useMemo(
+    () => computeVisibleCount({ availableWidth, itemWidths, moreWidth, gap }),
+    [availableWidth, itemWidths, moreWidth, gap]
+  );
+  return { visibleCount, setAvailableWidth, setItemWidth, setMoreWidth };
+}
 var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
 function getReducedMotionQuery() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return void 0;
   return window.matchMedia(REDUCED_MOTION_QUERY);
 }
 function useReducedMotion() {
-  const [reduced, setReduced] = react.useState(() => getReducedMotionQuery()?.matches ?? false);
-  react.useEffect(() => {
+  const [reduced, setReduced] = React5.useState(() => getReducedMotionQuery()?.matches ?? false);
+  React5.useEffect(() => {
     const mql = getReducedMotionQuery();
     if (mql === void 0 || mql.addEventListener === void 0) return void 0;
     const onChange = () => setReduced(mql.matches);
@@ -596,7 +792,7 @@ var MENU_GLYPH = "\u2630";
 function ariaControlsProps(id) {
   return { "aria-controls": id };
 }
-var NavBar = ({
+var NavBarInner = ({
   items,
   pathname,
   onNavigate,
@@ -608,6 +804,8 @@ var NavBar = ({
   menuHint = "",
   renderMenuIcon,
   collapseBelow = DEFAULT_COLLAPSE_BELOW,
+  overflowLabel = "More",
+  overflowHint = "",
   containerStyle
 }) => {
   const { theme } = uiFeedback.useUi();
@@ -615,19 +813,20 @@ var NavBar = ({
   const primaryColor = theme.palette.primary["500"];
   const { width } = reactNative.useWindowDimensions();
   const reducedMotion = useReducedMotion();
-  const [open, setOpen] = react.useState(false);
-  const [toggleFocused, setToggleFocused] = react.useState(false);
+  const [open, setOpen] = React5.useState(false);
+  const [toggleFocused, setToggleFocused] = React5.useState(false);
+  const { visibleCount, setAvailableWidth, setItemWidth, setMoreWidth } = useNavOverflow(items.length, NAV_LINK_GAP);
   const collapsed = width < collapseBelow;
   const showLinks = !collapsed || open;
-  const toggleMenu = react.useCallback(() => setOpen((v) => !v), []);
-  const handlePress = react.useCallback(
+  const toggleMenu = React5.useCallback(() => setOpen((v) => !v), []);
+  const handlePress = React5.useCallback(
     (route) => {
       setOpen(false);
       onNavigate(route);
     },
     [onNavigate]
   );
-  const linkColors = react.useMemo(
+  const linkColors = React5.useMemo(
     () => ({
       rest: colors.textSecondary,
       hoverText: colors.text,
@@ -668,7 +867,7 @@ var NavBar = ({
           }
         ) : null,
         showLinks ? (() => {
-          const links = items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          const renderLink = (item) => /* @__PURE__ */ jsxRuntime.jsx(
             NavBarLink,
             {
               collapsed,
@@ -679,19 +878,50 @@ var NavBar = ({
               navigateHint,
               reducedMotion,
               onPress: handlePress
-            },
-            item.key
-          ));
-          return collapsed ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { nativeID: LINKS_REGION_ID, style: navBarStyles.linksStacked, testID: NAV_TEST_IDS.navBarLinks, children: links }) : /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.ScrollView,
+            }
+          );
+          if (collapsed) {
+            return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { nativeID: LINKS_REGION_ID, style: navBarStyles.linksStacked, testID: NAV_TEST_IDS.navBarLinks, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(React5__default.default.Fragment, { children: renderLink(item) }, item.key)) });
+          }
+          const visibleItems = items.slice(0, visibleCount);
+          const overflowItems = items.slice(visibleCount);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            reactNative.View,
             {
-              horizontal: true,
-              showsHorizontalScrollIndicator: false,
               nativeID: LINKS_REGION_ID,
-              style: navBarStyles.linksScroll,
-              contentContainerStyle: navBarStyles.links,
+              style: navBarStyles.linksRow,
               testID: NAV_TEST_IDS.navBarLinks,
-              children: links
+              onLayout: (event) => setAvailableWidth(event.nativeEvent.layout.width),
+              children: [
+                visibleItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.View,
+                  {
+                    style: navBarStyles.linkCell,
+                    onLayout: (event) => setItemWidth(index, event.nativeEvent.layout.width),
+                    children: renderLink(item)
+                  },
+                  item.key
+                )),
+                overflowItems.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.View,
+                  {
+                    style: navBarStyles.linkCell,
+                    onLayout: (event) => setMoreWidth(event.nativeEvent.layout.width),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      NavOverflowMenu,
+                      {
+                        colors: linkColors,
+                        hint: overflowHint,
+                        items: overflowItems,
+                        label: overflowLabel,
+                        pathname,
+                        testID: NAV_TEST_IDS.navBarOverflow,
+                        onNavigate: handlePress
+                      }
+                    )
+                  }
+                ) : null
+              ]
             }
           );
         })() : null,
@@ -700,7 +930,57 @@ var NavBar = ({
     }
   );
 };
-var MOBILE_BREAKPOINT = 768;
+var NavBar = ({ barTheme, ...props }) => {
+  const { t, navigate } = uiFeedback.useUi();
+  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 Nav = (props) => {
+  if (props.orientation === "vertical") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { ...props });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(NavBar, { ...props });
+};
+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 styles = reactNative.StyleSheet.create({
+  centerFill: { flex: 1, justifyContent: "center", alignItems: "center" },
+  card: {
+    padding: CARD_PADDING,
+    borderRadius: CARD_BORDER_RADIUS,
+    borderWidth: CARD_BORDER_WIDTH
+  },
+  cardTitle: { fontSize: CARD_TITLE_FONT_SIZE, fontWeight: "700", marginBottom: CARD_TITLE_MARGIN_BOTTOM },
+  cardMessage: { fontSize: CARD_MESSAGE_FONT_SIZE }
+});
+function MessageCard({
+  message,
+  accentColor,
+  testID
+}) {
+  const { theme } = uiFeedback.useUi();
+  const colors = theme.colors;
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.cardTitle, { color: accentColor }], children: message.titleText }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.cardMessage, { color: colors.textSecondary }], children: message.messageText })
+  ] });
+}
+function useContentBody(state, children, testID) {
+  const { theme } = uiFeedback.useUi();
+  const primary = theme.palette.primary["500"];
+  const errorColor = theme.semantic.error["500"];
+  if (state?.forbidden)
+    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}` });
+  if (state?.loading === true)
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.centerFill, testID: `${testID}${APP_SHELL_SUFFIX.loading}`, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary, size: "large" }) });
+  return children;
+}
 var SCRIM_COLOR = "rgba(0, 0, 0, 0.5)";
 var MENU_GLYPH2 = "\u2630";
 var MENU_MIN_TARGET = 44;
@@ -714,7 +994,7 @@ var DEFAULT_DRAWER_LABELS = {
   closeLabel: "Close menu",
   closeHint: "Close the navigation menu"
 };
-var styles = reactNative.StyleSheet.create({
+var styles2 = reactNative.StyleSheet.create({
   overlay: { ...reactNative.StyleSheet.absoluteFillObject, zIndex: DRAWER_Z_INDEX },
   scrim: { ...reactNative.StyleSheet.absoluteFillObject, backgroundColor: SCRIM_COLOR },
   panel: { position: "absolute", top: 0, bottom: 0, left: 0 },
@@ -735,10 +1015,10 @@ var MenuToggle = ({ label, hint, onOpen, testID }) => {
       accessibilityHint: hint,
       accessibilityLabel: label,
       ringColor: theme.palette.primary["500"],
-      style: styles.menuToggle,
+      style: styles2.menuToggle,
       testID,
       onPress: onOpen,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
     }
   );
 };
@@ -749,8 +1029,8 @@ var MobileDrawer = ({
   drawerTestID,
   scrimTestID
 }) => {
-  const panelRef = react.useRef(null);
-  react.useEffect(() => {
+  const panelRef = React5.useRef(null);
+  React5.useEffect(() => {
     const node = panelRef.current;
     if (node === null || typeof node.addEventListener !== "function") return void 0;
     const handleClick = (event) => {
@@ -761,21 +1041,34 @@ var MobileDrawer = ({
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);
   }, [onClose]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.overlay, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.overlay, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles.scrim,
+        style: styles2.scrim,
         testID: scrimTestID,
         onPress: onClose
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { ref: panelRef, "aria-modal": true, role: "dialog", style: styles.panel, testID: drawerTestID, children: sidebar })
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { ref: panelRef, "aria-modal": true, role: "dialog", style: styles2.panel, testID: drawerTestID, children: sidebar })
   ] });
 };
+
+// src/railMode.ts
+var RAIL_FULL_BREAKPOINT = 768;
+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;
@@ -787,13 +1080,7 @@ function useContentMaxWidth(width) {
   return resolveContentMaxWidth(width, viewport);
 }
 var DEFAULT_CONTENT_PADDING = 24;
-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 styles2 = reactNative.StyleSheet.create({
+var styles3 = reactNative.StyleSheet.create({
   root: { flex: 1 },
   centerFill: { flex: 1, justifyContent: "center", alignItems: "center" },
   scroll: { flex: 1 },
@@ -807,50 +1094,14 @@ var styles2 = reactNative.StyleSheet.create({
   columnCapped: { flex: 1, width: "100%", alignSelf: "center" },
   // Non-flex variant used to cap the nav strip's inner content to the content
   // column so the nav aligns with the page content instead of running full-bleed.
-  chromeCapped: { width: "100%", alignSelf: "center" },
-  card: {
-    padding: CARD_PADDING,
-    borderRadius: CARD_BORDER_RADIUS,
-    borderWidth: CARD_BORDER_WIDTH
-  },
-  cardTitle: { fontSize: CARD_TITLE_FONT_SIZE, fontWeight: "700", marginBottom: CARD_TITLE_MARGIN_BOTTOM },
-  cardMessage: { fontSize: CARD_MESSAGE_FONT_SIZE }
+  chromeCapped: { width: "100%", alignSelf: "center" }
 });
-function MessageCard({
-  message,
-  accentColor,
-  testID
-}) {
-  const { theme } = uiFeedback.useUi();
-  const colors = theme.colors;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactNative.View,
-    {
-      style: [styles2.card, { backgroundColor: colors.surface, borderColor: accentColor }],
-      testID,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.cardTitle, { color: accentColor }], children: message.titleText }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.cardMessage, { color: colors.textSecondary }], children: message.messageText })
-      ]
-    }
-  );
-}
-function useContentBody(state, children, testID) {
-  const { theme } = uiFeedback.useUi();
-  const primary = theme.palette.primary["500"];
-  const errorColor = theme.semantic.error["500"];
-  if (state?.forbidden)
-    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}` });
-  if (state?.loading === true)
-    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.centerFill, testID: `${testID}${APP_SHELL_SUFFIX.loading}`, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary, size: "large" }) });
-  return children;
-}
 var AppShell = ({
   header,
   nav,
   sidebar,
+  collapsedSidebar,
+  collapsedRailRange,
   mobileMenu,
   banner,
   width = "full",
@@ -866,34 +1117,40 @@ var AppShell = ({
   const maxWidth = useContentMaxWidth(width);
   const body = useContentBody(state, children, testID);
   const { width: viewportWidth } = reactNative.useWindowDimensions();
-  const isNarrow = viewportWidth < MOBILE_BREAKPOINT;
-  const useDrawer = sidebar !== void 0 && isNarrow;
-  const [drawerOpen, setDrawerOpen] = react.useState(false);
-  const openDrawer = react.useCallback(() => setDrawerOpen(true), []);
-  const closeDrawer = react.useCallback(() => setDrawerOpen(false), []);
-  react.useEffect(() => {
-    if (!isNarrow && drawerOpen) setDrawerOpen(false);
-  }, [isNarrow, drawerOpen]);
+  const railRange = collapsedRailRange ?? { min: RAIL_FULL_BREAKPOINT, max: DEFAULT_COLLAPSED_RAIL_MAX };
+  const railMode = resolveRailMode({
+    viewport: viewportWidth,
+    hasSidebar: sidebar !== void 0,
+    hasCollapsed: collapsedSidebar !== void 0,
+    range: railRange
+  });
+  const useDrawer = railMode === "drawer";
+  const [drawerOpen, setDrawerOpen] = React5.useState(false);
+  const openDrawer = React5.useCallback(() => setDrawerOpen(true), []);
+  const closeDrawer = React5.useCallback(() => setDrawerOpen(false), []);
+  React5.useEffect(() => {
+    if (!useDrawer && drawerOpen) setDrawerOpen(false);
+  }, [useDrawer, drawerOpen]);
   const drawerLabels = { ...DEFAULT_DRAWER_LABELS, ...mobileMenu };
   const isUnauthenticated = gate !== void 0 && !gate.pending && !gate.authenticated;
-  react.useEffect(() => {
+  React5.useEffect(() => {
     if (isUnauthenticated && gate !== void 0) gate.onRedirect();
   }, [isUnauthenticated, gate]);
   if (gate?.pending === true)
-    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.root, styles2.centerFill, { backgroundColor: theme.colors.background }], testID: `${testID}${APP_SHELL_SUFFIX.pending}`, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary, size: "large" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.root, styles3.centerFill, { backgroundColor: theme.colors.background }], testID: `${testID}${APP_SHELL_SUFFIX.pending}`, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary, size: "large" }) });
   if (isUnauthenticated) return null;
-  const columnStyle = maxWidth === "full" ? styles2.columnFull : [styles2.columnCapped, { maxWidth }];
-  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles2.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
+  const columnStyle = maxWidth === "full" ? styles3.columnFull : [styles3.columnCapped, { maxWidth }];
+  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles3.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
   const scroller = /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.ScrollView,
     {
-      contentContainerStyle: [styles2.scrollContent, { padding: contentPadding }],
-      style: styles2.scroll,
+      contentContainerStyle: [styles3.scrollContent, { padding: contentPadding }],
+      style: styles3.scroll,
       testID: `${testID}${APP_SHELL_SUFFIX.content}`,
       children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: columnStyle, children: body })
     }
   );
-  const headerRegion = useDrawer ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.headerRow, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
+  const headerRegion = useDrawer ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.headerRow, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       MenuToggle,
       {
@@ -903,15 +1160,15 @@ var AppShell = ({
         onOpen: openDrawer
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.headerFill, children: header })
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.headerFill, children: header })
   ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: header });
-  const showRail = sidebar !== void 0 && !isNarrow;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles2.root, { backgroundColor: theme.colors.background }], testID, children: [
+  const railRegion = railMode === "full" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.sidebar}`, children: sidebar }) : railMode === "collapsed" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.collapsedSidebar}`, children: collapsedSidebar }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles3.root, { backgroundColor: theme.colors.background }], 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: nav }) : nav }) : null,
     banner !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.banner}`, children: banner }) : null,
-    showRail ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.bodyRow, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.sidebar}`, children: sidebar }),
+    railRegion !== null ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.bodyRow, children: [
+      railRegion,
       scroller
     ] }) : scroller,
     useDrawer && drawerOpen ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -926,6 +1183,261 @@ var AppShell = ({
     ) : null
   ] });
 };
+var COLLAPSED_ICON_SIZE = 22;
+function glyphFor(label) {
+  return label.trim().charAt(0).toUpperCase();
+}
+var CollapsedRail = ({
+  items,
+  pathname,
+  onNavigate,
+  regionLabel,
+  navigateHint = (label) => label,
+  header,
+  footer,
+  containerStyle
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const colors = theme.colors;
+  const primaryColor = theme.palette.primary["500"];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      accessibilityRole: "none",
+      "aria-label": regionLabel,
+      role: "navigation",
+      style: [
+        collapsedRailStyles.container,
+        { backgroundColor: colors.surface, borderRightColor: colors.border },
+        containerStyle
+      ],
+      children: [
+        header !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsedRailStyles.slot, children: header }) : null,
+        items.map((item) => {
+          const active = isRouteActive(pathname, item.route);
+          const iconColor = active ? primaryColor : colors.textSecondary;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            FocusableTouchable,
+            {
+              accessibilityHint: navigateHint(item.label),
+              accessibilityLabel: item.label,
+              ringColor: primaryColor,
+              style: [collapsedRailStyles.item, active ? { backgroundColor: colors.border } : void 0],
+              testID: item.testID ?? item.key,
+              onPress: () => onNavigate(item.route),
+              children: typeof item.renderIcon === "function" ? item.renderIcon(iconColor, COLLAPSED_ICON_SIZE) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [collapsedRailStyles.glyph, { color: iconColor }], children: glyphFor(item.label) })
+            },
+            item.key
+          );
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsedRailStyles.spacer }),
+        footer !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsedRailStyles.slot, children: footer }) : null
+      ]
+    }
+  );
+};
+function wantsTopBar(layout, hasHeader, hasTopBar) {
+  return layout === "top" || layout === "both" || hasHeader || layout === "side" && hasTopBar;
+}
+function wantsSideRail(layout, hasSideRail) {
+  return (layout === "side" || layout === "both") && hasSideRail;
+}
+var NavShell = ({
+  layout,
+  pathname,
+  onNavigate,
+  regionLabel,
+  navigateHint,
+  topBar,
+  header,
+  sideRail,
+  children,
+  collapsedSidebar: collapsedSidebarProp,
+  collapsedRailRange: collapsedRailRangeProp,
+  ...shellProps
+}) => {
+  const showTopBar = wantsTopBar(layout, header !== void 0, topBar !== void 0);
+  const showSideRail = wantsSideRail(layout, sideRail !== void 0);
+  const headerNode = header !== void 0 ? header : showTopBar && topBar !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+    NavBar,
+    {
+      barTheme: topBar.barTheme,
+      brand: topBar.brand,
+      collapseBelow: topBar.collapseBelow,
+      containerStyle: topBar.containerStyle,
+      items: topBar.items,
+      menuHint: topBar.menuHint,
+      menuLabel: topBar.menuLabel,
+      navigateHint,
+      overflowHint: topBar.overflowHint,
+      overflowLabel: topBar.overflowLabel,
+      pathname,
+      regionLabel,
+      renderMenuIcon: topBar.renderMenuIcon,
+      right: topBar.right,
+      onNavigate
+    }
+  ) : null;
+  const sidebarNode = showSideRail && sideRail !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+    Sidebar,
+    {
+      collapseHint: sideRail.collapseHint,
+      containerStyle: sideRail.containerStyle,
+      expandHint: sideRail.expandHint,
+      footer: sideRail.footer,
+      header: sideRail.header,
+      items: sideRail.items,
+      navigateHint,
+      pathname,
+      regionLabel,
+      renderChevron: sideRail.renderChevron,
+      title: sideRail.title,
+      onNavigate
+    }
+  ) : void 0;
+  const collapsedCfg = showSideRail ? sideRail?.collapsed : void 0;
+  const collapsedNode = collapsedCfg !== void 0 && sideRail !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+    CollapsedRail,
+    {
+      footer: collapsedCfg.footer,
+      header: collapsedCfg.header,
+      items: collapsedCfg.items ?? sideRail.items,
+      navigateHint,
+      pathname,
+      regionLabel,
+      onNavigate
+    }
+  ) : collapsedSidebarProp;
+  const collapsedRange = collapsedCfg?.range ?? collapsedRailRangeProp;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AppShell,
+    {
+      ...shellProps,
+      collapsedRailRange: collapsedRange,
+      collapsedSidebar: collapsedNode,
+      header: headerNode,
+      sidebar: sidebarNode,
+      children
+    }
+  );
+};
+var TEXT_ON_PRIMARY4 = "#ffffff";
+var DEFAULT_MIN_ITEMS = 1;
+var PillNav = ({
+  items,
+  pathname,
+  onNavigate,
+  regionLabel,
+  navigateHint = (label) => label,
+  minItems = DEFAULT_MIN_ITEMS,
+  containerStyle
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const colors = theme.colors;
+  const primaryColor = theme.palette.primary["500"];
+  if (items.length < minItems) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      accessibilityRole: "none",
+      "aria-label": regionLabel,
+      role: "navigation",
+      style: [pillNavStyles.container, containerStyle],
+      children: items.map((item) => {
+        const active = isRouteActive(pathname, item.route);
+        const textColor = active ? TEXT_ON_PRIMARY4 : colors.textSecondary;
+        const pillStyle = active ? { backgroundColor: primaryColor } : { backgroundColor: colors.surfaceElevated };
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          FocusableTouchable,
+          {
+            accessibilityHint: navigateHint(item.label),
+            accessibilityLabel: item.label,
+            accessibilityRole: "link",
+            ringColor: primaryColor,
+            style: [pillNavStyles.pill, pillStyle],
+            testID: item.testID ?? item.key,
+            onPress: () => onNavigate(item.route),
+            children: [
+              typeof item.renderIcon === "function" ? item.renderIcon(textColor, NAV_ICON_SIZE) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [pillNavStyles.pillText, { color: textColor }], children: item.label })
+            ]
+          },
+          item.key
+        );
+      })
+    }
+  );
+};
+var TEXT_ON_PRIMARY5 = "#ffffff";
+var DARK_MODE_ICON_SIZE = 16;
+var DarkModeControl = ({
+  value,
+  options,
+  onChange,
+  regionLabel,
+  variant = "segmented",
+  testID,
+  containerStyle
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const colors = theme.colors;
+  const primaryColor = theme.palette.primary["500"];
+  const currentIndex = options.findIndex((option) => option.value === value);
+  const current = currentIndex >= 0 ? options[currentIndex] : options[0];
+  const advance = React5.useCallback(() => {
+    if (options.length === 0) return;
+    const from = currentIndex >= 0 ? currentIndex : 0;
+    const next = options[(from + 1) % options.length];
+    if (next !== void 0) onChange(next.value);
+  }, [options, currentIndex, onChange]);
+  if (options.length === 0 || current === void 0) return null;
+  if (variant === "cycle") {
+    const iconColor = colors.text;
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { "aria-label": regionLabel, style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      FocusableTouchable,
+      {
+        accessibilityHint: current.hint,
+        accessibilityLabel: current.label,
+        ringColor: primaryColor,
+        style: [darkModeStyles.cycle, { backgroundColor: colors.surfaceElevated }],
+        testID,
+        onPress: advance,
+        children: [
+          typeof current.renderIcon === "function" ? current.renderIcon(iconColor, DARK_MODE_ICON_SIZE) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [darkModeStyles.cycleText, { color: colors.text }], children: current.label })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      "aria-label": regionLabel,
+      role: "group",
+      style: [darkModeStyles.segmentRow, { borderColor: colors.border }, containerStyle],
+      children: options.map((option) => {
+        const active = option.value === value;
+        const textColor = active ? TEXT_ON_PRIMARY5 : colors.textSecondary;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          FocusableTouchable,
+          {
+            accessibilityHint: option.hint,
+            accessibilityLabel: option.label,
+            ringColor: primaryColor,
+            style: [darkModeStyles.segment, active ? { backgroundColor: primaryColor } : void 0],
+            testID: testID !== void 0 ? `${testID}-${option.value}` : void 0,
+            onPress: () => onChange(option.value),
+            children: [
+              typeof option.renderIcon === "function" ? option.renderIcon(textColor, DARK_MODE_ICON_SIZE) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [darkModeStyles.segmentText, { color: textColor }], children: option.label })
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+};
 function roleRoutesToNavItems(routes, translate) {
   return routes.map((entry) => ({
     key: entry.role,
@@ -942,17 +1454,30 @@ exports.APP_SHELL_SUFFIX = APP_SHELL_SUFFIX;
 exports.AppShell = AppShell;
 exports.BASE_INDENT = BASE_INDENT;
 exports.CHEVRON_ICON_SIZE = CHEVRON_ICON_SIZE;
+exports.CollapsedRail = CollapsedRail;
+exports.DEFAULT_COLLAPSED_RAIL_MAX = DEFAULT_COLLAPSED_RAIL_MAX;
+exports.DarkModeControl = DarkModeControl;
 exports.NAV_ICON_SIZE = NAV_ICON_SIZE;
+exports.NAV_LINK_GAP = NAV_LINK_GAP;
 exports.NAV_TEST_IDS = NAV_TEST_IDS;
+exports.Nav = Nav;
 exports.NavBar = NavBar;
 exports.NavExpandableItem = NavExpandableItem;
+exports.NavOverflowMenu = NavOverflowMenu;
+exports.NavShell = NavShell;
+exports.PillNav = PillNav;
+exports.RAIL_FULL_BREAKPOINT = RAIL_FULL_BREAKPOINT;
 exports.Sidebar = Sidebar;
 exports.Topbar = Topbar;
 exports.accessibleNavItems = accessibleNavItems;
+exports.collapsedRailStyles = collapsedRailStyles;
+exports.darkModeStyles = darkModeStyles;
 exports.expandableStyles = expandableStyles;
 exports.isRouteActive = isRouteActive;
 exports.navStyles = navStyles;
+exports.pillNavStyles = pillNavStyles;
 exports.resolveContentMaxWidth = resolveContentMaxWidth;
+exports.resolveRailMode = resolveRailMode;
 exports.roleRoutesToNavItems = roleRoutesToNavItems;
 exports.useContentMaxWidth = useContentMaxWidth;
 //# sourceMappingURL=index.js.map