@dloizides/ui-nav 1.10.2 → 1.12.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 1.11.0
+
+- **Feature (an expandable nav group now auto-opens when the current route is inside it).**
+  `NavExpandableItem` used to mount every group collapsed (`useState(false)`), so on a fresh
+  page load the group containing the active route was closed and its active leaf was hidden.
+  A persistent-rail console that groups its nav by module (e.g. finreg-web's Payments / CRM /
+  Accounting rail) needs the active module's group open on load, the others collapsed — with
+  no way for the caller to express that, since expansion state was internal and uncontrolled.
+  - The group now initializes its expansion from whether the current route is inside it:
+    `useState(() => hasActiveDescendant(item, pathname))`, where `hasActiveDescendant` is true
+    when the item's own route is active (`isRouteActive`) or any descendant's is (recursive, so
+    it holds at any nesting depth). The group of the active route mounts EXPANDED (active leaf
+    visible + highlighted); a group with no active descendant mounts COLLAPSED — exactly the
+    prior behaviour.
+  - **No API change.** `NavItem` is unchanged — the behaviour is derived from the `pathname`
+    the component already receives. Consumers with no expandable groups, or whose groups hold no
+    active route, are byte-for-byte unaffected; all 7 portals gain the auto-open on their next
+    bump for free.
+  - Guarded by `src/navExpandableItem.test.tsx` (RED-first): the two "mounts EXPANDED" assertions
+    FAIL against the pre-change `useState(false)` (the active group's child is absent from the DOM)
+    and pass after; the "mounts COLLAPSED" + "header always renders" assertions lock the
+    backward-compatible half.
+
 ## 1.10.2
 
 - **Fix (the mobile nav DRAWER was not clickable — a tap on a nav item did not navigate, it

package/dist/index.d.mts

@@ -898,6 +898,87 @@ interface NavExpandableItemProps {
 }
 declare const NavExpandableItem: ({ item, pathname, onNavigate, navigateHint, expandHint, collapseHint, renderChevron, depth, }: NavExpandableItemProps) => React.ReactElement;
 
+/**
+ * Pure matching logic for the {@link CommandPalette}. Kept framework-free so the
+ * ranking/filtering is unit-testable without rendering: a command matches when
+ * every whitespace-separated token of the query appears (case-insensitively) in
+ * its haystack (label + hint + keywords). Requiring ALL tokens lets an operator
+ * narrow with "pay dash" the way a fuzzy launcher would, without a fuzzy lib.
+ */
+
+/** One actionable destination/command shown in the palette. */
+interface CommandItem {
+    /** Stable key + default testID. */
+    key: string;
+    /** Optional testID override (defaults to `key`). */
+    testID?: string;
+    /** Localized display label (what the operator reads). */
+    label: string;
+    /** Optional localized secondary line (e.g. the module it lives in). */
+    hint?: string;
+    /** Optional extra search terms not shown but matched (synonyms, route words). */
+    keywords?: readonly string[];
+    /** Invoked when the item is chosen (the consumer navigates / runs the action). */
+    onSelect: () => void;
+    /** Optional leading icon slot, same contract as `NavItem.renderIcon`. */
+    renderIcon?: (color: string, size: number) => React.ReactNode;
+}
+/**
+ * Filter `items` to those matching `query`. An empty/whitespace query returns
+ * the list unchanged (the palette opens showing everything). Order is preserved
+ * — the caller supplies items in a meaningful order (nav order).
+ */
+declare function filterCommands(items: readonly CommandItem[], query: string): CommandItem[];
+
+/**
+ * CommandPalette — the shared ⌘K launcher for `@dloizides/ui-nav`. An overlay
+ * (scrim + centred panel) with a search input over a keyboard-navigable list of
+ * {@link CommandItem}s — jump to any nav destination (or run any action) without
+ * hunting the rail. Web-first (RN-web), but degrades safely: when `open` is
+ * false it renders nothing.
+ *
+ * Package discipline (as the rest of ui-nav): NO FM / router / store / icon-set
+ * imports. Labels are pre-localized strings; icons are render slots; every colour
+ * comes from the `@dloizides/ui-feedback` UiProvider theme. The consumer owns the
+ * `open` state (pair with {@link useCommandPaletteHotkey}) and each item's
+ * `onSelect` (navigate / run) — the palette just closes after a choice.
+ */
+
+/** Pre-localized labels for the palette chrome. */
+interface CommandPaletteLabels {
+    /** Search input placeholder. */
+    placeholder: string;
+    /** Accessible name of the scrim (tap to close). */
+    closeLabel: string;
+    /** Accessible hint of the scrim (tap to close). */
+    closeHint: string;
+    /** Shown when the query matches nothing. */
+    emptyText: string;
+    /** Accessible label for the palette dialog landmark. */
+    regionLabel: string;
+}
+interface CommandPaletteProps {
+    /** Whether the palette overlay is shown. */
+    open: boolean;
+    /** The commands to search over, in a meaningful (nav) order. */
+    items: readonly CommandItem[];
+    /** Close the palette (scrim tap / Escape / after a selection). */
+    onClose: () => void;
+    /** Pre-localized chrome labels. */
+    labels: CommandPaletteLabels;
+    /** testID for the panel (defaults to `command-palette`). */
+    testID?: string;
+}
+/** The overlay palette. Renders null when closed. */
+declare const CommandPalette: ({ open, items, onClose, labels, testID }: CommandPaletteProps) => React.ReactElement | null;
+
+/**
+ * Call `onOpen` when the operator presses ⌘K (macOS) or Ctrl-K (Windows/Linux),
+ * anywhere in the document. `enabled=false` unbinds (e.g. when the shell has no
+ * palette configured), so the shortcut never fires without a handler behind it.
+ */
+declare function useCommandPaletteHotkey(onOpen: () => void, enabled?: boolean): void;
+
 /**
  * Role-gated nav helpers — build a `NavItem[]` from a user's roles, reusing the
  * existing `resolveAccessibleRoutes` from `@dloizides/auth-web` (the same helper
@@ -1101,6 +1182,8 @@ declare const expandableStyles: {
         flexDirection: "row";
         alignItems: "center";
         paddingVertical: number;
+        borderLeftWidth: number;
+        borderLeftColor: string;
     };
     childItemText: {
         fontSize: number;
@@ -1114,6 +1197,7 @@ declare const expandableStyles: {
     };
     childrenContainer: {
         overflow: "hidden";
+        marginBottom: number;
     };
     header: {
         borderRadius: number;
@@ -1121,11 +1205,21 @@ declare const expandableStyles: {
         alignItems: "center";
         paddingVertical: number;
     };
+    sectionHeader: {
+        marginTop: number;
+    };
     headerText: {
         fontSize: number;
         fontWeight: "600";
         marginLeft: number;
     };
+    sectionHeaderText: {
+        fontSize: number;
+        fontWeight: "700";
+        marginLeft: number;
+        textTransform: "uppercase";
+        letterSpacing: number;
+    };
     iconWrapper: {
         width: number;
         alignItems: "center";
@@ -1138,4 +1232,4 @@ declare const NAV_ICON_SIZE = 14;
 /** Chevron icon size for expandable sections. */
 declare const CHEVRON_ICON_SIZE = 12;
 
-export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, DEFAULT_COLLAPSED_RAIL_MAX, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type ShellMessage, Sidebar, type SidebarProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, roleRoutesToNavItems, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, DEFAULT_COLLAPSED_RAIL_MAX, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type ShellMessage, Sidebar, type SidebarProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, roleRoutesToNavItems, useCommandPaletteHotkey, useContentMaxWidth };

package/dist/index.d.ts

@@ -898,6 +898,87 @@ interface NavExpandableItemProps {
 }
 declare const NavExpandableItem: ({ item, pathname, onNavigate, navigateHint, expandHint, collapseHint, renderChevron, depth, }: NavExpandableItemProps) => React.ReactElement;
 
+/**
+ * Pure matching logic for the {@link CommandPalette}. Kept framework-free so the
+ * ranking/filtering is unit-testable without rendering: a command matches when
+ * every whitespace-separated token of the query appears (case-insensitively) in
+ * its haystack (label + hint + keywords). Requiring ALL tokens lets an operator
+ * narrow with "pay dash" the way a fuzzy launcher would, without a fuzzy lib.
+ */
+
+/** One actionable destination/command shown in the palette. */
+interface CommandItem {
+    /** Stable key + default testID. */
+    key: string;
+    /** Optional testID override (defaults to `key`). */
+    testID?: string;
+    /** Localized display label (what the operator reads). */
+    label: string;
+    /** Optional localized secondary line (e.g. the module it lives in). */
+    hint?: string;
+    /** Optional extra search terms not shown but matched (synonyms, route words). */
+    keywords?: readonly string[];
+    /** Invoked when the item is chosen (the consumer navigates / runs the action). */
+    onSelect: () => void;
+    /** Optional leading icon slot, same contract as `NavItem.renderIcon`. */
+    renderIcon?: (color: string, size: number) => React.ReactNode;
+}
+/**
+ * Filter `items` to those matching `query`. An empty/whitespace query returns
+ * the list unchanged (the palette opens showing everything). Order is preserved
+ * — the caller supplies items in a meaningful order (nav order).
+ */
+declare function filterCommands(items: readonly CommandItem[], query: string): CommandItem[];
+
+/**
+ * CommandPalette — the shared ⌘K launcher for `@dloizides/ui-nav`. An overlay
+ * (scrim + centred panel) with a search input over a keyboard-navigable list of
+ * {@link CommandItem}s — jump to any nav destination (or run any action) without
+ * hunting the rail. Web-first (RN-web), but degrades safely: when `open` is
+ * false it renders nothing.
+ *
+ * Package discipline (as the rest of ui-nav): NO FM / router / store / icon-set
+ * imports. Labels are pre-localized strings; icons are render slots; every colour
+ * comes from the `@dloizides/ui-feedback` UiProvider theme. The consumer owns the
+ * `open` state (pair with {@link useCommandPaletteHotkey}) and each item's
+ * `onSelect` (navigate / run) — the palette just closes after a choice.
+ */
+
+/** Pre-localized labels for the palette chrome. */
+interface CommandPaletteLabels {
+    /** Search input placeholder. */
+    placeholder: string;
+    /** Accessible name of the scrim (tap to close). */
+    closeLabel: string;
+    /** Accessible hint of the scrim (tap to close). */
+    closeHint: string;
+    /** Shown when the query matches nothing. */
+    emptyText: string;
+    /** Accessible label for the palette dialog landmark. */
+    regionLabel: string;
+}
+interface CommandPaletteProps {
+    /** Whether the palette overlay is shown. */
+    open: boolean;
+    /** The commands to search over, in a meaningful (nav) order. */
+    items: readonly CommandItem[];
+    /** Close the palette (scrim tap / Escape / after a selection). */
+    onClose: () => void;
+    /** Pre-localized chrome labels. */
+    labels: CommandPaletteLabels;
+    /** testID for the panel (defaults to `command-palette`). */
+    testID?: string;
+}
+/** The overlay palette. Renders null when closed. */
+declare const CommandPalette: ({ open, items, onClose, labels, testID }: CommandPaletteProps) => React.ReactElement | null;
+
+/**
+ * Call `onOpen` when the operator presses ⌘K (macOS) or Ctrl-K (Windows/Linux),
+ * anywhere in the document. `enabled=false` unbinds (e.g. when the shell has no
+ * palette configured), so the shortcut never fires without a handler behind it.
+ */
+declare function useCommandPaletteHotkey(onOpen: () => void, enabled?: boolean): void;
+
 /**
  * Role-gated nav helpers — build a `NavItem[]` from a user's roles, reusing the
  * existing `resolveAccessibleRoutes` from `@dloizides/auth-web` (the same helper
@@ -1101,6 +1182,8 @@ declare const expandableStyles: {
         flexDirection: "row";
         alignItems: "center";
         paddingVertical: number;
+        borderLeftWidth: number;
+        borderLeftColor: string;
     };
     childItemText: {
         fontSize: number;
@@ -1114,6 +1197,7 @@ declare const expandableStyles: {
     };
     childrenContainer: {
         overflow: "hidden";
+        marginBottom: number;
     };
     header: {
         borderRadius: number;
@@ -1121,11 +1205,21 @@ declare const expandableStyles: {
         alignItems: "center";
         paddingVertical: number;
     };
+    sectionHeader: {
+        marginTop: number;
+    };
     headerText: {
         fontSize: number;
         fontWeight: "600";
         marginLeft: number;
     };
+    sectionHeaderText: {
+        fontSize: number;
+        fontWeight: "700";
+        marginLeft: number;
+        textTransform: "uppercase";
+        letterSpacing: number;
+    };
     iconWrapper: {
         width: number;
         alignItems: "center";
@@ -1138,4 +1232,4 @@ declare const NAV_ICON_SIZE = 14;
 /** Chevron icon size for expandable sections. */
 declare const CHEVRON_ICON_SIZE = 12;
 
-export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, DEFAULT_COLLAPSED_RAIL_MAX, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type ShellMessage, Sidebar, type SidebarProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, roleRoutesToNavItems, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, DEFAULT_COLLAPSED_RAIL_MAX, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type ShellMessage, Sidebar, type SidebarProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, roleRoutesToNavItems, useCommandPaletteHotkey, useContentMaxWidth };

package/dist/index.js

@@ -19,6 +19,7 @@ function isRouteActive(pathname, route) {
   return pathname === route || pathname.startsWith(`${route}/`);
 }
 var ACTIVE_BORDER_RADIUS = 4;
+var ACTIVE_ACCENT_WIDTH = 3;
 var NAV_LINK_GAP = 4;
 var navStyles = reactNative.StyleSheet.create({
   // --- Sidebar ---
@@ -242,23 +243,39 @@ var collapsedRailStyles = reactNative.StyleSheet.create({
   slot: { alignItems: "center" }
 });
 var expandableStyles = reactNative.StyleSheet.create({
+  // Every leaf reserves the accent-bar gutter (a TRANSPARENT left border of the
+  // same width the active item colours in) so activation never shifts the row.
   childItem: {
-    borderRadius: 4,
+    borderRadius: 6,
     flexDirection: "row",
     alignItems: "center",
-    paddingVertical: 6
+    paddingVertical: 9,
+    borderLeftWidth: ACTIVE_ACCENT_WIDTH,
+    borderLeftColor: "transparent"
   },
   childItemText: { fontSize: 14 },
   childItemTextWithIcon: { fontSize: 14, marginLeft: 6 },
   chevron: { marginLeft: "auto" },
-  childrenContainer: { overflow: "hidden" },
+  childrenContainer: { overflow: "hidden", marginBottom: 4 },
   header: {
-    borderRadius: 4,
+    borderRadius: 6,
     flexDirection: "row",
     alignItems: "center",
     paddingVertical: 8
   },
+  // Depth-0 module groups render as docs-style SECTION HEADERS: extra top rhythm
+  // to separate one module from the next.
+  sectionHeader: { marginTop: 12 },
   headerText: { fontSize: 15, fontWeight: "600", marginLeft: 6 },
+  // The section-label look: small, uppercased, tracked, muted — the aml-screening
+  // docs treatment ("START HERE" / "REFERENCE"), kept on an interactive toggle.
+  sectionHeaderText: {
+    fontSize: 12,
+    fontWeight: "700",
+    marginLeft: 6,
+    textTransform: "uppercase",
+    letterSpacing: 0.8
+  },
   iconWrapper: { width: 20, alignItems: "center" }
 });
 var BASE_INDENT = 12;
@@ -289,6 +306,13 @@ function hoverTransitionStyle(reducedMotion) {
 function ariaCurrentProps(isActive) {
   return isActive ? { "aria-current": "page" } : {};
 }
+function ariaExpandedProps(expanded) {
+  return { "aria-expanded": expanded };
+}
+function hasActiveDescendant(item, pathname) {
+  if (isRouteActive(pathname, item.route)) return true;
+  return (item.children ?? []).some((child) => hasActiveDescendant(child, pathname));
+}
 var NavExpandableItem = ({
   item,
   pathname,
@@ -299,7 +323,7 @@ var NavExpandableItem = ({
   renderChevron,
   depth = 0
 }) => {
-  const [expanded, setExpanded] = React2.useState(false);
+  const [expanded, setExpanded] = React2.useState(() => hasActiveDescendant(item, pathname));
   const [focused, setFocused] = React2.useState(false);
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
@@ -308,9 +332,15 @@ var NavExpandableItem = ({
   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 activeItemStyle = React2.useMemo(
-    () => ({ backgroundColor: colors.border, borderRadius: ACTIVE_BORDER_RADIUS }),
-    [colors.border]
+    () => ({
+      backgroundColor: colors.border,
+      borderRadius: ACTIVE_BORDER_RADIUS,
+      borderLeftWidth: ACTIVE_ACCENT_WIDTH,
+      borderLeftColor: primaryColor
+    }),
+    [colors.border, primaryColor]
   );
   const paddingStyle = React2.useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);
   const headerPaddingStyle = React2.useMemo(() => ({ paddingLeft: indent }), [indent]);
@@ -356,14 +386,29 @@ var NavExpandableItem = ({
         accessibilityLabel: item.label,
         accessibilityRole: "button",
         accessibilityState: { expanded },
-        style: [expandableStyles.header, headerPaddingStyle, focusRingStyle(focused, primaryColor)],
+        style: [
+          expandableStyles.header,
+          isSectionHeader ? expandableStyles.sectionHeader : void 0,
+          headerPaddingStyle,
+          focusRingStyle(focused, primaryColor)
+        ],
         testID: item.testID ?? item.key,
         onBlur: () => setFocused(false),
         onFocus: () => setFocused(true),
         onPress: toggle,
+        ...ariaExpandedProps(expanded),
         children: [
-          typeof item.renderIcon === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.iconWrapper, children: item.renderIcon(colors.text, NAV_ICON_SIZE) }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [expandableStyles.headerText, { color: colors.text }], children: item.label }),
+          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,
+            {
+              style: [
+                isSectionHeader ? expandableStyles.sectionHeaderText : expandableStyles.headerText,
+                { color: isSectionHeader ? colors.textSecondary : colors.text }
+              ],
+              children: item.label
+            }
+          ),
           typeof renderChevron === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.chevron, children: renderChevron(expanded, colors.textSecondary, CHEVRON_ICON_SIZE) }) : null
         ]
       }
@@ -1008,6 +1053,7 @@ var DRAWER_WIDTH = 280;
 var SCRIM_Z_INDEX = 1;
 var PANEL_Z_INDEX = 2;
 var NAV_ACTIVATABLE_SELECTOR = 'a, [role="button"], [role="link"]';
+var NAV_TOGGLE_SELECTOR = "[aria-expanded]";
 var DEFAULT_DRAWER_LABELS = {
   openLabel: "Menu",
   openHint: "Open the navigation menu",
@@ -1070,8 +1116,10 @@ var MobileDrawer = ({
     if (node === null || typeof node.addEventListener !== "function") return void 0;
     const handleClick = (event) => {
       const target = event.target;
-      const onNavItem = target !== null && target.closest(NAV_ACTIVATABLE_SELECTOR) !== null;
-      if (onNavItem) onClose();
+      if (target === null) return;
+      const activatable = target.closest(NAV_ACTIVATABLE_SELECTOR);
+      const isToggle = activatable !== null && activatable.closest(NAV_TOGGLE_SELECTOR) !== null;
+      if (activatable !== null && !isToggle) onClose();
     };
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);
@@ -1484,6 +1532,159 @@ var DarkModeControl = ({
     }
   );
 };
+
+// src/commandPaletteFilter.ts
+function haystack(item) {
+  return [item.label, item.hint ?? "", ...item.keywords ?? []].join(" ").toLowerCase();
+}
+function filterCommands(items, query) {
+  const tokens = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+  if (tokens.length === 0) return [...items];
+  return items.filter((item) => {
+    const hay = haystack(item);
+    return tokens.every((token) => hay.includes(token));
+  });
+}
+var SCRIM_COLOR2 = "rgba(0, 0, 0, 0.5)";
+var OVERLAY_Z_INDEX = 60;
+var PANEL_MAX_WIDTH = 560;
+var PANEL_TOP_OFFSET = 88;
+var LIST_MAX_HEIGHT = 360;
+var KEY_DOWN = "ArrowDown";
+var KEY_UP = "ArrowUp";
+var KEY_ENTER = "Enter";
+var KEY_ESCAPE = "Escape";
+var styles4 = reactNative.StyleSheet.create({
+  overlay: { ...reactNative.StyleSheet.absoluteFillObject, zIndex: OVERLAY_Z_INDEX, alignItems: "center" },
+  scrim: { ...reactNative.StyleSheet.absoluteFillObject, backgroundColor: SCRIM_COLOR2 },
+  panel: {
+    marginTop: PANEL_TOP_OFFSET,
+    width: "92%",
+    maxWidth: PANEL_MAX_WIDTH,
+    borderRadius: 12,
+    borderWidth: 1,
+    overflow: "hidden"
+  },
+  input: { fontSize: 16, paddingHorizontal: 16, paddingVertical: 14, borderBottomWidth: 1 },
+  list: { maxHeight: LIST_MAX_HEIGHT },
+  row: { flexDirection: "row", alignItems: "center", paddingHorizontal: 16, paddingVertical: 12, columnGap: 10 },
+  rowText: { flex: 1 },
+  rowLabel: { fontSize: 15, fontWeight: "600" },
+  rowHint: { fontSize: 12, marginTop: 2 },
+  empty: { paddingHorizontal: 16, paddingVertical: 20, fontSize: 14 }
+});
+var PaletteRow = ({ item, selected, onChoose }) => {
+  const { theme } = uiFeedback.useUi();
+  const colors = theme.colors;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      accessibilityHint: item.hint,
+      accessibilityLabel: item.label,
+      accessibilityRole: "button",
+      accessibilityState: { selected },
+      style: [styles4.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: styles4.rowText, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.rowLabel, { color: colors.text }], children: item.label }),
+          item.hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
+        ] })
+      ]
+    }
+  );
+};
+var CommandPalette = ({ open, items, onClose, labels, testID }) => {
+  const { theme } = uiFeedback.useUi();
+  const colors = theme.colors;
+  const [query, setQuery] = React2.useState("");
+  const [selected, setSelected] = React2.useState(0);
+  const inputRef = React2.useRef(null);
+  const results = React2.useMemo(() => filterCommands(items, query), [items, query]);
+  React2.useEffect(() => {
+    if (!open) return;
+    setQuery("");
+    setSelected(0);
+    inputRef.current?.focus();
+  }, [open]);
+  React2.useEffect(() => {
+    setSelected((prev) => Math.min(prev, Math.max(0, results.length - 1)));
+  }, [results.length]);
+  const choose = React2.useCallback(
+    (item) => {
+      item.onSelect();
+      onClose();
+    },
+    [onClose]
+  );
+  const onKeyPress = React2.useCallback(
+    (event) => {
+      const key = event.nativeEvent.key;
+      if (key === KEY_DOWN) setSelected((i) => Math.min(i + 1, results.length - 1));
+      else if (key === KEY_UP) setSelected((i) => Math.max(i - 1, 0));
+      else if (key === KEY_ESCAPE) onClose();
+      else if (key === KEY_ENTER && results[selected]) choose(results[selected]);
+    },
+    [results, selected, choose, onClose]
+  );
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.overlay, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        accessibilityHint: labels.closeHint,
+        accessibilityLabel: labels.closeLabel,
+        accessibilityRole: "button",
+        style: styles4.scrim,
+        testID: `${testID ?? "command-palette"}-scrim`,
+        onPress: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        "aria-modal": true,
+        "aria-label": labels.regionLabel,
+        role: "dialog",
+        style: [styles4.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
+        testID: testID ?? "command-palette",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.TextInput,
+            {
+              ref: inputRef,
+              accessibilityLabel: labels.placeholder,
+              placeholder: labels.placeholder,
+              placeholderTextColor: colors.textSecondary,
+              style: [styles4.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: [styles4.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { keyboardShouldPersistTaps: "handled", style: styles4.list, children: results.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
+        ]
+      }
+    )
+  ] });
+};
+var LAUNCH_KEY = "k";
+function useCommandPaletteHotkey(onOpen, enabled = true) {
+  React2.useEffect(() => {
+    if (!enabled || typeof document === "undefined") return void 0;
+    const handler = (event) => {
+      const isLauncher = event.key.toLowerCase() === LAUNCH_KEY && (event.metaKey || event.ctrlKey);
+      if (!isLauncher) return;
+      event.preventDefault();
+      onOpen();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onOpen, enabled]);
+}
 function roleRoutesToNavItems(routes, translate) {
   return routes.map((entry) => ({
     key: entry.role,
@@ -1501,6 +1702,7 @@ exports.AppShell = AppShell;
 exports.BASE_INDENT = BASE_INDENT;
 exports.CHEVRON_ICON_SIZE = CHEVRON_ICON_SIZE;
 exports.CollapsedRail = CollapsedRail;
+exports.CommandPalette = CommandPalette;
 exports.DEFAULT_COLLAPSED_RAIL_MAX = DEFAULT_COLLAPSED_RAIL_MAX;
 exports.DarkModeControl = DarkModeControl;
 exports.NAV_ICON_SIZE = NAV_ICON_SIZE;
@@ -1519,12 +1721,14 @@ exports.accessibleNavItems = accessibleNavItems;
 exports.collapsedRailStyles = collapsedRailStyles;
 exports.darkModeStyles = darkModeStyles;
 exports.expandableStyles = expandableStyles;
+exports.filterCommands = filterCommands;
 exports.isRouteActive = isRouteActive;
 exports.navStyles = navStyles;
 exports.pillNavStyles = pillNavStyles;
 exports.resolveContentMaxWidth = resolveContentMaxWidth;
 exports.resolveRailMode = resolveRailMode;
 exports.roleRoutesToNavItems = roleRoutesToNavItems;
+exports.useCommandPaletteHotkey = useCommandPaletteHotkey;
 exports.useContentMaxWidth = useContentMaxWidth;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map