@dloizides/ui-nav 1.16.0 → 1.17.0

package/dist/index.mjs

@@ -1,12 +1,93 @@
-import React3, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
-import { StyleSheet, Platform, Text, TouchableOpacity, View, TextInput, Pressable, useWindowDimensions, ActivityIndicator, ScrollView } from 'react-native';
+import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import { Platform, StyleSheet, Pressable, Text, View, TextInput, useWindowDimensions, ActivityIndicator, ScrollView } from 'react-native';
 import { useUi, UiProvider } from '@dloizides/ui-feedback';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Collapse } from '@dloizides/ui-motion';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { ModalDropdown } from '@dloizides/ui-layout';
 import { resolveAccessibleRoutes } from '@dloizides/auth-web';
 
 // src/Sidebar.tsx
+var IS_WEB = Platform.OS === "web";
+var FOCUS_RING_WIDTH = 2;
+var FOCUS_RING_OFFSET = 2;
+var HOVER_TRANSITION_MS = 150;
+var TINT_TRANSITION_MS = 160;
+function focusRingStyle(focused, ringColor) {
+  if (!IS_WEB || !focused) return void 0;
+  const ring = {
+    outlineWidth: FOCUS_RING_WIDTH,
+    outlineStyle: "solid",
+    outlineColor: ringColor,
+    outlineOffset: FOCUS_RING_OFFSET
+  };
+  return ring;
+}
+function webTransition(properties, durationMs, reducedMotion) {
+  if (!IS_WEB) return void 0;
+  const transition = {
+    transitionProperty: properties,
+    transitionDuration: reducedMotion ? "0ms" : `${durationMs}ms`
+  };
+  return transition;
+}
+function hoverTransitionStyle(reducedMotion) {
+  return webTransition("color, background-color", HOVER_TRANSITION_MS, reducedMotion);
+}
+function tintTransitionStyle(reducedMotion) {
+  return webTransition("opacity", TINT_TRANSITION_MS, reducedMotion);
+}
+function rotateTransitionStyle(reducedMotion) {
+  return webTransition("transform", TINT_TRANSITION_MS, reducedMotion);
+}
+var MIN_TARGET = 36;
+var styles = StyleSheet.create({
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    columnGap: 8,
+    paddingHorizontal: 12,
+    minHeight: MIN_TARGET,
+    borderWidth: 1,
+    borderRadius: 8
+  },
+  label: { fontSize: 14 },
+  badge: { paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, borderWidth: 1 },
+  badgeText: { fontSize: 11, fontWeight: "700" }
+});
+var CommandPaletteTrigger = ({
+  label,
+  hint,
+  shortcut,
+  onPress,
+  testID
+}) => {
+  const { theme } = useUi();
+  const colors = theme.colors;
+  const primary = theme.palette.primary["500"];
+  const [focused, setFocused] = React.useState(false);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityHint: hint,
+      accessibilityLabel: label,
+      accessibilityRole: "button",
+      style: [
+        styles.trigger,
+        { backgroundColor: colors.surface, borderColor: colors.border },
+        focusRingStyle(focused, primary)
+      ],
+      testID,
+      onBlur: () => setFocused(false),
+      onFocus: () => setFocused(true),
+      onPress,
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: colors.textSecondary }], children: label }),
+        /* @__PURE__ */ jsx(View, { style: [styles.badge, { borderColor: colors.border }], children: /* @__PURE__ */ jsx(Text, { style: [styles.badgeText, { color: colors.textSecondary }], children: shortcut }) })
+      ]
+    }
+  );
+};
 
 // src/sidebarFilter.ts
 function searchTokens(query) {
@@ -50,6 +131,10 @@ var ACTIVE_ACCENT_WIDTH = 3;
 var NAV_ROW_RADIUS = 8;
 var ACTIVE_TINT_OPACITY = 0.14;
 var HOVER_TINT_OPACITY = 0.06;
+function rowTintOpacity(isActive, hovered) {
+  if (isActive) return ACTIVE_TINT_OPACITY;
+  return hovered ? HOVER_TINT_OPACITY : 0;
+}
 var NAV_LINK_GAP = 4;
 var navStyles = StyleSheet.create({
   // --- Sidebar ---
@@ -75,6 +160,12 @@ var navStyles = StyleSheet.create({
   sidebarSpacer: {
     flex: 1
   },
+  // Bottom rhythm under the ⌘K palette trigger (the narrow-viewport search
+  // affordance), matching the inline field's own `marginBottom` so swapping
+  // affordances by width keeps the same gap above the nav list.
+  sidebarTriggerSlot: {
+    marginBottom: 12
+  },
   // Inline-search no-match text — sits where the nav list would, muted + padded.
   sidebarEmpty: {
     fontSize: 13,
@@ -337,38 +428,6 @@ var expandableStyles = StyleSheet.create({
 var BASE_INDENT = 12;
 var NAV_ICON_SIZE = 14;
 var CHEVRON_ICON_SIZE = 12;
-var IS_WEB = Platform.OS === "web";
-var FOCUS_RING_WIDTH = 2;
-var FOCUS_RING_OFFSET = 2;
-var HOVER_TRANSITION_MS = 150;
-var TINT_TRANSITION_MS = 160;
-function focusRingStyle(focused, ringColor) {
-  if (!IS_WEB || !focused) return void 0;
-  const ring = {
-    outlineWidth: FOCUS_RING_WIDTH,
-    outlineStyle: "solid",
-    outlineColor: ringColor,
-    outlineOffset: FOCUS_RING_OFFSET
-  };
-  return ring;
-}
-function webTransition(properties, durationMs, reducedMotion) {
-  if (!IS_WEB) return void 0;
-  const transition = {
-    transitionProperty: properties,
-    transitionDuration: reducedMotion ? "0ms" : `${durationMs}ms`
-  };
-  return transition;
-}
-function hoverTransitionStyle(reducedMotion) {
-  return webTransition("color, background-color", HOVER_TRANSITION_MS, reducedMotion);
-}
-function tintTransitionStyle(reducedMotion) {
-  return webTransition("opacity", TINT_TRANSITION_MS, reducedMotion);
-}
-function rotateTransitionStyle(reducedMotion) {
-  return webTransition("transform", TINT_TRANSITION_MS, reducedMotion);
-}
 var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
 function getReducedMotionQuery() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return void 0;
@@ -422,9 +481,19 @@ function hasActiveDescendant(item, pathname) {
   if (isRouteActive(pathname, item.route)) return true;
   return (item.children ?? []).some((child) => hasActiveDescendant(child, pathname));
 }
-function TintOverlay({ opacity, color }) {
+function TintOverlay({
+  opacity,
+  color,
+  testID
+}) {
   const reducedMotion = useReducedMotion();
-  return /* @__PURE__ */ jsx(View, { style: [expandableStyles.tintOverlay, { backgroundColor: color, opacity }, tintTransitionStyle(reducedMotion)] });
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [expandableStyles.tintOverlay, { backgroundColor: color, opacity }, tintTransitionStyle(reducedMotion)],
+      testID
+    }
+  );
 }
 var NavExpandableItem = ({
   item,
@@ -455,11 +524,12 @@ var NavExpandableItem = ({
   );
   const paddingStyle = useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);
   const headerPaddingStyle = useMemo(() => ({ paddingLeft: indent }), [indent]);
-  const leafTintOpacity = isActive ? ACTIVE_TINT_OPACITY : hovered ? HOVER_TINT_OPACITY : 0;
-  const headerTintOpacity = hovered ? HOVER_TINT_OPACITY : 0;
+  const leafTintOpacity = rowTintOpacity(isActive, hovered);
+  const headerTintOpacity = rowTintOpacity(false, hovered);
+  const rowTestID = item.testID ?? item.key;
   if (!hasChildren)
     return /* @__PURE__ */ jsxs(
-      TouchableOpacity,
+      Pressable,
       {
         accessibilityHint: navigateHint(item.label),
         accessibilityLabel: item.label,
@@ -471,14 +541,14 @@ var NavExpandableItem = ({
           isActive ? activeAccentStyle : void 0,
           focusRingStyle(focused, primaryColor)
         ],
-        testID: item.testID ?? item.key,
+        testID: rowTestID,
         onBlur: () => setFocused(false),
         onFocus: () => setFocused(true),
         onPress: () => onNavigate(item.route),
         ...hoverHandlerProps(onHoverIn, onHoverOut),
         ...ariaCurrentProps(isActive),
         children: [
-          /* @__PURE__ */ jsx(TintOverlay, { color: primaryColor, opacity: leafTintOpacity }),
+          /* @__PURE__ */ jsx(TintOverlay, { color: primaryColor, opacity: leafTintOpacity, testID: `${rowTestID}-tint` }),
           typeof item.renderIcon === "function" ? /* @__PURE__ */ jsx(View, { style: expandableStyles.iconWrapper, children: item.renderIcon(colors.textSecondary, NAV_ICON_SIZE) }) : null,
           /* @__PURE__ */ jsx(
             Text,
@@ -496,7 +566,7 @@ var NavExpandableItem = ({
   const chevronColor = colors.textSecondary;
   return /* @__PURE__ */ jsxs(View, { children: [
     /* @__PURE__ */ jsxs(
-      TouchableOpacity,
+      Pressable,
       {
         accessibilityHint: expanded ? collapseHint : expandHint,
         accessibilityLabel: item.label,
@@ -508,14 +578,14 @@ var NavExpandableItem = ({
           headerPaddingStyle,
           focusRingStyle(focused, primaryColor)
         ],
-        testID: item.testID ?? item.key,
+        testID: rowTestID,
         onBlur: () => setFocused(false),
         onFocus: () => setFocused(true),
         onPress: toggle,
         ...hoverHandlerProps(onHoverIn, onHoverOut),
         ...ariaExpandedProps(expanded),
         children: [
-          /* @__PURE__ */ jsx(TintOverlay, { color: primaryColor, opacity: headerTintOpacity }),
+          /* @__PURE__ */ jsx(TintOverlay, { color: primaryColor, opacity: headerTintOpacity, testID: `${rowTestID}-tint` }),
           typeof item.renderIcon === "function" ? /* @__PURE__ */ jsx(View, { style: expandableStyles.iconWrapper, children: item.renderIcon(isSectionHeader ? colors.textSecondary : colors.text, NAV_ICON_SIZE) }) : null,
           /* @__PURE__ */ jsx(
             Text,
@@ -547,10 +617,16 @@ var NavExpandableItem = ({
     )) }) })
   ] });
 };
+
+// src/searchAffordance.ts
+var DEFAULT_SEARCH_BREAKPOINT = 768;
+function resolveSearchAffordance(viewport, breakpoint = DEFAULT_SEARCH_BREAKPOINT) {
+  return viewport >= breakpoint ? "inline" : "palette";
+}
 var FIELD_MIN_HEIGHT = 38;
 var CLEAR_GLYPH = "\u2715";
 var CLEAR_MIN_TARGET = 28;
-var styles = StyleSheet.create({
+var styles2 = StyleSheet.create({
   wrap: {
     flexDirection: "row",
     alignItems: "center",
@@ -591,7 +667,7 @@ var SidebarSearch = ({
     View,
     {
       style: [
-        styles.wrap,
+        styles2.wrap,
         { backgroundColor: colors.surface, borderColor: focused ? primary : colors.border },
         focusRingStyle(focused, primary)
       ],
@@ -603,7 +679,7 @@ var SidebarSearch = ({
             accessibilityLabel: labels.placeholder,
             placeholder: labels.placeholder,
             placeholderTextColor: colors.textSecondary,
-            style: [styles.input, { color: colors.text }],
+            style: [styles2.input, { color: colors.text }],
             testID,
             value,
             onBlur: () => setFocused(false),
@@ -617,10 +693,10 @@ var SidebarSearch = ({
             accessibilityHint: labels.clearHint,
             accessibilityLabel: labels.clearLabel,
             accessibilityRole: "button",
-            style: styles.clear,
+            style: styles2.clear,
             testID: `${testID}-clear`,
             onPress: onClear,
-            children: /* @__PURE__ */ jsx(Text, { style: [styles.clearGlyph, { color: colors.textSecondary }], children: CLEAR_GLYPH })
+            children: /* @__PURE__ */ jsx(Text, { style: [styles2.clearGlyph, { color: colors.textSecondary }], children: CLEAR_GLYPH })
           }
         ) : null
       ]
@@ -633,11 +709,12 @@ function isBareText(node) {
 function renderTextSlot(node, style) {
   if (node === void 0 || node === null) return node;
   if (isBareText(node)) return /* @__PURE__ */ jsx(Text, { style, children: node });
-  return React3.Children.map(
+  return React.Children.map(
     node,
     (child) => isBareText(child) ? /* @__PURE__ */ jsx(Text, { style, children: child }) : child
   );
 }
+var DEFAULT_TRIGGER_TEST_ID = "sidebar-command-palette-trigger";
 var Sidebar = ({
   items,
   pathname,
@@ -650,6 +727,7 @@ var Sidebar = ({
   renderChevron,
   enableInlineSearch = false,
   search,
+  paletteTrigger,
   searchQuery,
   onSearchChange,
   header,
@@ -658,6 +736,7 @@ var Sidebar = ({
 }) => {
   const { theme } = useUi();
   const colors = theme.colors;
+  const { width } = useWindowDimensions();
   const [internalQuery, setInternalQuery] = useState("");
   const controlled = searchQuery !== void 0;
   const query = controlled ? searchQuery : internalQuery;
@@ -669,9 +748,12 @@ var Sidebar = ({
     [controlled, onSearchChange]
   );
   const clearQuery = useCallback(() => setQuery(""), [setQuery]);
-  const searchOn = enableInlineSearch && search !== void 0;
-  const visibleItems = searchOn ? filterNavItems(items, query) : items;
-  const showEmpty = searchOn && isFilterActive(query) && visibleItems.length === 0;
+  const affordance = resolveSearchAffordance(width);
+  const isInlineAffordance = affordance === "inline";
+  const showInlineSearch = enableInlineSearch && search !== void 0 && isInlineAffordance;
+  const showPaletteTrigger = paletteTrigger !== void 0 && !isInlineAffordance;
+  const visibleItems = showInlineSearch ? filterNavItems(items, query) : items;
+  const showEmpty = showInlineSearch && isFilterActive(query) && visibleItems.length === 0;
   return /* @__PURE__ */ jsxs(
     View,
     {
@@ -685,7 +767,7 @@ var Sidebar = ({
       ],
       children: [
         /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: [navStyles.sidebarTitle, { color: colors.text }], children: title }),
-        searchOn && search !== void 0 ? /* @__PURE__ */ jsx(
+        showInlineSearch && search !== void 0 ? /* @__PURE__ */ jsx(
           SidebarSearch,
           {
             labels: search,
@@ -695,6 +777,16 @@ var Sidebar = ({
             onClear: clearQuery
           }
         ) : null,
+        showPaletteTrigger && paletteTrigger !== void 0 ? /* @__PURE__ */ jsx(View, { style: navStyles.sidebarTriggerSlot, children: /* @__PURE__ */ jsx(
+          CommandPaletteTrigger,
+          {
+            hint: paletteTrigger.hint,
+            label: paletteTrigger.label,
+            shortcut: paletteTrigger.shortcut,
+            testID: paletteTrigger.testID ?? DEFAULT_TRIGGER_TEST_ID,
+            onPress: paletteTrigger.onOpen
+          }
+        ) }) : null,
         renderTextSlot(header, { color: colors.text }),
         showEmpty && search !== void 0 ? /* @__PURE__ */ jsx(Text, { style: [navStyles.sidebarEmpty, { color: colors.textSecondary }], testID: "sidebar-search-empty", children: search.emptyText }) : visibleItems.map((item) => /* @__PURE__ */ jsx(
           NavExpandableItem,
@@ -716,12 +808,6 @@ var Sidebar = ({
   );
 };
 
-// src/searchAffordance.ts
-var DEFAULT_SEARCH_BREAKPOINT = 768;
-function resolveSearchAffordance(viewport, breakpoint = DEFAULT_SEARCH_BREAKPOINT) {
-  return viewport >= breakpoint ? "inline" : "palette";
-}
-
 // src/constants.ts
 var NAV_TEST_IDS = {
   /** displayName line in the rich account header (tappable when `onAccount` set). */
@@ -1157,7 +1243,7 @@ var NavBarInner = ({
             }
           );
           if (collapsed) {
-            return /* @__PURE__ */ jsx(View, { nativeID: LINKS_REGION_ID, style: navBarStyles.linksStacked, testID: NAV_TEST_IDS.navBarLinks, children: items.map((item) => /* @__PURE__ */ jsx(React3.Fragment, { children: renderLink(item) }, item.key)) });
+            return /* @__PURE__ */ jsx(View, { nativeID: LINKS_REGION_ID, style: navBarStyles.linksStacked, testID: NAV_TEST_IDS.navBarLinks, children: items.map((item) => /* @__PURE__ */ jsx(React.Fragment, { children: renderLink(item) }, item.key)) });
           }
           const visibleItems = items.slice(0, visibleCount);
           const overflowItems = items.slice(visibleCount);
@@ -1223,7 +1309,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 styles2 = StyleSheet.create({
+var styles3 = StyleSheet.create({
   centerFill: { flex: 1, justifyContent: "center", alignItems: "center" },
   card: {
     padding: CARD_PADDING,
@@ -1240,9 +1326,9 @@ function MessageCard({
 }) {
   const { theme } = useUi();
   const colors = theme.colors;
-  return /* @__PURE__ */ jsxs(View, { style: [styles2.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
-    /* @__PURE__ */ jsx(Text, { style: [styles2.cardTitle, { color: accentColor }], children: message.titleText }),
-    /* @__PURE__ */ jsx(Text, { style: [styles2.cardMessage, { color: colors.textSecondary }], children: message.messageText })
+  return /* @__PURE__ */ jsxs(View, { style: [styles3.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
+    /* @__PURE__ */ jsx(Text, { style: [styles3.cardTitle, { color: accentColor }], children: message.titleText }),
+    /* @__PURE__ */ jsx(Text, { style: [styles3.cardMessage, { color: colors.textSecondary }], children: message.messageText })
   ] });
 }
 function useContentBody(state, children, testID) {
@@ -1254,7 +1340,7 @@ function useContentBody(state, children, testID) {
   if (state?.error)
     return /* @__PURE__ */ jsx(MessageCard, { accentColor: errorColor, message: state.error, testID: `${testID}${APP_SHELL_SUFFIX.error}` });
   if (state?.loading === true)
-    return /* @__PURE__ */ jsx(View, { style: styles2.centerFill, testID: `${testID}${APP_SHELL_SUFFIX.loading}`, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" }) });
+    return /* @__PURE__ */ jsx(View, { style: styles3.centerFill, testID: `${testID}${APP_SHELL_SUFFIX.loading}`, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" }) });
   return children;
 }
 var SCRIM_COLOR = "rgba(0, 0, 0, 0.5)";
@@ -1278,7 +1364,7 @@ var DEFAULT_DRAWER_LABELS = {
   closeLabel: "Close menu",
   closeHint: "Close the navigation menu"
 };
-var styles3 = StyleSheet.create({
+var styles4 = StyleSheet.create({
   overlay: { ...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
@@ -1313,10 +1399,10 @@ var MenuToggle = ({ label, hint, onOpen, testID }) => {
       accessibilityHint: hint,
       accessibilityLabel: label,
       ringColor: theme.palette.primary["500"],
-      style: styles3.menuToggle,
+      style: styles4.menuToggle,
       testID,
       onPress: onOpen,
-      children: /* @__PURE__ */ jsx(Text, { style: [styles3.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
+      children: /* @__PURE__ */ jsx(Text, { style: [styles4.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
     }
   );
 };
@@ -1342,14 +1428,14 @@ var MobileDrawer = ({
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);
   }, [onClose]);
-  return /* @__PURE__ */ jsxs(View, { style: styles3.overlay, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles4.overlay, children: [
     /* @__PURE__ */ jsx(
       Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles3.scrim,
+        style: styles4.scrim,
         testID: scrimTestID,
         onPress: onClose
       }
@@ -1360,7 +1446,7 @@ var MobileDrawer = ({
         ref: panelRef,
         "aria-modal": true,
         role: "dialog",
-        style: [styles3.panel, { backgroundColor: theme.colors.surface }],
+        style: [styles4.panel, { backgroundColor: theme.colors.surface }],
         testID: drawerTestID,
         children: renderTextSlot(sidebar, { color: theme.colors.text })
       }
@@ -1391,7 +1477,7 @@ function useContentMaxWidth(width) {
   return resolveContentMaxWidth(width, viewport);
 }
 var DEFAULT_CONTENT_PADDING = 24;
-var styles4 = StyleSheet.create({
+var styles5 = StyleSheet.create({
   root: { flex: 1 },
   centerFill: { flex: 1, justifyContent: "center", alignItems: "center" },
   scroll: { flex: 1 },
@@ -1448,20 +1534,20 @@ var AppShell = ({
     if (isUnauthenticated && gate !== void 0) gate.onRedirect();
   }, [isUnauthenticated, gate]);
   if (gate?.pending === true)
-    return /* @__PURE__ */ jsx(View, { style: [styles4.root, styles4.centerFill, { backgroundColor: theme.colors.background }], testID: `${testID}${APP_SHELL_SUFFIX.pending}`, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" }) });
+    return /* @__PURE__ */ jsx(View, { style: [styles5.root, styles5.centerFill, { backgroundColor: theme.colors.background }], testID: `${testID}${APP_SHELL_SUFFIX.pending}`, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" }) });
   if (isUnauthenticated) return null;
-  const columnStyle = maxWidth === "full" ? styles4.columnFull : [styles4.columnCapped, { maxWidth }];
-  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles4.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
+  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__ */ jsx(
     ScrollView,
     {
-      contentContainerStyle: [styles4.scrollContent, { padding: contentPadding }],
-      style: styles4.scroll,
+      contentContainerStyle: [styles5.scrollContent, { padding: contentPadding }],
+      style: styles5.scroll,
       testID: `${testID}${APP_SHELL_SUFFIX.content}`,
       children: /* @__PURE__ */ jsx(View, { style: columnStyle, children: body })
     }
   );
-  const headerRegion = useDrawer ? /* @__PURE__ */ jsxs(View, { style: styles4.headerRow, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
+  const headerRegion = useDrawer ? /* @__PURE__ */ jsxs(View, { style: styles5.headerRow, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
     /* @__PURE__ */ jsx(
       MenuToggle,
       {
@@ -1471,14 +1557,14 @@ var AppShell = ({
         onOpen: openDrawer
       }
     ),
-    /* @__PURE__ */ jsx(View, { style: styles4.headerFill, children: renderTextSlot(header, { color: theme.colors.text }) })
+    /* @__PURE__ */ jsx(View, { style: styles5.headerFill, children: renderTextSlot(header, { color: theme.colors.text }) })
   ] }) : /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: renderTextSlot(header, { color: theme.colors.text }) });
   const railRegion = railMode === "full" ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.sidebar}`, children: renderTextSlot(sidebar, { color: theme.colors.text }) }) : railMode === "collapsed" ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.collapsedSidebar}`, children: renderTextSlot(collapsedSidebar, { color: theme.colors.text }) }) : null;
-  return /* @__PURE__ */ jsxs(View, { style: [styles4.root, { backgroundColor: theme.colors.background }], testID, children: [
+  return /* @__PURE__ */ jsxs(View, { style: [styles5.root, { backgroundColor: theme.colors.background }], testID, children: [
     headerRegion,
     nav !== void 0 ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.nav}`, children: navInnerStyle !== void 0 ? /* @__PURE__ */ jsx(View, { style: navInnerStyle, children: renderTextSlot(nav, { color: theme.colors.text }) }) : renderTextSlot(nav, { color: theme.colors.text }) }) : null,
     banner !== void 0 ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.banner}`, children: renderTextSlot(banner, { color: theme.colors.text }) }) : null,
-    railRegion !== null ? /* @__PURE__ */ jsxs(View, { style: styles4.bodyRow, children: [
+    railRegion !== null ? /* @__PURE__ */ jsxs(View, { style: styles5.bodyRow, children: [
       railRegion,
       scroller
     ] }) : scroller,
@@ -1595,16 +1681,21 @@ var NavShell = ({
     {
       collapseHint: sideRail.collapseHint,
       containerStyle: sideRail.containerStyle,
+      enableInlineSearch: sideRail.enableInlineSearch,
       expandHint: sideRail.expandHint,
       footer: sideRail.footer,
       header: sideRail.header,
       items: sideRail.items,
       navigateHint,
+      paletteTrigger: sideRail.paletteTrigger,
       pathname,
       regionLabel,
       renderChevron: sideRail.renderChevron,
+      search: sideRail.search,
+      searchQuery: sideRail.searchQuery,
       title: sideRail.title,
-      onNavigate
+      onNavigate,
+      onSearchChange: sideRail.onSearchChange
     }
   ) : void 0;
   const collapsedCfg = showSideRail ? sideRail?.collapsed : void 0;
@@ -1772,7 +1863,7 @@ var KEY_DOWN = "ArrowDown";
 var KEY_UP = "ArrowUp";
 var KEY_ENTER = "Enter";
 var KEY_ESCAPE = "Escape";
-var styles5 = StyleSheet.create({
+var styles6 = StyleSheet.create({
   overlay: { ...StyleSheet.absoluteFillObject, zIndex: OVERLAY_Z_INDEX, alignItems: "center" },
   scrim: { ...StyleSheet.absoluteFillObject, backgroundColor: SCRIM_COLOR2 },
   panel: {
@@ -1801,14 +1892,14 @@ var PaletteRow = ({ item, selected, onChoose }) => {
       accessibilityLabel: item.label,
       accessibilityRole: "button",
       accessibilityState: { selected },
-      style: [styles5.row, selected ? { backgroundColor: colors.border } : void 0],
+      style: [styles6.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__ */ jsxs(View, { style: styles5.rowText, children: [
-          /* @__PURE__ */ jsx(Text, { style: [styles5.rowLabel, { color: colors.text }], children: item.label }),
-          item.hint ? /* @__PURE__ */ jsx(Text, { style: [styles5.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
+        /* @__PURE__ */ jsxs(View, { style: styles6.rowText, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles6.rowLabel, { color: colors.text }], children: item.label }),
+          item.hint ? /* @__PURE__ */ jsx(Text, { style: [styles6.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
         ] })
       ]
     }
@@ -1848,14 +1939,14 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
     [results, selected, choose, onClose]
   );
   if (!open) return null;
-  return /* @__PURE__ */ jsxs(View, { style: styles5.overlay, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles6.overlay, children: [
     /* @__PURE__ */ jsx(
       Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles5.scrim,
+        style: styles6.scrim,
         testID: `${testID ?? "command-palette"}-scrim`,
         onPress: onClose
       }
@@ -1866,7 +1957,7 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
         "aria-modal": true,
         "aria-label": labels.regionLabel,
         role: "dialog",
-        style: [styles5.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
+        style: [styles6.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
         testID: testID ?? "command-palette",
         children: [
           /* @__PURE__ */ jsx(
@@ -1876,68 +1967,19 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
               accessibilityLabel: labels.placeholder,
               placeholder: labels.placeholder,
               placeholderTextColor: colors.textSecondary,
-              style: [styles5.input, { color: colors.text, borderBottomColor: colors.border }],
+              style: [styles6.input, { color: colors.text, borderBottomColor: colors.border }],
               testID: `${testID ?? "command-palette"}-input`,
               value: query,
               onChangeText: setQuery,
               onKeyPress
             }
           ),
-          results.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [styles5.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", style: styles5.list, children: results.map((item, index) => /* @__PURE__ */ jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
+          results.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [styles6.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", style: styles6.list, children: results.map((item, index) => /* @__PURE__ */ jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
         ]
       }
     )
   ] });
 };
-var MIN_TARGET = 36;
-var styles6 = StyleSheet.create({
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    columnGap: 8,
-    paddingHorizontal: 12,
-    minHeight: MIN_TARGET,
-    borderWidth: 1,
-    borderRadius: 8
-  },
-  label: { fontSize: 14 },
-  badge: { paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, borderWidth: 1 },
-  badgeText: { fontSize: 11, fontWeight: "700" }
-});
-var CommandPaletteTrigger = ({
-  label,
-  hint,
-  shortcut,
-  onPress,
-  testID
-}) => {
-  const { theme } = useUi();
-  const colors = theme.colors;
-  const primary = theme.palette.primary["500"];
-  const [focused, setFocused] = React3.useState(false);
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      accessibilityHint: hint,
-      accessibilityLabel: label,
-      accessibilityRole: "button",
-      style: [
-        styles6.trigger,
-        { backgroundColor: colors.surface, borderColor: colors.border },
-        focusRingStyle(focused, primary)
-      ],
-      testID,
-      onBlur: () => setFocused(false),
-      onFocus: () => setFocused(true),
-      onPress,
-      children: [
-        /* @__PURE__ */ jsx(Text, { style: [styles6.label, { color: colors.textSecondary }], children: label }),
-        /* @__PURE__ */ jsx(View, { style: [styles6.badge, { borderColor: colors.border }], children: /* @__PURE__ */ jsx(Text, { style: [styles6.badgeText, { color: colors.textSecondary }], children: shortcut }) })
-      ]
-    }
-  );
-};
 var LAUNCH_KEY = "k";
 function useCommandPaletteHotkey(onOpen, enabled = true) {
   useEffect(() => {