@dloizides/ui-nav 1.16.0 → 1.17.0

package/dist/index.js

@@ -1,18 +1,99 @@
 'use strict';
 
-var React3 = require('react');
+var React = require('react');
 var reactNative = require('react-native');
 var uiFeedback = require('@dloizides/ui-feedback');
-var uiMotion = require('@dloizides/ui-motion');
 var jsxRuntime = require('react/jsx-runtime');
+var uiMotion = require('@dloizides/ui-motion');
 var uiLayout = require('@dloizides/ui-layout');
 var authWeb = require('@dloizides/auth-web');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React3__default = /*#__PURE__*/_interopDefault(React3);
+var React__default = /*#__PURE__*/_interopDefault(React);
 
 // src/Sidebar.tsx
+var IS_WEB = reactNative.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 = reactNative.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 } = uiFeedback.useUi();
+  const colors = theme.colors;
+  const primary = theme.palette.primary["500"];
+  const [focused, setFocused] = React__default.default.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.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__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.label, { color: colors.textSecondary }], children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.badge, { borderColor: colors.border }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.badgeText, { color: colors.textSecondary }], children: shortcut }) })
+      ]
+    }
+  );
+};
 
 // src/sidebarFilter.ts
 function searchTokens(query) {
@@ -56,6 +137,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 = reactNative.StyleSheet.create({
   // --- Sidebar ---
@@ -81,6 +166,12 @@ var navStyles = reactNative.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,
@@ -343,46 +434,14 @@ var expandableStyles = reactNative.StyleSheet.create({
 var BASE_INDENT = 12;
 var NAV_ICON_SIZE = 14;
 var CHEVRON_ICON_SIZE = 12;
-var IS_WEB = reactNative.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;
   return window.matchMedia(REDUCED_MOTION_QUERY);
 }
 function useReducedMotion() {
-  const [reduced, setReduced] = React3.useState(() => getReducedMotionQuery()?.matches ?? false);
-  React3.useEffect(() => {
+  const [reduced, setReduced] = React.useState(() => getReducedMotionQuery()?.matches ?? false);
+  React.useEffect(() => {
     const mql = getReducedMotionQuery();
     if (mql === void 0 || mql.addEventListener === void 0) return void 0;
     const onChange = () => setReduced(mql.matches);
@@ -428,9 +487,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__ */ jsxRuntime.jsx(reactNative.View, { style: [expandableStyles.tintOverlay, { backgroundColor: color, opacity }, tintTransitionStyle(reducedMotion)] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      style: [expandableStyles.tintOverlay, { backgroundColor: color, opacity }, tintTransitionStyle(reducedMotion)],
+      testID
+    }
+  );
 }
 var NavExpandableItem = ({
   item,
@@ -442,30 +511,31 @@ var NavExpandableItem = ({
   renderChevron,
   depth = 0
 }) => {
-  const [expanded, setExpanded] = React3.useState(() => hasActiveDescendant(item, pathname));
-  const [focused, setFocused] = React3.useState(false);
-  const [hovered, setHovered] = React3.useState(false);
+  const [expanded, setExpanded] = React.useState(() => hasActiveDescendant(item, pathname));
+  const [focused, setFocused] = React.useState(false);
+  const [hovered, setHovered] = React.useState(false);
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
-  const toggle = React3.useCallback(() => setExpanded((v) => !v), []);
-  const onHoverIn = React3.useCallback(() => setHovered(true), []);
-  const onHoverOut = React3.useCallback(() => setHovered(false), []);
+  const toggle = React.useCallback(() => setExpanded((v) => !v), []);
+  const onHoverIn = React.useCallback(() => setHovered(true), []);
+  const onHoverOut = React.useCallback(() => setHovered(false), []);
   const indent = depth * BASE_INDENT;
   const hasChildren = Array.isArray(item.children) && item.children.length > 0;
   const isActive = isRouteActive(pathname, item.route);
   const isSectionHeader = hasChildren && depth === 0;
-  const activeAccentStyle = React3.useMemo(
+  const activeAccentStyle = React.useMemo(
     () => ({ borderLeftWidth: ACTIVE_ACCENT_WIDTH, borderLeftColor: primaryColor }),
     [primaryColor]
   );
-  const paddingStyle = React3.useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);
-  const headerPaddingStyle = React3.useMemo(() => ({ paddingLeft: indent }), [indent]);
-  const leafTintOpacity = isActive ? ACTIVE_TINT_OPACITY : hovered ? HOVER_TINT_OPACITY : 0;
-  const headerTintOpacity = hovered ? HOVER_TINT_OPACITY : 0;
+  const paddingStyle = React.useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);
+  const headerPaddingStyle = React.useMemo(() => ({ paddingLeft: indent }), [indent]);
+  const leafTintOpacity = rowTintOpacity(isActive, hovered);
+  const headerTintOpacity = rowTintOpacity(false, hovered);
+  const rowTestID = item.testID ?? item.key;
   if (!hasChildren)
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      reactNative.TouchableOpacity,
+      reactNative.Pressable,
       {
         accessibilityHint: navigateHint(item.label),
         accessibilityLabel: item.label,
@@ -477,14 +547,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__ */ jsxRuntime.jsx(TintOverlay, { color: primaryColor, opacity: leafTintOpacity }),
+          /* @__PURE__ */ jsxRuntime.jsx(TintOverlay, { color: primaryColor, opacity: leafTintOpacity, testID: `${rowTestID}-tint` }),
           typeof item.renderIcon === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.iconWrapper, children: item.renderIcon(colors.textSecondary, NAV_ICON_SIZE) }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Text,
@@ -502,7 +572,7 @@ var NavExpandableItem = ({
   const chevronColor = colors.textSecondary;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
-      reactNative.TouchableOpacity,
+      reactNative.Pressable,
       {
         accessibilityHint: expanded ? collapseHint : expandHint,
         accessibilityLabel: item.label,
@@ -514,14 +584,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__ */ jsxRuntime.jsx(TintOverlay, { color: primaryColor, opacity: headerTintOpacity }),
+          /* @__PURE__ */ jsxRuntime.jsx(TintOverlay, { color: primaryColor, opacity: headerTintOpacity, testID: `${rowTestID}-tint` }),
           typeof item.renderIcon === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.iconWrapper, children: item.renderIcon(isSectionHeader ? colors.textSecondary : colors.text, NAV_ICON_SIZE) }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Text,
@@ -553,10 +623,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 = reactNative.StyleSheet.create({
+var styles2 = reactNative.StyleSheet.create({
   wrap: {
     flexDirection: "row",
     alignItems: "center",
@@ -591,13 +667,13 @@ var SidebarSearch = ({
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
   const primary = theme.palette.primary["500"];
-  const [focused, setFocused] = React3.useState(false);
+  const [focused, setFocused] = React.useState(false);
   const hasQuery = value.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.View,
     {
       style: [
-        styles.wrap,
+        styles2.wrap,
         { backgroundColor: colors.surface, borderColor: focused ? primary : colors.border },
         focusRingStyle(focused, primary)
       ],
@@ -609,7 +685,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),
@@ -623,10 +699,10 @@ var SidebarSearch = ({
             accessibilityHint: labels.clearHint,
             accessibilityLabel: labels.clearLabel,
             accessibilityRole: "button",
-            style: styles.clear,
+            style: styles2.clear,
             testID: `${testID}-clear`,
             onPress: onClear,
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.clearGlyph, { color: colors.textSecondary }], children: CLEAR_GLYPH })
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.clearGlyph, { color: colors.textSecondary }], children: CLEAR_GLYPH })
           }
         ) : null
       ]
@@ -639,11 +715,12 @@ function isBareText(node) {
 function renderTextSlot(node, style) {
   if (node === void 0 || node === null) return node;
   if (isBareText(node)) return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style, children: node });
-  return React3__default.default.Children.map(
+  return React__default.default.Children.map(
     node,
     (child) => isBareText(child) ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style, children: child }) : child
   );
 }
+var DEFAULT_TRIGGER_TEST_ID = "sidebar-command-palette-trigger";
 var Sidebar = ({
   items,
   pathname,
@@ -656,6 +733,7 @@ var Sidebar = ({
   renderChevron,
   enableInlineSearch = false,
   search,
+  paletteTrigger,
   searchQuery,
   onSearchChange,
   header,
@@ -664,20 +742,24 @@ var Sidebar = ({
 }) => {
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
-  const [internalQuery, setInternalQuery] = React3.useState("");
+  const { width } = reactNative.useWindowDimensions();
+  const [internalQuery, setInternalQuery] = React.useState("");
   const controlled = searchQuery !== void 0;
   const query = controlled ? searchQuery : internalQuery;
-  const setQuery = React3.useCallback(
+  const setQuery = React.useCallback(
     (next) => {
       if (!controlled) setInternalQuery(next);
       onSearchChange?.(next);
     },
     [controlled, onSearchChange]
   );
-  const clearQuery = React3.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 clearQuery = React.useCallback(() => setQuery(""), [setQuery]);
+  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__ */ jsxRuntime.jsxs(
     reactNative.View,
     {
@@ -691,7 +773,7 @@ var Sidebar = ({
       ],
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityRole: "header", style: [navStyles.sidebarTitle, { color: colors.text }], children: title }),
-        searchOn && search !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        showInlineSearch && search !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
           SidebarSearch,
           {
             labels: search,
@@ -701,6 +783,16 @@ var Sidebar = ({
             onClear: clearQuery
           }
         ) : null,
+        showPaletteTrigger && paletteTrigger !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navStyles.sidebarTriggerSlot, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.sidebarEmpty, { color: colors.textSecondary }], testID: "sidebar-search-empty", children: search.emptyText }) : visibleItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
           NavExpandableItem,
@@ -722,12 +814,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). */
@@ -775,7 +861,7 @@ var FocusableTouchable = ({
   testID,
   children
 }) => {
-  const [focused, setFocused] = React3.useState(false);
+  const [focused, setFocused] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Pressable,
     {
@@ -928,8 +1014,8 @@ var NavBarLink = ({
   navigateHint,
   onPress
 }) => {
-  const [hovered, setHovered] = React3.useState(false);
-  const [focused, setFocused] = React3.useState(false);
+  const [hovered, setHovered] = React.useState(false);
+  const [focused, setFocused] = React.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;
@@ -973,12 +1059,12 @@ var NavOverflowMenu = ({
   testID,
   variant
 }) => {
-  const options = React3.useMemo(() => items.map((item) => ({ label: item.label, value: item.route })), [items]);
-  const activeRoute = React3.useMemo(
+  const options = React.useMemo(() => items.map((item) => ({ label: item.label, value: item.route })), [items]);
+  const activeRoute = React.useMemo(
     () => items.find((item) => isRouteActive(pathname, item.route))?.route ?? NO_ACTIVE_ROUTE,
     [items, pathname]
   );
-  const optionTestID = React3.useMemo(() => {
+  const optionTestID = React.useMemo(() => {
     const byRoute = new Map(items.map((item) => [item.route, item.testID ?? item.key]));
     return (route) => byRoute.get(route) ?? `${testID}-option-${route}`;
   }, [items, testID]);
@@ -1035,13 +1121,13 @@ function resizeWidthBuffer(previous, count) {
   return next;
 }
 function useNavOverflow(itemCount, gap) {
-  const [availableWidth, setAvailableWidthState] = React3.useState(0);
-  const [moreWidth, setMoreWidthState] = React3.useState(0);
-  const [itemWidths, setItemWidths] = React3.useState(() => new Array(itemCount).fill(0));
-  React3.useEffect(() => {
+  const [availableWidth, setAvailableWidthState] = React.useState(0);
+  const [moreWidth, setMoreWidthState] = React.useState(0);
+  const [itemWidths, setItemWidths] = React.useState(() => new Array(itemCount).fill(0));
+  React.useEffect(() => {
     setItemWidths((previous) => previous.length === itemCount ? previous : resizeWidthBuffer(previous, itemCount));
   }, [itemCount]);
-  const setItemWidth = React3.useCallback((index, width) => {
+  const setItemWidth = React.useCallback((index, width) => {
     setItemWidths((previous) => {
       if (index < 0 || index >= previous.length || previous[index] === width) return previous;
       const next = previous.slice();
@@ -1049,15 +1135,15 @@ function useNavOverflow(itemCount, gap) {
       return next;
     });
   }, []);
-  const setAvailableWidth = React3.useCallback(
+  const setAvailableWidth = React.useCallback(
     (width) => setAvailableWidthState((previous) => previous === width ? previous : width),
     []
   );
-  const setMoreWidth = React3.useCallback(
+  const setMoreWidth = React.useCallback(
     (width) => setMoreWidthState((previous) => previous === width ? previous : width),
     []
   );
-  const visibleCount = React3.useMemo(
+  const visibleCount = React.useMemo(
     () => computeVisibleCount({ availableWidth, itemWidths, moreWidth, gap }),
     [availableWidth, itemWidths, moreWidth, gap]
   );
@@ -1091,24 +1177,24 @@ var NavBarInner = ({
   const primaryColor = theme.palette.primary["500"];
   const { width } = reactNative.useWindowDimensions();
   const reducedMotion = useReducedMotion();
-  const [open, setOpen] = React3.useState(false);
-  const [toggleFocused, setToggleFocused] = React3.useState(false);
+  const [open, setOpen] = React.useState(false);
+  const [toggleFocused, setToggleFocused] = React.useState(false);
   const { visibleCount, setAvailableWidth, setItemWidth, setMoreWidth } = useNavOverflow(items.length, NAV_LINK_GAP);
   const collapsed = width < collapseBelow;
   const showLinks = !collapsed || open;
-  const innerCapStyle = React3.useMemo(
+  const innerCapStyle = React.useMemo(
     () => contentMaxWidth === void 0 ? null : { maxWidth: contentMaxWidth, width: "100%", alignSelf: "center" },
     [contentMaxWidth]
   );
-  const toggleMenu = React3.useCallback(() => setOpen((v) => !v), []);
-  const handlePress = React3.useCallback(
+  const toggleMenu = React.useCallback(() => setOpen((v) => !v), []);
+  const handlePress = React.useCallback(
     (route) => {
       setOpen(false);
       onNavigate(route);
     },
     [onNavigate]
   );
-  const linkColors = React3.useMemo(
+  const linkColors = React.useMemo(
     () => ({
       rest: colors.textSecondary,
       hoverText: colors.text,
@@ -1163,7 +1249,7 @@ var NavBarInner = ({
             }
           );
           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(React3__default.default.Fragment, { children: renderLink(item) }, item.key)) });
+            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(React__default.default.Fragment, { children: renderLink(item) }, item.key)) });
           }
           const visibleItems = items.slice(0, visibleCount);
           const overflowItems = items.slice(visibleCount);
@@ -1229,7 +1315,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 = reactNative.StyleSheet.create({
+var styles3 = reactNative.StyleSheet.create({
   centerFill: { flex: 1, justifyContent: "center", alignItems: "center" },
   card: {
     padding: CARD_PADDING,
@@ -1246,9 +1332,9 @@ function MessageCard({
 }) {
   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 })
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles3.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.cardTitle, { color: accentColor }], children: message.titleText }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.cardMessage, { color: colors.textSecondary }], children: message.messageText })
   ] });
 }
 function useContentBody(state, children, testID) {
@@ -1260,7 +1346,7 @@ function useContentBody(state, children, testID) {
   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 /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.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)";
@@ -1284,7 +1370,7 @@ var DEFAULT_DRAWER_LABELS = {
   closeLabel: "Close menu",
   closeHint: "Close the navigation menu"
 };
-var styles3 = reactNative.StyleSheet.create({
+var styles4 = 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
@@ -1319,10 +1405,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__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
     }
   );
 };
@@ -1334,8 +1420,8 @@ var MobileDrawer = ({
   scrimTestID
 }) => {
   const { theme } = uiFeedback.useUi();
-  const panelRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const panelRef = React.useRef(null);
+  React.useEffect(() => {
     const node = panelRef.current;
     if (node === null || typeof node.addEventListener !== "function") return void 0;
     const handleClick = (event) => {
@@ -1348,14 +1434,14 @@ var MobileDrawer = ({
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);
   }, [onClose]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.overlay, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.overlay, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles3.scrim,
+        style: styles4.scrim,
         testID: scrimTestID,
         onPress: onClose
       }
@@ -1366,7 +1452,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 })
       }
@@ -1397,7 +1483,7 @@ function useContentMaxWidth(width) {
   return resolveContentMaxWidth(width, viewport);
 }
 var DEFAULT_CONTENT_PADDING = 24;
-var styles4 = reactNative.StyleSheet.create({
+var styles5 = reactNative.StyleSheet.create({
   root: { flex: 1 },
   centerFill: { flex: 1, justifyContent: "center", alignItems: "center" },
   scroll: { flex: 1 },
@@ -1442,32 +1528,32 @@ var AppShell = ({
     range: railRange
   });
   const useDrawer = railMode === "drawer";
-  const [drawerOpen, setDrawerOpen] = React3.useState(false);
-  const openDrawer = React3.useCallback(() => setDrawerOpen(true), []);
-  const closeDrawer = React3.useCallback(() => setDrawerOpen(false), []);
-  React3.useEffect(() => {
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
+  const openDrawer = React.useCallback(() => setDrawerOpen(true), []);
+  const closeDrawer = React.useCallback(() => setDrawerOpen(false), []);
+  React.useEffect(() => {
     if (!useDrawer && drawerOpen) setDrawerOpen(false);
   }, [useDrawer, drawerOpen]);
   const drawerLabels = { ...DEFAULT_DRAWER_LABELS, ...mobileMenu };
   const isUnauthenticated = gate !== void 0 && !gate.pending && !gate.authenticated;
-  React3.useEffect(() => {
+  React.useEffect(() => {
     if (isUnauthenticated && gate !== void 0) gate.onRedirect();
   }, [isUnauthenticated, gate]);
   if (gate?.pending === true)
-    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles4.root, styles4.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: [styles5.root, styles5.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" ? 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__ */ jsxRuntime.jsx(
     reactNative.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__ */ jsxRuntime.jsx(reactNative.View, { style: columnStyle, children: body })
     }
   );
-  const headerRegion = useDrawer ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.headerRow, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
+  const headerRegion = useDrawer ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.headerRow, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       MenuToggle,
       {
@@ -1477,14 +1563,14 @@ var AppShell = ({
         onOpen: openDrawer
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.headerFill, children: renderTextSlot(header, { color: theme.colors.text }) })
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.headerFill, children: renderTextSlot(header, { color: theme.colors.text }) })
   ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: renderTextSlot(header, { color: theme.colors.text }) });
   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: [styles4.root, { backgroundColor: theme.colors.background }], testID, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles5.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: renderTextSlot(nav, { color: theme.colors.text }) }) : renderTextSlot(nav, { color: theme.colors.text }) }) : 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: styles4.bodyRow, children: [
+    railRegion !== null ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.bodyRow, children: [
       railRegion,
       scroller
     ] }) : scroller,
@@ -1601,16 +1687,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;
@@ -1702,7 +1793,7 @@ var DarkModeControl = ({
   const primaryColor = theme.palette.primary["500"];
   const currentIndex = options.findIndex((option) => option.value === value);
   const current = currentIndex >= 0 ? options[currentIndex] : options[0];
-  const advance = React3.useCallback(() => {
+  const advance = React.useCallback(() => {
     if (options.length === 0) return;
     const from = currentIndex >= 0 ? currentIndex : 0;
     const next = options[(from + 1) % options.length];
@@ -1778,7 +1869,7 @@ var KEY_DOWN = "ArrowDown";
 var KEY_UP = "ArrowUp";
 var KEY_ENTER = "Enter";
 var KEY_ESCAPE = "Escape";
-var styles5 = reactNative.StyleSheet.create({
+var styles6 = reactNative.StyleSheet.create({
   overlay: { ...reactNative.StyleSheet.absoluteFillObject, zIndex: OVERLAY_Z_INDEX, alignItems: "center" },
   scrim: { ...reactNative.StyleSheet.absoluteFillObject, backgroundColor: SCRIM_COLOR2 },
   panel: {
@@ -1807,14 +1898,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__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.rowText, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.rowLabel, { color: colors.text }], children: item.label }),
-          item.hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.rowText, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.rowLabel, { color: colors.text }], children: item.label }),
+          item.hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
         ] })
       ]
     }
@@ -1823,27 +1914,27 @@ var PaletteRow = ({ item, selected, onChoose }) => {
 var CommandPalette = ({ open, items, onClose, labels, testID }) => {
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
-  const [query, setQuery] = React3.useState("");
-  const [selected, setSelected] = React3.useState(0);
-  const inputRef = React3.useRef(null);
-  const results = React3.useMemo(() => filterCommands(items, query), [items, query]);
-  React3.useEffect(() => {
+  const [query, setQuery] = React.useState("");
+  const [selected, setSelected] = React.useState(0);
+  const inputRef = React.useRef(null);
+  const results = React.useMemo(() => filterCommands(items, query), [items, query]);
+  React.useEffect(() => {
     if (!open) return;
     setQuery("");
     setSelected(0);
     inputRef.current?.focus();
   }, [open]);
-  React3.useEffect(() => {
+  React.useEffect(() => {
     setSelected((prev) => Math.min(prev, Math.max(0, results.length - 1)));
   }, [results.length]);
-  const choose = React3.useCallback(
+  const choose = React.useCallback(
     (item) => {
       item.onSelect();
       onClose();
     },
     [onClose]
   );
-  const onKeyPress = React3.useCallback(
+  const onKeyPress = React.useCallback(
     (event) => {
       const key = event.nativeEvent.key;
       if (key === KEY_DOWN) setSelected((i) => Math.min(i + 1, results.length - 1));
@@ -1854,14 +1945,14 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
     [results, selected, choose, onClose]
   );
   if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.overlay, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.overlay, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles5.scrim,
+        style: styles6.scrim,
         testID: `${testID ?? "command-palette"}-scrim`,
         onPress: onClose
       }
@@ -1872,7 +1963,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__ */ jsxRuntime.jsx(
@@ -1882,71 +1973,22 @@ 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__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { keyboardShouldPersistTaps: "handled", style: styles5.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: [styles6.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { keyboardShouldPersistTaps: "handled", style: styles6.list, children: results.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
         ]
       }
     )
   ] });
 };
-var MIN_TARGET = 36;
-var styles6 = reactNative.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 } = uiFeedback.useUi();
-  const colors = theme.colors;
-  const primary = theme.palette.primary["500"];
-  const [focused, setFocused] = React3__default.default.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactNative.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__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.label, { color: colors.textSecondary }], children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.badge, { borderColor: colors.border }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.badgeText, { color: colors.textSecondary }], children: shortcut }) })
-      ]
-    }
-  );
-};
 var LAUNCH_KEY = "k";
 function useCommandPaletteHotkey(onOpen, enabled = true) {
-  React3.useEffect(() => {
+  React.useEffect(() => {
     if (!enabled || typeof document === "undefined") return void 0;
     const handler = (event) => {
       const isLauncher = event.key.toLowerCase() === LAUNCH_KEY && (event.metaKey || event.ctrlKey);