@planningcenter/topbar 12.4.0-rc.0 → 12.4.0-rc.2

package/dist/topbar.js

@@ -41,7 +41,7 @@ var churchCenter__namespace = /*#__PURE__*/_interopNamespaceDefault(churchCenter
 var people__namespace = /*#__PURE__*/_interopNamespaceDefault(people);
 var toolbar__namespace = /*#__PURE__*/_interopNamespaceDefault(toolbar);
 
-var styles$l = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
+var styles$m = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
 
 const AccessibilityToolbar = ({
   children
@@ -53,7 +53,7 @@ const AccessibilityToolbar = ({
     (_a = document.getElementById("main-content")) === null || _a === void 0 ? void 0 : _a.focus();
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$l["accessibility-toolbar"]
+    className: styles$m["accessibility-toolbar"]
   }, /*#__PURE__*/React.createElement(tapestry.Link, {
     href: "#main-content",
     kind: "primary",
@@ -372,11 +372,11 @@ const X = ({
   fill: fill
 })));
 
-var styles$k = {"announcement":"announcement-pI5tM","announcement--platform":"announcement--platform-EcUn2","announcement--promo":"announcement--promo-FarUk","announcement-icon":"announcement-icon-Ov39-","announcement-content":"announcement-content-q2ad6","dismiss":"dismiss-wUAoU","dismiss--promo":"dismiss--promo-7zvO4"};
+var styles$l = {"announcement":"announcement-pI5tM","announcement--platform":"announcement--platform-EcUn2","announcement--promo":"announcement--promo-FarUk","announcement-icon":"announcement-icon-Ov39-","announcement-content":"announcement-content-q2ad6","dismiss":"dismiss-wUAoU","dismiss--promo":"dismiss--promo-7zvO4"};
 
 function AnnouncementIcon() {
   return /*#__PURE__*/React.createElement("svg", {
-    className: styles$k["announcement-icon"],
+    className: styles$l["announcement-icon"],
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
@@ -501,7 +501,7 @@ let StyledAnnouncement$1 = class StyledAnnouncement extends React.Component {
     } = this.props;
     const isPromo = variant === "promo";
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames(styles$k["announcement"], styles$k[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
+      className: classnames(styles$l["announcement"], styles$l[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
       "data-announcement-variant": variant !== null && variant !== void 0 ? variant : "platform",
       style: isPromo ? {
         backgroundImage: promoBackgroundUrl,
@@ -510,7 +510,7 @@ let StyledAnnouncement$1 = class StyledAnnouncement extends React.Component {
         backgroundSize: "cover"
       } : undefined
     }, !isPromo && /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
-      className: styles$k["announcement-content"],
+      className: styles$l["announcement-content"],
       style: style,
       ...platformProps
     }));
@@ -559,7 +559,7 @@ function StyledDismissButton$1({
   const isPromo = variant === "promo";
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classnames(styles$k.dismiss, isPromo && styles$k["dismiss--promo"]),
+    className: classnames(styles$l.dismiss, isPromo && styles$l["dismiss--promo"]),
     ...props
   }, /*#__PURE__*/React.createElement(X, {
     fill: isPromo ? "currentColor" : "white",
@@ -639,9 +639,9 @@ class StyledAnnouncement extends React.Component {
       ...platformProps
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$k["announcement"]
+      className: styles$l["announcement"]
     }, /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
-      className: styles$k["announcement-content"],
+      className: styles$l["announcement-content"],
       style: style,
       ...platformProps
     }));
@@ -652,7 +652,7 @@ function StyledDismissButton({
 }) {
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$k.dismiss,
+    className: styles$l.dismiss,
     ...props
   }, /*#__PURE__*/React.createElement(X, {
     fill: "white",
@@ -1774,7 +1774,7 @@ function MonoAppIcon({
   })) : (/*#__PURE__*/React.createElement("div", null, "appName not supported")));
 }
 
-var styles$j = {"icon-slot":"icon-slot-m3ZIk","name":"name-UNqbW"};
+var styles$k = {"icon-slot":"icon-slot-m3ZIk","name":"name-UNqbW"};
 
 const AppRow = ({
   appName,
@@ -1783,24 +1783,24 @@ const AppRow = ({
 }) => {
   if (appName === "Accounts") {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: styles$j["icon-slot"]
+      className: styles$k["icon-slot"]
     }, /*#__PURE__*/React.createElement(MonoAppIcon, {
       appName: "Accounts",
       colors: colors,
       size: iconSize
     })), /*#__PURE__*/React.createElement("span", {
-      className: styles$j.name
+      className: styles$k.name
     }, "Account settings"));
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorAppIcon, {
     appName: appName.replace(/[\s-]/, ""),
     size: iconSize
   }), /*#__PURE__*/React.createElement("span", {
-    className: styles$j.name
+    className: styles$k.name
   }, appName));
 };
 
-var styles$i = {"button":"button-XMbeQ","label":"label-884of","chevron":"chevron-RRg9k"};
+var styles$j = {"button":"button-XMbeQ","label":"label-884of","chevron":"chevron-RRg9k"};
 
 const AppsButton = /*#__PURE__*/React.forwardRef(({
   appName,
@@ -1812,10 +1812,10 @@ const AppsButton = /*#__PURE__*/React.forwardRef(({
     ...restProps,
     ref: ref,
     "aria-label": `App switcher: ${appName}`,
-    className: styles$i.button,
+    className: styles$j.button,
     kind: "neutral-inline",
     label: /*#__PURE__*/React.createElement("span", {
-      className: styles$i.label
+      className: styles$j.label
     }, isAccounts ? "Account settings" : appName),
     prefix: isAccounts ? (/*#__PURE__*/React.createElement(MonoAppIcon, {
       appName: "Accounts",
@@ -1826,13 +1826,13 @@ const AppsButton = /*#__PURE__*/React.forwardRef(({
       size: 22
     })),
     suffix: /*#__PURE__*/React.createElement(DisclosureChevronIcon, {
-      className: `${styles$i.chevron} symbol`
+      className: `${styles$j.chevron} symbol`
     })
   });
 });
 AppsButton.displayName = "AppsButton";
 
-var styles$h = {"nav":"nav-y-6ML","popover-content":"popover-content-jOAAY","list":"list-jUxvp","link":"link-LMp2h","current":"current-4U4VL","accounts-item":"accounts-item-erJW0","accounts-link":"accounts-link-4jwPW"};
+var styles$i = {"nav":"nav-y-6ML","popover-content":"popover-content-jOAAY","list":"list-jUxvp","link":"link-LMp2h","current":"current-4U4VL","accounts-item":"accounts-item-erJW0","accounts-link":"accounts-link-4jwPW"};
 
 const AppsMenu = ({
   appName,
@@ -1853,8 +1853,8 @@ const AppsMenu = ({
     }, /*#__PURE__*/React.createElement("a", {
       "aria-current": isCurrent ? "page" : undefined,
       "aria-label": name,
-      className: classnames(styles$h.link, {
-        [styles$h.current]: isCurrent
+      className: classnames(styles$i.link, {
+        [styles$i.current]: isCurrent
       }),
       "data-pendo": `app-switcher--change-app--${name}`,
       "data-turbolinks": false,
@@ -1870,22 +1870,22 @@ const AppsMenu = ({
     colors: colors
   })), /*#__PURE__*/React.createElement(tapestry.PopoverContent, {
     "aria-label": "Switch app",
-    className: styles$h["popover-content"],
+    className: styles$i["popover-content"],
     placement: "bottom start"
   }, /*#__PURE__*/React.createElement("nav", {
-    className: styles$h.nav,
+    className: styles$i.nav,
     "data-pendo": "app-switcher"
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$h.list,
+    className: styles$i.list,
     role: "list"
   }, homeProduct && renderProductLink(homeProduct.name), restProducts.map(({
     name
   }) => renderProductLink(name)), accountsProduct && (/*#__PURE__*/React.createElement("li", {
-    className: styles$h["accounts-item"]
+    className: styles$i["accounts-item"]
   }, /*#__PURE__*/React.createElement("a", {
     "aria-current": appName === accountsProduct.name ? "page" : undefined,
     "aria-label": "Account settings",
-    className: classnames(styles$h.link, styles$h["accounts-link"]),
+    className: classnames(styles$i.link, styles$i["accounts-link"]),
     "data-pendo": "app-switcher--change-app--Accounts",
     "data-turbolinks": false,
     href: pcoUrl$1(env)("accounts") + getAppsSwitchProductPath(accountsProduct.name)
@@ -2093,7 +2093,7 @@ function MonoAppName({
   })) : (/*#__PURE__*/React.createElement("div", null, "appName not supported"));
 }
 
-var styles$g = {"unbutton":"unbutton-lEbTR"};
+var styles$h = {"unbutton":"unbutton-lEbTR"};
 
 function Unbutton({
   className,
@@ -2102,7 +2102,7 @@ function Unbutton({
   ...nativeProps
 }) {
   return /*#__PURE__*/React.createElement("button", {
-    className: classnames(styles$g.unbutton, className),
+    className: classnames(styles$h.unbutton, className),
     style: {
       ...style
     },
@@ -2111,7 +2111,7 @@ function Unbutton({
   });
 }
 
-var styles$f = {"button":"button-wsipc","button-accounts":"button-accounts-zQmBM","chevron":"chevron-obyBF","is-expanded":"is-expanded-PoCQ9"};
+var styles$g = {"button":"button-wsipc","button-accounts":"button-accounts-zQmBM","chevron":"chevron-obyBF","is-expanded":"is-expanded-PoCQ9"};
 
 const LegacyAppsButton = ({
   appName,
@@ -2126,8 +2126,8 @@ const LegacyAppsButton = ({
     "aria-haspopup": "true",
     "aria-label": `App switcher: ${appName}`,
     onClick: onClick,
-    className: classnames(styles$f.button, {
-      [styles$f["is-expanded"]]: expanded
+    className: classnames(styles$g.button, {
+      [styles$g["is-expanded"]]: expanded
     }),
     type: "button",
     style: style,
@@ -2136,7 +2136,7 @@ const LegacyAppsButton = ({
     appName: "Accounts",
     colors: colors
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$f["button-accounts"]
+    className: styles$g["button-accounts"]
   }, "Account settings"))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorAppIcon, {
     appName: appName.replace(/[\s-]/, "")
   }), /*#__PURE__*/React.createElement(MonoAppName, {
@@ -2144,7 +2144,7 @@ const LegacyAppsButton = ({
     key: "mono-app-name",
     size: 24
   }))), /*#__PURE__*/React.createElement(DisclosureChevronIcon, {
-    className: styles$f.chevron,
+    className: styles$g.chevron,
     key: "disclosure-chevron-icon"
   }));
 };
@@ -2277,7 +2277,7 @@ class Outsider extends React.Component {
   }
 }
 
-var styles$e = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
+var styles$f = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
 
 const Popup = ({
   className,
@@ -2285,8 +2285,8 @@ const Popup = ({
   isVisible,
   ...nativeProps
 }) => (/*#__PURE__*/React.createElement(C, {
-  className: classnames(styles$e.popup, {
-    [styles$e["is-visible"]]: isVisible
+  className: classnames(styles$f.popup, {
+    [styles$f["is-visible"]]: isVisible
   }, className),
   ...nativeProps
 }));
@@ -2294,11 +2294,11 @@ const Popup = ({
 const PopupRoot = ({
   ...nativeProps
 }) => (/*#__PURE__*/React.createElement("div", {
-  className: styles$e["popup-root"],
+  className: styles$f["popup-root"],
   ...nativeProps
 }));
 
-var styles$d = {"popup":"popup-bVhSa"};
+var styles$e = {"popup":"popup-bVhSa"};
 
 const LegacyAppsMenu = ({
   appName,
@@ -2336,7 +2336,7 @@ const LegacyAppsMenu = ({
     cleanup: !visible,
     component: Outsider,
     onOutsideClick: toggle,
-    className: styles$d.popup,
+    className: styles$e.popup,
     isVisible: visible
   }, /*#__PURE__*/React.createElement("menu", {
     ref: menuRef,
@@ -3249,27 +3249,34 @@ const useUpdateStore = () => React.useCallback(updates => {
 const isMac = () => /Mac|iPhone|iPad|iPod/.test(navigator.platform);
 const hasCommandKey = event => isMac() ? event.metaKey : event.ctrlKey;
 const commandKeyLabel = () => isMac() ? "⌘" : "Ctrl+";
+const isSearchShortcut = event => event.key.toLowerCase() === "k" && !event.altKey && !event.shiftKey && hasCommandKey(event);
+// Products opened their own search with `/` before this one replaced it.
+const isLegacySearchShortcut = event => event.key === "/" && !event.altKey && !event.ctrlKey && !event.metaKey && !isTypingIn(event.target);
+const isCopyShortcut = event => event.key.toLowerCase() === "c" && !event.altKey && !event.shiftKey && hasCommandKey(event);
+const isTypingIn = target => target instanceof Element && target.closest('input, select, textarea, [contenteditable]:not([contenteditable="false"])') !== null;
+const isTypingKey = event => event.key.length === 1 && event.key !== " " && !event.altKey && !event.ctrlKey && !event.metaKey;
+const verticalStep = key => ({
+  ArrowDown: 1,
+  ArrowUp: -1
+})[key];
+const horizontalStep = key => ({
+  ArrowLeft: -1,
+  ArrowRight: 1
+})[key];
 
-const STORAGE_KEY = "topbar.product_search.last_product";
-function readLastProduct() {
-  try {
-    return localStorage.getItem(STORAGE_KEY);
-  } catch {
-    return null;
-  }
-}
-function saveLastProduct(slug) {
-  try {
-    localStorage.setItem(STORAGE_KEY, slug);
-  } catch {
-    // Storage can be full or blocked; search still works without it.
-  }
+function SearchButton({
+  onClick
+}) {
+  return /*#__PURE__*/React.createElement("button", {
+    "aria-keyshortcuts": `${isMac() ? "Meta+K" : "Control+K"} /`,
+    "aria-label": "Search",
+    onClick: onClick,
+    type: "button"
+  }, /*#__PURE__*/React.createElement(Spyglass, {
+    fill: "currentColor"
+  }));
 }
 
-var styles$c = {"visuallyHidden":"visuallyHidden-C28ju"};
-
-var styles$b = {"tab":"tab-lQLDx"};
-
 // useId isn't available on React 17, which our peer range still supports.
 let instanceCount$1 = 0;
 function useInstanceId(prefix) {
@@ -3277,58 +3284,237 @@ function useInstanceId(prefix) {
   return id;
 }
 
-function ProductTabs({
-  children,
-  onKeyDown,
-  onSelect,
-  products,
-  selected
-}) {
-  const id = useInstanceId("product-tabs");
-  const tabId = slug => `${id}-tab-${slug}`;
-  const tabRefs = React.useRef(new Map());
-  const handleKeyDown = event => {
-    var _a;
-    const offset = {
-      ArrowLeft: -1,
-      ArrowRight: 1
-    }[event.key];
-    if (offset) {
-      event.preventDefault();
-      const index = products.indexOf(selected);
-      const next = products[(index + offset + products.length) % products.length];
-      onSelect(next.slug);
-      (_a = tabRefs.current.get(next.slug)) === null || _a === void 0 ? void 0 : _a.focus();
+// The versions home-mobile pins, so web and mobile read the same response
+// shapes. Some endpoints only exist from a version on: Registrations' me,
+// product_search_results, and pcrl_lookups need 2025-05-01.
+const API_VERSIONS = {
+  calendar: "2022-07-07",
+  "check-ins": "2025-05-28",
+  giving: "2019-10-18",
+  groups: "2023-07-10",
+  home: "2018-08-01",
+  people: "2023-03-21",
+  publishing: "2024-03-25",
+  registrations: "2025-05-01",
+  services: "2018-11-01"
+};
+// For a `/~api/{product}/v2/...` URL, the header that pins its product's
+// version.
+function apiVersionHeaders(url) {
+  const [,, product] = new URL(url).pathname.split("/");
+  const version = API_VERSIONS[product];
+  if (version) {
+    return {
+      "X-PCO-API-Version": version
+    };
+  } else {
+    return {};
+  }
+}
+
+const CACHE_TTL_MS = 60000;
+const MAX_ENTRIES$1 = 50;
+const cache = new Map();
+function cachedRequest(url) {
+  const cached = cache.get(url);
+  if (cached && cached.expiresAt > Date.now()) {
+    // Re-inserting keeps the Map in recently-used order for eviction.
+    cache.delete(url);
+    cache.set(url, cached);
+    return cached.promise;
+  } else {
+    return fetchIntoCache(url);
+  }
+}
+function fetchIntoCache(url) {
+  const promise = apiRequest(defaultFetch, url, {
+    headers: apiVersionHeaders(url)
+  }).then(({
+    json,
+    ok
+  }) => {
+    if (!ok || json === null) throw new Error(`Request failed: ${url}`);
+    return json;
+  });
+  // In-flight entries never expire, so every caller shares the one fetch.
+  const entry = {
+    expiresAt: Infinity,
+    promise
+  };
+  cache.set(url, entry);
+  promise.then(() => entry.expiresAt = Date.now() + CACHE_TTL_MS, () => cache.get(url) === entry && cache.delete(url));
+  if (cache.size > MAX_ENTRIES$1) cache.delete(cache.keys().next().value);
+  return promise;
+}
+function useCachedRequest(url) {
+  const [settled, setSettled] = React.useState();
+  React.useEffect(() => {
+    if (url) {
+      let current = true;
+      cachedRequest(url).then(data => current && setSettled({
+        data,
+        url
+      }), () => current && setSettled({
+        failed: true,
+        url
+      }));
+      return () => {
+        current = false;
+      };
     } else {
-      onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+      return undefined;
+    }
+  }, [url]);
+  if (!url) {
+    return {
+      status: "idle"
+    };
+  } else if ((settled === null || settled === void 0 ? void 0 : settled.url) !== url) {
+    return {
+      data: settled && "data" in settled ? settled.data : undefined,
+      status: "loading"
+    };
+  } else if ("data" in settled) {
+    return {
+      data: settled.data,
+      status: "done"
+    };
+  } else {
+    return {
+      status: "error"
+    };
+  }
+}
+// One request per URL, for callers that fan out to a varying number of
+// endpoints. Unlike `useCachedRequest`, a URL that hasn't settled yet has no
+// earlier data to fall back on.
+function useCachedRequests(urls) {
+  const [settled, setSettled] = React.useState({});
+  // Keyed by value because each settle re-renders the caller, and a caller
+  // that builds a fresh `urls` array on render would otherwise loop forever.
+  const key = urls.join("\n");
+  React.useEffect(() => {
+    let current = true;
+    const settle = result => current && setSettled(prev => ({
+      ...prev,
+      [result.url]: result
+    }));
+    for (const url of key.split("\n").filter(Boolean)) {
+      cachedRequest(url).then(data => settle({
+        data,
+        url
+      }), () => settle({
+        failed: true,
+        url
+      }));
     }
+    return () => {
+      current = false;
+    };
+  }, [key]);
+  return urls.map(url => {
+    const result = settled[url];
+    if (!result) {
+      return {
+        status: "loading"
+      };
+    } else if ("data" in result) {
+      return {
+        data: result.data,
+        status: "done"
+      };
+    } else {
+      return {
+        status: "error"
+      };
+    }
+  });
+}
+
+function productSearchUrl(product, query) {
+  const params = new URLSearchParams({
+    per_page: "100",
+    "where[term]": query
+  });
+  return `${window.location.origin}/~api/${product}/v2/product_search_results?${params}`;
+}
+function groupByType({
+  data,
+  meta
+}) {
+  var _a, _b;
+  const typeOrder = (_a = meta === null || meta === void 0 ? void 0 : meta.type_order) !== null && _a !== void 0 ? _a : [];
+  const groups = new Map();
+  for (const result of data) {
+    const {
+      type
+    } = result.attributes;
+    if (!groups.has(type)) groups.set(type, {
+      results: [],
+      type
+    });
+    (_b = groups.get(type)) === null || _b === void 0 ? void 0 : _b.results.push(result);
+  }
+  const rank = type => {
+    const index = typeOrder.indexOf(type);
+    return index === -1 ? typeOrder.length : index;
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    "aria-label": "Product",
-    onKeyDown: handleKeyDown,
-    role: "tablist"
-  }, products.map(product => (/*#__PURE__*/React.createElement("button", {
-    "aria-controls": `${id}-panel`,
-    "aria-selected": product === selected,
-    className: styles$b.tab,
-    id: tabId(product.slug),
-    key: product.slug,
-    onClick: () => onSelect(product.slug),
-    ref: element => {
-      if (element) {
-        tabRefs.current.set(product.slug, element);
-      } else {
-        tabRefs.current.delete(product.slug);
-      }
-    },
-    role: "tab",
-    tabIndex: product === selected ? 0 : -1,
-    type: "button"
-  }, product.appName)))), /*#__PURE__*/React.createElement("div", {
-    "aria-labelledby": tabId(selected.slug),
-    id: `${id}-panel`,
-    role: "tabpanel"
-  }, children));
+  return [...groups.values()].sort((a, b) => rank(a.type) - rank(b.type));
+}
+
+function useDebouncedValue(value, delay) {
+  const [debounced, setDebounced] = React.useState(value);
+  React.useEffect(() => {
+    const timeout = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(timeout);
+  }, [value, delay]);
+  return debounced;
+}
+
+const SEARCH_DEBOUNCE_MS = 300;
+function useProductSearch(product, term) {
+  const query = term.trim();
+  const debouncedQuery = useDebouncedValue(query, SEARCH_DEBOUNCE_MS);
+  const request = useCachedRequest(debouncedQuery ? productSearchUrl(product, debouncedQuery) : null);
+  const response = "data" in request ? request.data : undefined;
+  const settledProduct = useSettledProduct(product, request.status);
+  // While a request loads, the previous response stays on screen, but only
+  // if it was for this product: People results must never show under the
+  // Services tab.
+  const visibleResponse = request.status === "done" || settledProduct === product ? response : undefined;
+  const groups = React.useMemo(() => visibleResponse && groupByType(visibleResponse), [visibleResponse]);
+  if (!query) {
+    return {
+      status: "idle"
+    };
+  } else if (query !== debouncedQuery) {
+    return {
+      groups,
+      status: "loading"
+    };
+  } else if (request.status === "done") {
+    return {
+      groups: groups !== null && groups !== void 0 ? groups : [],
+      status: "done"
+    };
+  } else if (request.status === "error") {
+    return {
+      status: "error"
+    };
+  } else {
+    return {
+      groups,
+      status: "loading"
+    };
+  }
+}
+// The product the most recent finished request was for.
+function useSettledProduct(product, status) {
+  const [settledProduct, setSettledProduct] = React.useState();
+  React.useEffect(() => {
+    if (status === "done") setSettledProduct(product);
+  }, [product, status]);
+  return settledProduct;
 }
 
 function parseValue(element) {
@@ -3397,10 +3583,14 @@ function useRecentlyVisitableMetadata() {
   return shim.useSyncExternalStore(recentlyVisitableMetadataStore.subscribe, () => recentlyVisitableMetadataStore.getState().metadata);
 }
 
-const MAX_ENTRIES$1 = 20;
-const FORMAT_VERSION = 1;
+// Entries match the ones home-mobile stores, so one list can sync across web
+// and mobile.
+const ENTRY_VERSION = 3;
+const MAX_ENTRIES = 50;
 const MAX_TEXT_LENGTH = 200;
 const PRODUCTS = ["accounts", "calendar", "check-ins", "giving", "groups", "home", "login", "people", "publishing", "registrations", "services"];
+// Login has no pages worth returning to.
+const APPS = PRODUCTS.filter(product => product !== "login");
 function isId(value) {
   return value !== "" && Array.from(value).every(character => character >= "0" && character <= "9");
 }
@@ -3409,26 +3599,47 @@ function isPcrl(value) {
   const segments = value.split("/");
   return segments.length === 4 && PRODUCTS.some(product => product === segments[0]) && isId(segments[3]);
 }
+function isApp(value) {
+  return APPS.some(app => app === value);
+}
+// Links are built by resolving the path against its app's origin, so a stored
+// path must not be able to resolve anywhere else (`//evil.com`, `/\evil.com`).
+function isPath(value) {
+  const origin = "https://app.invalid";
+  try {
+    return typeof value === "string" && value.startsWith("/") && new URL(value, origin).origin === origin;
+  } catch {
+    return false;
+  }
+}
 function isNonBlankString(value) {
   return typeof value === "string" && value.trim() !== "";
 }
+function isOptionalString(value) {
+  return value === undefined || typeof value === "string";
+}
 function isRecord(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
+function isPageMetadata(value) {
+  return value === undefined || isRecord(value) && isOptionalString(value.details) && isOptionalString(value.type);
+}
+// The query string is part of the link but not of the page's identity, so
+// revisiting with other filters moves the existing entry instead of adding one.
 function entryKey(entry) {
   if (entry.type === "resource") {
     return `resource:${entry.pcrl}`;
   } else {
-    return `page:${entry.product}:${entry.path}`;
+    return `page:${entry.app}:${entry.path.split("?")[0]}`;
   }
 }
 function isEntry(value) {
-  if (!isRecord(value)) {
+  if (!isRecord(value) || value.version !== ENTRY_VERSION || typeof value.visitedAt !== "string") {
     return false;
   } else if (value.type === "resource") {
     return typeof value.pcrl === "string" && isPcrl(value.pcrl);
   } else if (value.type === "page") {
-    return isNonBlankString(value.product) && isNonBlankString(value.title) && isNonBlankString(value.path) && typeof value.details === "string";
+    return isApp(value.app) && isPath(value.path) && isNonBlankString(value.title) && isPageMetadata(value.metadata);
   } else {
     return false;
   }
@@ -3437,58 +3648,114 @@ function isEntry(value) {
 function clampText(value) {
   return Array.from(value).slice(0, MAX_TEXT_LENGTH).join("");
 }
-function clampEntry(entry) {
-  if (entry.type === "resource") {
-    return entry;
+function clampMetadata({
+  details,
+  type
+}) {
+  return {
+    ...(details && {
+      details: clampText(details)
+    }),
+    ...(type && {
+      type: clampText(type)
+    })
+  };
+}
+function clampVisit(visit) {
+  if (visit.type === "resource") {
+    return visit;
   } else {
     return {
-      ...entry,
-      details: clampText(entry.details),
-      title: clampText(entry.title)
+      ...visit,
+      ...(visit.metadata && {
+        metadata: clampMetadata(visit.metadata)
+      }),
+      title: clampText(visit.title.trim())
     };
   }
 }
+function toEntry(visit, visitedAt) {
+  return {
+    ...clampVisit(visit),
+    version: ENTRY_VERSION,
+    visitedAt: visitedAt.toISOString()
+  };
+}
 // Recents are disposable: anything unexpected reads as an empty list (or, for
 // a single bad entry, a list without it) rather than throwing.
-function parseRecentlyVisited(value, personId) {
+function parseRecentlyVisited(value) {
   let parsed = null;
   try {
     parsed = JSON.parse(value !== null && value !== void 0 ? value : "null");
   } catch {
     parsed = null;
   }
-  if (isRecord(parsed) && parsed.v === FORMAT_VERSION && parsed.person === personId && Array.isArray(parsed.entries)) {
-    return parsed.entries.filter(isEntry);
+  if (Array.isArray(parsed)) {
+    return parsed.filter(isEntry);
   } else {
     return [];
   }
 }
-function addVisit(entries, visit) {
-  const key = entryKey(visit);
-  return [clampEntry(visit), ...entries.filter(entry => entryKey(entry) !== key)].slice(0, MAX_ENTRIES$1);
-}
-function serializeRecentlyVisited(entries, personId) {
-  return JSON.stringify({
-    entries,
-    person: personId,
-    v: FORMAT_VERSION
-  });
+function addVisit(entries, entry) {
+  const key = entryKey(entry);
+  return [entry, ...entries.filter(existing => entryKey(existing) !== key)].slice(0, MAX_ENTRIES);
 }
 
-// The product whose URL, in this environment, has the current page's host.
+// The app whose URL, in this environment, has the current page's host.
 // Reversing pcoUrl handles every environment @planningcenter/url knows about,
-// and guarantees the stored product rebuilds a working link.
-function currentProduct() {
+// and guarantees the stored app rebuilds a working link.
+function currentApp() {
   var _a;
-  return (_a = PRODUCTS.find(product => new URL(pcoUrl$1.pcoUrl(product)).hostname === window.location.hostname)) !== null && _a !== void 0 ? _a : null;
+  return (_a = APPS.find(app => new URL(pcoUrl$1.pcoUrl(app)).hostname === window.location.hostname)) !== null && _a !== void 0 ? _a : null;
 }
-function detailsFromMetadata(metadata) {
+function isFilled(value) {
+  return typeof value === "string" && value !== "";
+}
+// The tag's metadata is product-supplied JSON; only its string `type` and
+// `details` carry over, and an entry without either has no metadata at all.
+function metadataFromPage(metadata) {
   var _a;
   try {
-    const details = (_a = JSON.parse(metadata !== null && metadata !== void 0 ? metadata : "{}")) === null || _a === void 0 ? void 0 : _a.details;
-    return typeof details === "string" ? details : "";
+    const {
+      details,
+      type
+    } = (_a = JSON.parse(metadata !== null && metadata !== void 0 ? metadata : "{}")) !== null && _a !== void 0 ? _a : {};
+    if (isFilled(details) || isFilled(type)) {
+      return {
+        ...(isFilled(details) && {
+          details
+        }),
+        ...(isFilled(type) && {
+          type
+        })
+      };
+    } else {
+      return undefined;
+    }
   } catch {
-    return "";
+    return undefined;
+  }
+}
+// Staff impersonating someone browse under `/O<org id>/P<person id>/…`.
+function withoutImpersonation(segments) {
+  const [org = "", person = ""] = segments;
+  if (org.startsWith("O") && isId(org.slice(1)) && person.startsWith("P") && isId(person.slice(1))) {
+    return segments.slice(2);
+  } else {
+    return segments;
+  }
+}
+// Normalized the way home-mobile does it, so a page visited on web and on
+// mobile is one entry once the list syncs.
+function pathFromLocation({
+  pathname,
+  search
+}) {
+  const segments = withoutImpersonation(pathname.split("/").filter(Boolean));
+  if (segments.length === 0) {
+    return "/";
+  } else {
+    return `/${segments.join("/")}${search.length > 1 ? search : ""}`;
   }
 }
 // pco:resource is the more specific signal, so it wins when both tags are
@@ -3498,17 +3765,20 @@ function visitFromPage({
   resource,
   title
 }) {
-  const product = currentProduct();
+  const app = currentApp();
   if (resource && isPcrl(resource)) {
     return {
       pcrl: resource,
       type: "resource"
     };
-  } else if (title && title.trim() !== "" && product) {
+  } else if (title && title.trim() !== "" && app) {
+    const pageMetadata = metadataFromPage(metadata);
     return {
-      details: detailsFromMetadata(metadata),
-      path: window.location.pathname,
-      product,
+      app,
+      ...(pageMetadata && {
+        metadata: pageMetadata
+      }),
+      path: pathFromLocation(window.location),
       title,
       type: "page"
     };
@@ -3556,15 +3826,16 @@ const changes = createStore({
 });
 function readRecentlyVisited(scope) {
   try {
-    return parseRecentlyVisited(localStorage.getItem(storageKey(scope)), scope.personId);
+    return parseRecentlyVisited(localStorage.getItem(storageKey(scope)));
   } catch {
     return [];
   }
 }
 function recordVisit(visit, scope) {
-  if (isEntry(visit)) {
+  const entry = toEntry(visit, new Date());
+  if (isEntry(entry)) {
     try {
-      localStorage.setItem(storageKey(scope), serializeRecentlyVisited(addVisit(readRecentlyVisited(scope), visit), scope.personId));
+      localStorage.setItem(storageKey(scope), JSON.stringify(addVisit(readRecentlyVisited(scope), entry)));
       changes.setState({
         version: changes.getState().version + 1
       });
@@ -3585,153 +3856,6 @@ function useRecentlyVisited({
   }) : [], [env, personId, version]);
 }
 
-// The versions home-mobile pins, so web and mobile read the same response
-// shapes. Some endpoints only exist from a version on: Registrations' me,
-// product_search_results, and pcrl_lookups need 2025-05-01.
-const API_VERSIONS = {
-  calendar: "2022-07-07",
-  "check-ins": "2025-05-28",
-  giving: "2019-10-18",
-  groups: "2023-07-10",
-  home: "2018-08-01",
-  people: "2023-03-21",
-  publishing: "2024-03-25",
-  registrations: "2025-05-01",
-  services: "2018-11-01"
-};
-// For a `/~api/{product}/v2/...` URL, the header that pins its product's
-// version.
-function apiVersionHeaders(url) {
-  const [,, product] = new URL(url).pathname.split("/");
-  const version = API_VERSIONS[product];
-  if (version) {
-    return {
-      "X-PCO-API-Version": version
-    };
-  } else {
-    return {};
-  }
-}
-
-const CACHE_TTL_MS = 60000;
-const MAX_ENTRIES = 50;
-const cache = new Map();
-function cachedRequest(url) {
-  const cached = cache.get(url);
-  if (cached && cached.expiresAt > Date.now()) {
-    // Re-inserting keeps the Map in recently-used order for eviction.
-    cache.delete(url);
-    cache.set(url, cached);
-    return cached.promise;
-  } else {
-    return fetchIntoCache(url);
-  }
-}
-function fetchIntoCache(url) {
-  const promise = apiRequest(defaultFetch, url, {
-    headers: apiVersionHeaders(url)
-  }).then(({
-    json,
-    ok
-  }) => {
-    if (!ok || json === null) throw new Error(`Request failed: ${url}`);
-    return json;
-  });
-  // In-flight entries never expire, so every caller shares the one fetch.
-  const entry = {
-    expiresAt: Infinity,
-    promise
-  };
-  cache.set(url, entry);
-  promise.then(() => entry.expiresAt = Date.now() + CACHE_TTL_MS, () => cache.get(url) === entry && cache.delete(url));
-  if (cache.size > MAX_ENTRIES) cache.delete(cache.keys().next().value);
-  return promise;
-}
-function useCachedRequest(url) {
-  const [settled, setSettled] = React.useState();
-  React.useEffect(() => {
-    if (url) {
-      let current = true;
-      cachedRequest(url).then(data => current && setSettled({
-        data,
-        url
-      }), () => current && setSettled({
-        failed: true,
-        url
-      }));
-      return () => {
-        current = false;
-      };
-    } else {
-      return undefined;
-    }
-  }, [url]);
-  if (!url) {
-    return {
-      status: "idle"
-    };
-  } else if ((settled === null || settled === void 0 ? void 0 : settled.url) !== url) {
-    return {
-      data: settled && "data" in settled ? settled.data : undefined,
-      status: "loading"
-    };
-  } else if ("data" in settled) {
-    return {
-      data: settled.data,
-      status: "done"
-    };
-  } else {
-    return {
-      status: "error"
-    };
-  }
-}
-// One request per URL, for callers that fan out to a varying number of
-// endpoints. Unlike `useCachedRequest`, a URL that hasn't settled yet has no
-// earlier data to fall back on.
-function useCachedRequests(urls) {
-  const [settled, setSettled] = React.useState({});
-  // Keyed by value because each settle re-renders the caller, and a caller
-  // that builds a fresh `urls` array on render would otherwise loop forever.
-  const key = urls.join("\n");
-  React.useEffect(() => {
-    let current = true;
-    const settle = result => current && setSettled(prev => ({
-      ...prev,
-      [result.url]: result
-    }));
-    for (const url of key.split("\n").filter(Boolean)) {
-      cachedRequest(url).then(data => settle({
-        data,
-        url
-      }), () => settle({
-        failed: true,
-        url
-      }));
-    }
-    return () => {
-      current = false;
-    };
-  }, [key]);
-  return urls.map(url => {
-    const result = settled[url];
-    if (!result) {
-      return {
-        status: "loading"
-      };
-    } else if ("data" in result) {
-      return {
-        data: result.data,
-        status: "done"
-      };
-    } else {
-      return {
-        status: "error"
-      };
-    }
-  });
-}
-
 const pcoUrl = pcoUrl$1;
 
 // Resolves resource entries with one pcrl_lookups request per product.
@@ -3822,13 +3946,290 @@ function pcrlLookupsUrl(product, pcrls) {
   });
   return `${window.location.origin}/~api/${product}/v2/pcrl_lookups?${params}`;
 }
-// Built from the product rather than the current origin, so it stays right
-// once PCA-409 shares one list across product subdomains.
+// Built from the app rather than the current origin, so it stays right once
+// PCA-409 shares one list across product subdomains.
 function pageUrl(entry, env) {
-  return `${pcoUrl(env)(entry.product)}${entry.path}`;
+  return new URL(entry.path, pcoUrl(env)(entry.app)).href;
+}
+
+function useRecentVisits(env) {
+  const personId = useCurrentPersonId();
+  const entries = useRecentlyVisited({
+    env,
+    personId
+  });
+  const [count, setCount] = React.useState(RECENTLY_VISITED_PAGE_SIZE);
+  const shown = React.useMemo(() => entries.slice(0, count), [entries, count]);
+  const hydrated = useHydratedRecentlyVisited(shown, env);
+  // Resources show up once they're found. Ones that can't be found anymore,
+  // or that the person can no longer see, are left out.
+  const visits = hydrated.filter(isShown);
+  const loading = hydrated.some(({
+    status
+  }) => status === "loading");
+  const showMore = React.useCallback(() => setCount(current => current + RECENTLY_VISITED_PAGE_SIZE), []);
+  return {
+    count,
+    hasMore: entries.length > count,
+    loading,
+    showMore,
+    visits
+  };
+}
+function isShown(visit) {
+  return visit.status === "page" || visit.status === "resolved";
+}
+
+function open(url, {
+  newTab
+}) {
+  if (newTab) {
+    window.open(url, "_blank", "noopener");
+  } else {
+    window.location.assign(url);
+  }
+}
+// With text selected, ⌘C should copy that text as usual, not the link.
+function hasSelectedText(element) {
+  var _a, _b;
+  const selectedInField = element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
+  return selectedInField || ((_b = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "") !== "";
+}
+
+const COPIED_FEEDBACK_MS = 1500;
+// `copiedUrl` stays set briefly after a copy so the UI can confirm it.
+function useCopyLink() {
+  const [copiedUrl, setCopiedUrl] = React.useState(null);
+  React.useEffect(() => {
+    if (copiedUrl) {
+      const timeout = setTimeout(() => setCopiedUrl(null), COPIED_FEEDBACK_MS);
+      return () => clearTimeout(timeout);
+    } else {
+      return undefined;
+    }
+  }, [copiedUrl]);
+  const copy = React.useCallback(url => {
+    navigator.clipboard.writeText(url).then(() => setCopiedUrl(url));
+  }, []);
+  return {
+    copiedUrl,
+    copy
+  };
+}
+
+// Remembering which list the index belongs to puts the highlight back on the
+// first item whenever a new list replaces it, without an effect to reset it.
+// A list that grows or fills in under the same `list` keeps its highlight.
+function useResultNavigation(items, list) {
+  const [highlight, setHighlight] = React.useState({
+    index: 0,
+    list
+  });
+  const highlightedIndex = highlight.list === list ? highlight.index : 0;
+  const highlighted = items[highlightedIndex];
+  const {
+    copiedUrl,
+    copy
+  } = useCopyLink();
+  const highlightIndex = React.useCallback(index => setHighlight(current => current.list === list && current.index === index ? current : {
+    index,
+    list
+  }), [list]);
+  const handleKeyDown = event => {
+    const step = verticalStep(event.key);
+    if (step && items.length > 0) {
+      event.preventDefault();
+      highlightIndex((highlightedIndex + step + items.length) % items.length);
+    } else if (event.key === "Enter" && highlighted && !event.nativeEvent.isComposing) {
+      event.preventDefault();
+      open(highlighted.url, {
+        newTab: hasCommandKey(event)
+      });
+    } else if (isCopyShortcut(event) && highlighted && !hasSelectedText(event.currentTarget)) {
+      event.preventDefault();
+      copy(highlighted.url);
+    }
+  };
+  return {
+    copied: copiedUrl !== null && copiedUrl === (highlighted === null || highlighted === void 0 ? void 0 : highlighted.url),
+    handleKeyDown,
+    highlightIndex,
+    highlighted,
+    highlightedIndex: highlighted ? highlightedIndex : null
+  };
+}
+
+function groupSections(groups = []) {
+  return groups.map(({
+    results,
+    type
+  }) => ({
+    heading: type,
+    items: results.map(resultItem),
+    key: type
+  }));
+}
+function resultItem({
+  attributes,
+  id
+}) {
+  return {
+    key: id,
+    subtitle: summarize(attributes.metadata),
+    title: attributes.title,
+    url: attributes.url
+  };
+}
+function visitItem(visit) {
+  return {
+    key: entryKey(visit.entry),
+    ...describeVisit(visit)
+  };
+}
+function summarize(metadata) {
+  return Object.values(metadata !== null && metadata !== void 0 ? metadata : {}).filter(value => typeof value === "string" && value !== "").join(" · ");
+}
+// Unlike search results, recents come from every product, so each one names
+// its product and type.
+function describeVisit(visit) {
+  var _a, _b;
+  const subtitle = (...parts) => parts.filter(Boolean).join(" · ");
+  if (visit.status === "page") {
+    const {
+      app,
+      metadata,
+      title
+    } = visit.entry;
+    return {
+      subtitle: subtitle(productName(app), (_a = metadata === null || metadata === void 0 ? void 0 : metadata.type) !== null && _a !== void 0 ? _a : "", (_b = metadata === null || metadata === void 0 ? void 0 : metadata.details) !== null && _b !== void 0 ? _b : ""),
+      title,
+      url: visit.url
+    };
+  } else {
+    const {
+      metadata,
+      product,
+      title,
+      type
+    } = visit.result.attributes;
+    return {
+      subtitle: subtitle(productName(product), type, summarize(metadata)),
+      title,
+      url: visit.url
+    };
+  }
+}
+// check-ins → Check-Ins
+function productName(slug) {
+  return slug.split("-").map(capitalize).join("-");
+}
+function capitalize(word) {
+  return word.charAt(0).toUpperCase() + word.slice(1);
+}
+
+const STORAGE_KEY = "topbar.product_search.last_product";
+function readLastProduct() {
+  try {
+    return localStorage.getItem(STORAGE_KEY);
+  } catch {
+    return null;
+  }
+}
+function saveLastProduct(slug) {
+  try {
+    localStorage.setItem(STORAGE_KEY, slug);
+  } catch {
+    // Storage can be full or blocked; search still works without it.
+  }
+}
+function initialProduct(products) {
+  var _a, _b, _c;
+  const lastProduct = readLastProduct();
+  const bySlug = slug => products.find(product => product.slug === slug);
+  return (_c = (_b = (_a = bySlug(lastProduct)) !== null && _a !== void 0 ? _a : bySlug("people")) !== null && _b !== void 0 ? _b : bySlug("services")) !== null && _c !== void 0 ? _c : products[0];
 }
 
-var styles$a = {"result":"result-WCnxr"};
+function KeyboardHints({
+  copied
+}) {
+  const command = commandKeyLabel();
+  return /*#__PURE__*/React.createElement("p", null, "\u2191\u2193 Select \u00B7 \u21B5 Open \u00B7 ", command, "\u21B5 Open in new tab \u00B7 ", command, "C", " ", /*#__PURE__*/React.createElement("span", {
+    role: "status"
+  }, copied ? "Copied!" : "Copy link"), " \u00B7 ", command, "K Open search");
+}
+
+var styles$d = {"tab":"tab-dz8ki"};
+
+function ProductTabs({
+  children,
+  onKeyDown,
+  onSelect,
+  products,
+  selected
+}) {
+  const id = useInstanceId("product-tabs");
+  const tabId = slug => `${id}-tab-${slug}`;
+  const tabRefs = React.useRef(new Map());
+  const handleKeyDown = event => {
+    var _a;
+    const offset = horizontalStep(event.key);
+    if (offset) {
+      event.preventDefault();
+      const index = products.indexOf(selected);
+      const next = products[(index + offset + products.length) % products.length];
+      onSelect(next.slug);
+      (_a = tabRefs.current.get(next.slug)) === null || _a === void 0 ? void 0 : _a.focus();
+    } else {
+      onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "aria-label": "Product",
+    onKeyDown: handleKeyDown,
+    role: "tablist"
+  }, products.map(product => (/*#__PURE__*/React.createElement("button", {
+    "aria-controls": `${id}-panel`,
+    "aria-selected": product === selected,
+    className: styles$d.tab,
+    id: tabId(product.slug),
+    key: product.slug,
+    onClick: () => onSelect(product.slug),
+    ref: element => {
+      if (element) {
+        tabRefs.current.set(product.slug, element);
+      } else {
+        tabRefs.current.delete(product.slug);
+      }
+    },
+    role: "tab",
+    tabIndex: product === selected ? 0 : -1,
+    type: "button"
+  }, product.appName)))), /*#__PURE__*/React.createElement("div", {
+    "aria-labelledby": tabId(selected.slug),
+    id: `${id}-panel`,
+    role: "tabpanel"
+  }, children));
+}
+
+function EndOfResultsObserver({
+  onVisible
+}) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) onVisible();
+    });
+    if (ref.current) observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [onVisible]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  });
+}
+
+const resultId = (listboxId, index) => `${listboxId}-result-${index}`;
+
+var styles$c = {"result":"result-Thq2C"};
 
 function SearchResult({
   highlighted,
@@ -3851,7 +4252,7 @@ function SearchResult({
   // pointer, and that shouldn't steal the highlight.
   return /*#__PURE__*/React.createElement("a", {
     "aria-selected": highlighted,
-    className: styles$a.result,
+    className: styles$c.result,
     href: url,
     id: id,
     onMouseMove: onHighlight,
@@ -3861,21 +4262,129 @@ function SearchResult({
   }, /*#__PURE__*/React.createElement("div", null, title), /*#__PURE__*/React.createElement("div", null, subtitle));
 }
 
-const resultId = (listboxId, index) => `${listboxId}-result-${index}`;
+// Sections with a heading render as labelled groups; ones without render
+// their items straight into the listbox. Indexes run across every section.
+function ResultListbox({
+  busy,
+  highlightedIndex,
+  id,
+  label,
+  labelledBy,
+  onHighlight,
+  sections
+}) {
+  let index = 0;
+  const renderItem = item => {
+    const itemIndex = index++;
+    return /*#__PURE__*/React.createElement(SearchResult, {
+      highlighted: itemIndex === highlightedIndex,
+      id: resultId(id, itemIndex),
+      key: item.key,
+      onHighlight: () => onHighlight(itemIndex),
+      subtitle: item.subtitle,
+      title: item.title,
+      url: item.url
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "aria-busy": busy,
+    "aria-label": label,
+    "aria-labelledby": labelledBy,
+    id: id,
+    role: "listbox"
+  }, sections.map((section, sectionIndex) => {
+    if (section.heading === undefined) {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: section.key
+      }, section.items.map(renderItem));
+    }
+    const headingId = `${id}-group-${sectionIndex}`;
+    return /*#__PURE__*/React.createElement("div", {
+      "aria-labelledby": headingId,
+      key: section.key,
+      role: "group"
+    }, /*#__PURE__*/React.createElement("div", {
+      id: headingId
+    }, section.heading), section.items.map(renderItem));
+  }));
+}
+
+function RecentlyVisited({
+  count,
+  hasMore,
+  items,
+  loading,
+  showMore,
+  ...navigation
+}) {
+  const headingId = `${navigation.id}-heading`;
+  if (items.length === 0 && !hasMore && !loading) {
+    return /*#__PURE__*/React.createElement("p", null, "Pages you visit will show up here.");
+  } else {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      id: headingId
+    }, "Recently visited"), /*#__PURE__*/React.createElement(ResultListbox, {
+      labelledBy: headingId,
+      sections: [{
+        items,
+        key: "recents"
+      }],
+      ...navigation
+    }), hasMore && /*#__PURE__*/React.createElement(EndOfResultsObserver, {
+      key: count,
+      onVisible: showMore
+    }));
+  }
+}
+
+// A combobox: focus stays here while aria-activedescendant points screen
+// readers at the highlighted result in the listbox it controls.
+function SearchInput({
+  expanded,
+  highlightedIndex,
+  inputRef,
+  listboxId,
+  onChange,
+  onFocus,
+  onKeyDown,
+  value
+}) {
+  return /*#__PURE__*/React.createElement("input", {
+    "aria-activedescendant": highlightedIndex === null ? undefined : resultId(listboxId, highlightedIndex),
+    "aria-autocomplete": "list",
+    "aria-controls": expanded ? listboxId : undefined,
+    "aria-expanded": expanded,
+    "aria-label": "Search",
+    autoFocus: true,
+    onChange: event => onChange(event.target.value),
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    placeholder: "Search",
+    ref: inputRef,
+    role: "combobox",
+    type: "search",
+    value: value
+  });
+}
+
+var styles$b = {"visuallyHidden":"visuallyHidden-S9VG5"};
+
 function SearchResults({
-  search,
+  label,
+  sections,
+  status,
   term,
   ...navigation
 }) {
-  var _a;
-  switch (search.status) {
+  switch (status) {
     case "idle":
       return null;
     case "loading":
-      if ((_a = search.groups) === null || _a === void 0 ? void 0 : _a.length) {
-        return /*#__PURE__*/React.createElement(ResultGroups, {
+      if (sections.length > 0) {
+        return /*#__PURE__*/React.createElement(ResultListbox, {
           busy: true,
-          groups: search.groups,
+          label: label,
+          sections: sections,
           ...navigation
         });
       }
@@ -3887,324 +4396,167 @@ function SearchResults({
         role: "alert"
       }, "Search isn\u2019t working right now. Try again.");
     case "done":
-      if (search.groups.length === 0) {
+      if (sections.length === 0) {
         return /*#__PURE__*/React.createElement("p", {
           role: "status"
         }, "No results for \u201C", term.trim(), "\u201D");
       }
-      return /*#__PURE__*/React.createElement(ResultGroups, {
-        groups: search.groups,
+      return /*#__PURE__*/React.createElement(ResultListbox, {
+        busy: false,
+        label: label,
+        sections: sections,
         ...navigation
       });
   }
 }
-function ResultGroups({
-  busy = false,
-  groups,
-  highlightedIndex,
-  id,
-  label,
-  onHighlight
-}) {
-  let index = 0;
-  return /*#__PURE__*/React.createElement("div", {
-    "aria-busy": busy,
-    "aria-label": label,
-    id: id,
-    role: "listbox"
-  }, groups.map(({
-    results,
-    type
-  }, groupIndex) => {
-    const headingId = `${id}-group-${groupIndex}`;
-    return /*#__PURE__*/React.createElement("div", {
-      "aria-labelledby": headingId,
-      key: type,
-      role: "group"
-    }, /*#__PURE__*/React.createElement("div", {
-      id: headingId
-    }, type), results.map(result => {
-      const resultIndex = index++;
-      return /*#__PURE__*/React.createElement(SearchResult, {
-        highlighted: resultIndex === highlightedIndex,
-        id: resultId(id, resultIndex),
-        key: result.id,
-        onHighlight: () => onHighlight(resultIndex),
-        subtitle: summarize(result.attributes.metadata),
-        title: result.attributes.title,
-        url: result.attributes.url
-      });
-    }));
-  }));
-}
-function summarize(metadata) {
-  return Object.values(metadata !== null && metadata !== void 0 ? metadata : {}).filter(value => typeof value === "string" && value !== "").join(" · ");
-}
 
-function useRecentVisits(env) {
-  const personId = useCurrentPersonId();
-  const entries = useRecentlyVisited({
-    env,
-    personId
-  });
-  const [count, setCount] = React.useState(RECENTLY_VISITED_PAGE_SIZE);
-  const shown = React.useMemo(() => entries.slice(0, count), [entries, count]);
-  const hydrated = useHydratedRecentlyVisited(shown, env);
-  // Resources show up once they're found. Ones that can't be found anymore,
-  // or that the person can no longer see, are left out.
-  const visits = hydrated.filter(isShown);
-  const loading = hydrated.some(({
-    status
-  }) => status === "loading");
-  const showMore = React.useCallback(() => setCount(current => current + RECENTLY_VISITED_PAGE_SIZE), []);
-  return {
-    count,
-    hasMore: entries.length > count,
-    loading,
-    showMore,
-    visits
-  };
-}
-function isShown(visit) {
-  return visit.status === "page" || visit.status === "resolved";
-}
-function RecentlyVisited({
-  count,
-  hasMore,
-  highlightedIndex,
-  id,
-  loading,
-  onHighlight,
-  showMore,
-  visits
-}) {
-  const headingId = `${id}-heading`;
-  if (visits.length === 0 && !hasMore && !loading) {
-    return /*#__PURE__*/React.createElement("p", null, "Pages you visit will show up here.");
-  } else {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      id: headingId
-    }, "Recently visited"), /*#__PURE__*/React.createElement("div", {
-      "aria-labelledby": headingId,
-      id: id,
-      role: "listbox"
-    }, visits.map((visit, index) => (/*#__PURE__*/React.createElement(SearchResult, {
-      highlighted: index === highlightedIndex,
-      id: resultId(id, index),
-      key: entryKey(visit.entry),
-      onHighlight: () => onHighlight(index),
-      ...describeVisit(visit)
-    })))), hasMore && /*#__PURE__*/React.createElement(ShowMoreWhenVisible, {
-      key: count,
-      onVisible: showMore
-    }));
-  }
-}
-function ShowMoreWhenVisible({
-  onVisible
+// Keys the recents list for navigation, so the highlight
+// stays put as more recents load and as their lookups answer.
+const RECENTS = "recents";
+function SearchPanel({
+  env,
+  products
 }) {
-  const ref = React.useRef(null);
+  var _a, _b;
+  const listboxId = useInstanceId("product-search-results");
+  const [term, setTerm] = React.useState("");
+  const [selectedSlug, setSelectedSlug] = React.useState(() => initialProduct(products).slug);
+  const product = (_a = products.find(({
+    slug
+  }) => slug === selectedSlug)) !== null && _a !== void 0 ? _a : products[0];
+  const hasTerm = term.trim() !== "";
+  const search = useProductSearch(product.slug, term);
+  const groups = "groups" in search ? search.groups : undefined;
+  const sections = React.useMemo(() => groupSections(groups), [groups]);
+  const {
+    visits,
+    ...recents
+  } = useRecentVisits(env);
+  const recentItems = visits.map(visitItem);
+  const items = hasTerm ? sections.flatMap(section => section.items) : recentItems;
+  const navigation = useResultNavigation(items, hasTerm ? sections : RECENTS);
+  const {
+    highlightedIndex
+  } = navigation;
+  const inputRef = React.useRef(null);
+  const [announceHighlight, setAnnounceHighlight] = React.useState(false);
+  // The tabs keep focus while arrowing through results, but only the focused
+  // input can point screen readers at the highlight, so from the tabs it's
+  // announced instead. Typing goes back to the input, keystroke and all.
+  const handleTabsKeyDown = event => {
+    var _a;
+    if (isTypingKey(event)) {
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    } else if (verticalStep(event.key)) {
+      setAnnounceHighlight(true);
+      navigation.handleKeyDown(event);
+    } else {
+      navigation.handleKeyDown(event);
+    }
+  };
   React.useEffect(() => {
-    const observer = new IntersectionObserver(([entry]) => {
-      if (entry.isIntersecting) onVisible();
-    });
-    if (ref.current) observer.observe(ref.current);
-    return () => observer.disconnect();
-  }, [onVisible]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  });
-}
-// Unlike search results, recents come from every product, so each one names
-// its product and type.
-function describeVisit(visit) {
-  const subtitle = (...parts) => parts.filter(Boolean).join(" · ");
-  if (visit.status === "page") {
-    const {
-      details,
-      product,
-      title
-    } = visit.entry;
-    return {
-      subtitle: subtitle(productName(product), details),
-      title,
-      url: visit.url
-    };
-  } else {
-    const {
-      metadata,
-      product,
-      title,
-      type
-    } = visit.result.attributes;
-    return {
-      subtitle: subtitle(productName(product), type, summarize(metadata)),
-      title,
-      url: visit.url
-    };
-  }
-}
-// check-ins → Check-Ins
-function productName(slug) {
-  return slug.split("-").map(capitalize).join("-");
-}
-function capitalize(word) {
-  return word.charAt(0).toUpperCase() + word.slice(1);
+    if (hasTerm) saveLastProduct(product.slug);
+  }, [hasTerm, product.slug]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchInput, {
+    expanded: items.length > 0,
+    highlightedIndex: highlightedIndex,
+    inputRef: inputRef,
+    listboxId: listboxId,
+    onChange: setTerm,
+    onFocus: () => setAnnounceHighlight(false),
+    onKeyDown: navigation.handleKeyDown,
+    value: term
+  }), /*#__PURE__*/React.createElement(ProductTabs, {
+    onKeyDown: handleTabsKeyDown,
+    onSelect: setSelectedSlug,
+    products: products,
+    selected: product
+  }, hasTerm ? (/*#__PURE__*/React.createElement(SearchResults, {
+    highlightedIndex: highlightedIndex,
+    id: listboxId,
+    label: `${product.appName} results`,
+    onHighlight: navigation.highlightIndex,
+    sections: sections,
+    status: search.status,
+    term: term
+  })) : (/*#__PURE__*/React.createElement(RecentlyVisited, {
+    highlightedIndex: highlightedIndex,
+    id: listboxId,
+    items: recentItems,
+    onHighlight: navigation.highlightIndex,
+    ...recents
+  }))), /*#__PURE__*/React.createElement("div", {
+    "aria-live": "polite",
+    className: styles$b.visuallyHidden
+  }, announceHighlight ? (_b = navigation.highlighted) === null || _b === void 0 ? void 0 : _b.title : null), /*#__PURE__*/React.createElement(KeyboardHints, {
+    copied: navigation.copied
+  }));
 }
 
-const SEARCH_DEBOUNCE_MS = 300;
-function useProductSearch(product, term) {
-  const query = term.trim();
-  const debouncedQuery = useDebouncedValue(query, SEARCH_DEBOUNCE_MS);
-  const request = useCachedRequest(debouncedQuery ? productSearchUrl(product, debouncedQuery) : null);
-  const response = "data" in request ? request.data : undefined;
-  const settledProduct = useSettledProduct(product, request.status);
-  // While a request loads, the previous response stays on screen, but only
-  // if it was for this product: People results must never show under the
-  // Services tab.
-  const visibleResponse = request.status === "done" || settledProduct === product ? response : undefined;
-  const groups = React.useMemo(() => visibleResponse && groupByType(visibleResponse), [visibleResponse]);
-  if (!query) {
-    return {
-      status: "idle"
-    };
-  } else if (query !== debouncedQuery) {
-    return {
-      groups,
-      status: "loading"
-    };
-  } else if (request.status === "done") {
-    return {
-      groups: groups !== null && groups !== void 0 ? groups : [],
-      status: "done"
-    };
-  } else if (request.status === "error") {
-    return {
-      status: "error"
-    };
-  } else {
-    return {
-      groups,
-      status: "loading"
-    };
-  }
+// Products open modals from many libraries, not all of which mark themselves
+// with roles, so a modal is recognized by what it does: cover the page.
+function isModalOpen() {
+  const {
+    clientHeight,
+    clientWidth
+  } = document.documentElement;
+  const element = document.elementFromPoint(clientWidth / 2, clientHeight / 2);
+  return element !== null && (isInNativeDialog(element) || hasBackdrop(element, clientWidth, clientHeight));
 }
-function productSearchUrl(product, query) {
-  const params = new URLSearchParams({
-    per_page: "100",
-    "where[term]": query
-  });
-  return `${window.location.origin}/~api/${product}/v2/product_search_results?${params}`;
+// A native modal's backdrop is drawn by the browser rather than being an
+// element; hit-testing it lands on the dialog itself.
+function isInNativeDialog(element) {
+  return element.closest("dialog[open]") !== null;
 }
-function groupByType({
-  data,
-  meta
-}) {
-  var _a, _b;
-  const typeOrder = (_a = meta === null || meta === void 0 ? void 0 : meta.type_order) !== null && _a !== void 0 ? _a : [];
-  const groups = new Map();
-  for (const result of data) {
-    const {
-      type
-    } = result.attributes;
-    if (!groups.has(type)) groups.set(type, {
-      results: [],
-      type
-    });
-    (_b = groups.get(type)) === null || _b === void 0 ? void 0 : _b.results.push(result);
+function hasBackdrop(element, width, height) {
+  let current = element;
+  while (current && !isBackdrop(current, width, height)) {
+    current = current.parentElement;
   }
-  const rank = type => {
-    const index = typeOrder.indexOf(type);
-    return index === -1 ? typeOrder.length : index;
-  };
-  return [...groups.values()].sort((a, b) => rank(a.type) - rank(b.type));
+  return current !== null;
 }
-// The product the most recent finished request was for.
-function useSettledProduct(product, status) {
-  const [settledProduct, setSettledProduct] = React.useState();
-  React.useEffect(() => {
-    if (status === "done") setSettledProduct(product);
-  }, [product, status]);
-  return settledProduct;
+// Some backdrops start below the topbar rather than at the top of the screen,
+// so the layer only has to span the width and reach from the center to the
+// bottom. Its own box has to reach the center: a bar along the bottom can
+// hold a panel that pops up over the center, like Services' media player.
+// react-aria leaves a closed modal's backdrop up while it fades out, search's
+// own included, so one that's on its way out doesn't count.
+function isBackdrop(element, width, height) {
+  const rect = element.getBoundingClientRect();
+  return !element.matches("[data-exiting]") && getComputedStyle(element).position === "fixed" && rect.width >= width - SCROLLBAR_SLACK && rect.top <= height / 2 && rect.bottom >= height - ROUNDING_SLACK;
 }
-function useDebouncedValue(value, delay) {
-  const [debounced, setDebounced] = React.useState(value);
+// react-aria keeps a classic scrollbar's gutter reserved while its modals lock
+// scrolling, so their backdrops stop short of the right edge by its width.
+const SCROLLBAR_SLACK = 24;
+// Rects are fractional at non-100% zoom, but clientWidth and clientHeight are
+// rounded to whole pixels.
+const ROUNDING_SLACK = 1;
+
+function useSearchShortcut(enabled, open, setOpen) {
   React.useEffect(() => {
-    const timeout = setTimeout(() => setDebounced(value), delay);
-    return () => clearTimeout(timeout);
-  }, [value, delay]);
-  return debounced;
-}
-
-const COPIED_FEEDBACK_MS = 1500;
-const verticalStep = key => ({
-  ArrowDown: 1,
-  ArrowUp: -1
-})[key];
-// Remembering which list the index belongs to puts the highlight back on the
-// first option whenever a new list replaces it, without an effect to reset it.
-// A list that grows or fills in under the same `list` keeps its highlight.
-function useResultNavigation(options, list) {
-  const [highlight, setHighlight] = React.useState({
-    index: 0,
-    list
-  });
-  const highlightedIndex = highlight.list === list ? highlight.index : 0;
-  const highlighted = options[highlightedIndex];
-  const [copiedUrl, setCopiedUrl] = React.useState(null);
-  React.useEffect(() => {
-    if (copiedUrl) {
-      const timeout = setTimeout(() => setCopiedUrl(null), COPIED_FEEDBACK_MS);
-      return () => clearTimeout(timeout);
-    } else {
-      return undefined;
-    }
-  }, [copiedUrl]);
-  const highlightIndex = React.useCallback(index => setHighlight(current => current.list === list && current.index === index ? current : {
-    index,
-    list
-  }), [list]);
-  const handleKeyDown = event => {
-    const step = verticalStep(event.key);
-    if (step && options.length > 0) {
-      event.preventDefault();
-      highlightIndex((highlightedIndex + step + options.length) % options.length);
-    } else if (event.key === "Enter" && highlighted && !event.nativeEvent.isComposing) {
-      event.preventDefault();
-      open(highlighted.url, {
-        newTab: hasCommandKey(event)
-      });
-    } else if (isCopyShortcut(event) && highlighted && !hasSelectedText(event.currentTarget)) {
-      event.preventDefault();
-      const {
-        url
-      } = highlighted;
-      navigator.clipboard.writeText(url).then(() => setCopiedUrl(url));
-    }
-  };
-  return {
-    copied: copiedUrl !== null && copiedUrl === (highlighted === null || highlighted === void 0 ? void 0 : highlighted.url),
-    handleKeyDown,
-    highlightIndex,
-    highlighted,
-    highlightedIndex: highlighted ? highlightedIndex : null
-  };
-}
-function open(url, {
-  newTab
-}) {
-  if (newTab) {
-    window.open(url, "_blank", "noopener");
-  } else {
-    window.location.assign(url);
-  }
-}
-const isCopyShortcut = event => event.key.toLowerCase() === "c" && !event.altKey && !event.shiftKey && hasCommandKey(event);
-// With text selected, ⌘C should copy that text as usual, not the link.
-function hasSelectedText(element) {
-  var _a, _b;
-  const selectedInField = element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
-  return selectedInField || ((_b = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "") !== "";
+    if (!enabled) return undefined;
+    // Rich text editors like Trix bind ⌘K to "insert link"; capturing at the
+    // window and stopping propagation keeps them from ever seeing it. Under a
+    // product's modal, search stays shut rather than stacking a second modal,
+    // and the keystroke goes on to the product.
+    const handleKeyDown = event => {
+      if (open && isSearchShortcut(event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        setOpen(false);
+      } else if (!open && (isSearchShortcut(event) || isLegacySearchShortcut(event)) && !isModalOpen()) {
+        event.preventDefault();
+        event.stopPropagation();
+        setOpen(true);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown, {
+      capture: true
+    });
+    return () => window.removeEventListener("keydown", handleKeyDown, {
+      capture: true
+    });
+  }, [enabled, open, setOpen]);
 }
 
 const SEARCHABLE_PRODUCTS = [{
@@ -4232,6 +4584,7 @@ const SEARCHABLE_PRODUCTS = [{
   appName: "Services",
   slug: "services"
 }];
+
 const PERMISSION_CHECKS = {
   "check-ins": () => fetchMe("check-ins", "permission").then(({
     permission
@@ -4294,6 +4647,7 @@ function canSearch(slug, personId) {
     return promise;
   }
 }
+
 function useSearchableProducts(apps) {
   // Keyed by name because providers hand over a fresh `apps` array on renders
   // where nothing changed.
@@ -4335,181 +4689,27 @@ function inSwitcherOrder(apps) {
   return groupApps(apps).restProducts.flatMap(app => SEARCHABLE_PRODUCTS.filter(product => product.appName === app.name));
 }
 
-const isSearchShortcut = event => event.key.toLowerCase() === "k" && !event.altKey && !event.shiftKey && hasCommandKey(event);
-// Products opened their own search with `/` before this one replaced it.
-const isLegacySearchShortcut = event => event.key === "/" && !event.altKey && !event.ctrlKey && !event.metaKey && !isTypingIn(event.target);
-const isTypingKey = event => event.key.length === 1 && event.key !== " " && !event.altKey && !event.ctrlKey && !event.metaKey;
-const isTypingIn = target => target instanceof Element && target.closest('input, select, textarea, [contenteditable]:not([contenteditable="false"])') !== null;
 function ProductSearch({
   apps,
   env
 }) {
   const searchable = useSearchableProducts(apps);
-  if (searchable.status === "done" && searchable.products.length > 0) {
-    return /*#__PURE__*/React.createElement(SearchButtonAndDialog, {
-      env: env,
-      products: searchable.products
-    });
-  } else {
-    return null;
-  }
-}
-function SearchButtonAndDialog({
-  env,
-  products
-}) {
   const [open, setOpen] = React.useState(false);
-  React.useEffect(() => {
-    // Rich text editors like Trix bind ⌘K to "insert link"; capturing at the
-    // window and stopping propagation keeps them from ever seeing it.
-    const handleKeyDown = event => {
-      if (isSearchShortcut(event)) {
-        event.preventDefault();
-        event.stopPropagation();
-        setOpen(wasOpen => !wasOpen);
-      } else if (isLegacySearchShortcut(event)) {
-        event.preventDefault();
-        event.stopPropagation();
-        setOpen(true);
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown, {
-      capture: true
-    });
-    return () => window.removeEventListener("keydown", handleKeyDown, {
-      capture: true
-    });
-  }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
-    "aria-keyshortcuts": `${isMac() ? "Meta+K" : "Control+K"} /`,
-    "aria-label": "Search",
-    onClick: () => setOpen(true),
-    type: "button"
-  }, /*#__PURE__*/React.createElement(Spyglass, {
-    fill: "currentColor"
-  })), /*#__PURE__*/React.createElement(tapestry.Modal, {
+  const available = searchable.status === "done" && searchable.products.length > 0;
+  useSearchShortcut(available, open, setOpen);
+  if (!available) return null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchButton, {
+    onClick: () => setOpen(true)
+  }), /*#__PURE__*/React.createElement(tapestry.Modal, {
     "aria-label": "Search",
     dismissible: true,
     onClose: () => setOpen(false),
     open: open
   }, /*#__PURE__*/React.createElement(SearchPanel, {
     env: env,
-    products: products
+    products: searchable.products
   })));
 }
-// Keys the recents list for navigation, so the highlight stays put as more
-// recents load and as their lookups answer.
-const RECENTS = "recents";
-function SearchPanel({
-  env,
-  products
-}) {
-  var _a, _b;
-  const listboxId = useInstanceId("product-search-results");
-  const [term, setTerm] = React.useState("");
-  const [selectedSlug, setSelectedSlug] = React.useState(() => initialProduct(products).slug);
-  const product = (_a = products.find(({
-    slug
-  }) => slug === selectedSlug)) !== null && _a !== void 0 ? _a : products[0];
-  const hasTerm = term.trim() !== "";
-  const search = useProductSearch(product.slug, term);
-  const groups = "groups" in search ? search.groups : undefined;
-  const results = React.useMemo(() => {
-    var _a;
-    return (_a = groups === null || groups === void 0 ? void 0 : groups.flatMap(group => group.results)) !== null && _a !== void 0 ? _a : [];
-  }, [groups]);
-  const recents = useRecentVisits(env);
-  const options = hasTerm ? results.map(({
-    attributes
-  }) => ({
-    label: attributes.title,
-    url: attributes.url
-  })) : recents.visits.map(visit => {
-    const {
-      title,
-      url
-    } = describeVisit(visit);
-    return {
-      label: title,
-      url
-    };
-  });
-  const navigation = useResultNavigation(options, hasTerm ? results : RECENTS);
-  const {
-    highlightedIndex
-  } = navigation;
-  const inputRef = React.useRef(null);
-  const [announceHighlight, setAnnounceHighlight] = React.useState(false);
-  // The tabs keep focus while arrowing through results, but only the focused
-  // input can point screen readers at the highlight, so from the tabs it's
-  // announced instead. Typing goes back to the input, keystroke and all.
-  const handleTabsKeyDown = event => {
-    var _a;
-    if (isTypingKey(event)) {
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    } else if (verticalStep(event.key)) {
-      setAnnounceHighlight(true);
-      navigation.handleKeyDown(event);
-    } else {
-      navigation.handleKeyDown(event);
-    }
-  };
-  React.useEffect(() => {
-    if (hasTerm) saveLastProduct(product.slug);
-  }, [hasTerm, product.slug]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
-    "aria-activedescendant": highlightedIndex === null ? undefined : resultId(listboxId, highlightedIndex),
-    "aria-autocomplete": "list",
-    "aria-controls": options.length > 0 ? listboxId : undefined,
-    "aria-expanded": options.length > 0,
-    "aria-label": "Search",
-    autoFocus: true,
-    onChange: event => setTerm(event.target.value),
-    onFocus: () => setAnnounceHighlight(false),
-    onKeyDown: navigation.handleKeyDown,
-    placeholder: "Search",
-    ref: inputRef,
-    role: "combobox",
-    type: "search",
-    value: term
-  }), /*#__PURE__*/React.createElement(ProductTabs, {
-    onKeyDown: handleTabsKeyDown,
-    onSelect: setSelectedSlug,
-    products: products,
-    selected: product
-  }, hasTerm ? (/*#__PURE__*/React.createElement(SearchResults, {
-    highlightedIndex: highlightedIndex,
-    id: listboxId,
-    label: `${product.appName} results`,
-    onHighlight: navigation.highlightIndex,
-    search: search,
-    term: term
-  })) : (/*#__PURE__*/React.createElement(RecentlyVisited, {
-    highlightedIndex: highlightedIndex,
-    id: listboxId,
-    onHighlight: navigation.highlightIndex,
-    ...recents
-  }))), /*#__PURE__*/React.createElement("div", {
-    "aria-live": "polite",
-    className: styles$c.visuallyHidden
-  }, announceHighlight ? (_b = navigation.highlighted) === null || _b === void 0 ? void 0 : _b.label : null), /*#__PURE__*/React.createElement(KeyboardHints, {
-    copied: navigation.copied
-  }));
-}
-function KeyboardHints({
-  copied
-}) {
-  const command = commandKeyLabel();
-  return /*#__PURE__*/React.createElement("p", null, "\u2191\u2193 Select \u00B7 \u21B5 Open \u00B7 ", command, "\u21B5 Open in new tab \u00B7 ", command, "C", " ", /*#__PURE__*/React.createElement("span", {
-    role: "status"
-  }, copied ? "Copied!" : "Copy link"), " \u00B7 ", command, "K Open search");
-}
-function initialProduct(products) {
-  var _a, _b, _c;
-  const lastProduct = readLastProduct();
-  const bySlug = slug => products.find(product => product.slug === slug);
-  return (_c = (_b = (_a = bySlug(lastProduct)) !== null && _a !== void 0 ? _a : bySlug("people")) !== null && _b !== void 0 ? _b : bySlug("services")) !== null && _c !== void 0 ? _c : products[0];
-}
 
 function useRecordRecentlyVisited({
   enabled,
@@ -4553,9 +4753,9 @@ function StyledRoot({
     `), children);
 }
 
-var styles$9 = {"route":"route--8BWe","is-active":"is-active-FsU9Y","apps-routes-separator":"apps-routes-separator-Nlm-N"};
+var styles$a = {"route":"route--8BWe","is-active":"is-active-FsU9Y","apps-routes-separator":"apps-routes-separator-Nlm-N"};
 
-var styles$8 = {"popup":"popup-mDNKn","trigger-wrap":"trigger-wrap-Jd-KR","trigger":"trigger-WgRT5","is-visible":"is-visible-GZC0-","trigger-orgname":"trigger-orgname-TDHCc"};
+var styles$9 = {"popup":"popup-mDNKn","trigger-wrap":"trigger-wrap-Jd-KR","trigger":"trigger-WgRT5","is-visible":"is-visible-GZC0-","trigger-orgname":"trigger-orgname-TDHCc"};
 
 const UserMenu = ({
   appName,
@@ -4574,7 +4774,7 @@ const UserMenu = ({
     component: Outsider,
     onOutsideClick: () => setUserMenuVisible(false),
     cleanup: !userMenuVisible,
-    className: styles$8.popup,
+    className: styles$9.popup,
     isVisible: userMenuVisible
   }, /*#__PURE__*/React.createElement("div", null, hasConnectedPeople ? (/*#__PURE__*/React.createElement("div", {
     style: {
@@ -4718,11 +4918,11 @@ const UserMenuTrigger = ({
   userMenuVisible
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$8["trigger-wrap"],
+    className: styles$9["trigger-wrap"],
     "data-pendo": "topbar-org-switcher"
   }, /*#__PURE__*/React.createElement(Hoverable, {
-    className: classnames(styles$8["trigger"], {
-      [styles$8["is-visible"]]: userMenuVisible
+    className: classnames(styles$9["trigger"], {
+      [styles$9["is-visible"]]: userMenuVisible
     }),
     component: "button",
     type: "button",
@@ -4734,7 +4934,7 @@ const UserMenuTrigger = ({
       requestConnectedPeopleFetch();
     }
   }, showOrgName && (/*#__PURE__*/React.createElement("span", {
-    className: styles$8["trigger-orgname"]
+    className: styles$9["trigger-orgname"]
   }, orgName)), /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)));
 };
 
@@ -4794,7 +4994,7 @@ const NotSmallTopbar = ({
     colors: props.colors,
     requestAppsFetch: props.requestAppsFetch
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles$9["apps-routes-separator"]
+    className: styles$a["apps-routes-separator"]
   }), routesVisible && props.routes, /*#__PURE__*/React.createElement("div", {
     style: {
       margin: "auto"
@@ -4835,12 +5035,12 @@ const NotSmallRoute = ({
   ...nativeProps
 }) => {
   return /*#__PURE__*/React.createElement("a", {
-    className: classnames(styles$9["route"], className, active && styles$9["is-active"]),
+    className: classnames(styles$a["route"], className, active && styles$a["is-active"]),
     ...nativeProps
   });
 };
 
-var styles$7 = {"avatar":"avatar-tW-wn"};
+var styles$8 = {"avatar":"avatar-tW-wn"};
 
 function Avatar({
   env,
@@ -4850,7 +5050,7 @@ function Avatar({
 }) {
   const url = incomingUrl || `${pcoUrl$1(env)("people")}/static/no_photo_thumbnail_gray.svg`;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$7.avatar,
+    className: styles$8.avatar,
     style: {
       backgroundImage: `url(${url})`,
       ...style
@@ -32609,7 +32809,7 @@ function requireReactDom () {
 
 var reactDomExports = requireReactDom();
 
-var styles$6 = {"trigger":"trigger-Th-Up","layer":"layer-ck6BD","layer--visible":"layer--visible-4E2p1","panel":"panel-vobWE","header":"header-xndfZ","heading":"heading-uXyQf","close":"close-pK0Lk","list":"list-zWvrn","link":"link-Kf3qj","current":"current-g3Ey-","accounts-item":"accounts-item-eQqDD","accounts-link":"accounts-link-SeIbD"};
+var styles$7 = {"trigger":"trigger-Th-Up","layer":"layer-ck6BD","layer--visible":"layer--visible-4E2p1","panel":"panel-vobWE","header":"header-xndfZ","heading":"heading-uXyQf","close":"close-pK0Lk","list":"list-zWvrn","link":"link-Kf3qj","current":"current-g3Ey-","accounts-item":"accounts-item-eQqDD","accounts-link":"accounts-link-SeIbD"};
 
 const AppsSwitcher = ({
   appName,
@@ -32637,8 +32837,8 @@ const AppsSwitcher = ({
   }, /*#__PURE__*/React.createElement("a", {
     "aria-current": name === appName ? "page" : undefined,
     "aria-label": name,
-    className: classnames(styles$6.link, {
-      [styles$6.current]: name === appName
+    className: classnames(styles$7.link, {
+      [styles$7.current]: name === appName
     }),
     "data-pendo": `app-switcher--change-app--${name}`,
     "data-turbolinks": false,
@@ -32650,48 +32850,48 @@ const AppsSwitcher = ({
     "aria-expanded": visible,
     "aria-haspopup": "true",
     "aria-label": `App switcher: ${appName}`,
-    className: styles$6.trigger,
+    className: styles$7.trigger,
     onClick: onTriggerClick,
     type: "button"
   }, /*#__PURE__*/React.createElement(ColorAppIcon, {
     appName: appName.replace(/[\s-]/, "")
   })), /*#__PURE__*/reactDomExports.createPortal(/*#__PURE__*/React.createElement("div", {
     ref: containerRef,
-    className: classnames(styles$6.layer, {
-      [styles$6["layer--visible"]]: visible
+    className: classnames(styles$7.layer, {
+      [styles$7["layer--visible"]]: visible
     }),
     onClick: toggle,
     onKeyDown: handleKeyDown
   }, /*#__PURE__*/React.createElement("nav", {
     "aria-label": "Switch app",
     "aria-modal": visible,
-    className: styles$6.panel,
+    className: styles$7.panel,
     "data-pendo": "app-switcher",
     onClick: event => event.stopPropagation(),
     role: "dialog"
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$6.header
+    className: styles$7.header
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$6.heading
+    className: styles$7.heading
   }, "Switch to"), /*#__PURE__*/React.createElement("button", {
     "aria-label": "Close",
-    className: styles$6.close,
+    className: styles$7.close,
     onClick: toggle,
     type: "button"
   }, /*#__PURE__*/React.createElement(X, {
     "aria-hidden": "true",
     fill: "var(--t-icon-color-dim)"
   }))), /*#__PURE__*/React.createElement("ul", {
-    className: styles$6.list,
+    className: styles$7.list,
     role: "list"
   }, homeProduct && productLink(homeProduct.name), restProducts.map(({
     name
   }) => productLink(name)), accountsProduct && (/*#__PURE__*/React.createElement("li", {
-    className: styles$6["accounts-item"]
+    className: styles$7["accounts-item"]
   }, /*#__PURE__*/React.createElement("a", {
     "aria-current": appName === "Accounts" ? "page" : undefined,
     "aria-label": "Account settings",
-    className: classnames(styles$6.link, styles$6["accounts-link"]),
+    className: classnames(styles$7.link, styles$7["accounts-link"]),
     "data-pendo": "app-switcher--change-app--Accounts",
     "data-turbolinks": false,
     href: pcoUrl$1(env)("accounts") + getAppsSwitchProductPath(accountsProduct.name)
@@ -32714,14 +32914,14 @@ ClientStorage.defaultProps = {
   method: "localStorage"
 };
 
-var styles$5 = {"appmenu-button":"appmenu-button-b0UvT","appmenu-layer":"appmenu-layer-0IQpN","appmenu-container":"appmenu-container-gackd","appmenu-scroll":"appmenu-scroll-mPSx0","appmenu-list":"appmenu-list-h7clX","appmenu-list-a":"appmenu-list-a-rGIQN","appmenu-list-a--top":"appmenu-list-a--top-RT-2F","appmenu-list-a--bottom":"appmenu-list-a--bottom-YDeBC","appmenu-close-button":"appmenu-close-button-vv9bV","current-route":"current-route-wpJgz","is-active":"is-active-wy8Bg","routes":"routes-Nmt1S","route":"route-kkknQ","profile-button":"profile-button-a2WO2"};
+var styles$6 = {"appmenu-button":"appmenu-button-b0UvT","appmenu-layer":"appmenu-layer-0IQpN","appmenu-container":"appmenu-container-gackd","appmenu-scroll":"appmenu-scroll-mPSx0","appmenu-list":"appmenu-list-h7clX","appmenu-list-a":"appmenu-list-a-rGIQN","appmenu-list-a--top":"appmenu-list-a--top-RT-2F","appmenu-list-a--bottom":"appmenu-list-a--bottom-YDeBC","appmenu-close-button":"appmenu-close-button-vv9bV","current-route":"current-route-wpJgz","is-active":"is-active-wy8Bg","routes":"routes-Nmt1S","route":"route-kkknQ","profile-button":"profile-button-a2WO2"};
 
 function AccountSettingsLink({
   env
 }) {
   const accountsName = "accounts";
   return /*#__PURE__*/React.createElement("a", {
-    className: classnames(styles$5["appmenu-list-a"], styles$5["appmenu-list-a--bottom"]),
+    className: classnames(styles$6["appmenu-list-a"], styles$6["appmenu-list-a--bottom"]),
     "data-pendo": `app-switcher--change-app--${accountsName}`,
     "data-turbolinks": false,
     href: pcoUrl$1(env)(accountsName) + getAppsSwitchProductPath(accountsName)
@@ -32744,7 +32944,7 @@ const CloseMenuButton = ({
 }) => (/*#__PURE__*/React.createElement("button", {
   "aria-label": "Close menu",
   type: "button",
-  className: styles$5["appmenu-close-button"],
+  className: styles$6["appmenu-close-button"],
   style: style
 }, /*#__PURE__*/React.createElement(X, {
   fill: color,
@@ -32805,7 +33005,7 @@ const LegacyAppsSwitcher = ({
     "aria-haspopup": "true",
     "aria-label": `App switcher: ${appName}`,
     type: "button",
-    className: styles$5["appmenu-button"],
+    className: styles$6["appmenu-button"],
     onClick: onTriggerClick
   }, /*#__PURE__*/React.createElement(ColorAppIcon, {
     appName: appName.replace(/[\s-]/, "")
@@ -32813,7 +33013,7 @@ const LegacyAppsSwitcher = ({
     item: "Topbar:Small:Menus:Products:visibility",
     render: () => (/*#__PURE__*/React.createElement("div", {
       ref: appMenuRef,
-      className: styles$5["appmenu-layer"],
+      className: styles$6["appmenu-layer"],
       style: {
         ...(visible && {
           display: "block"
@@ -32830,37 +33030,37 @@ const LegacyAppsSwitcher = ({
           e.stopPropagation();
         }
       },
-      className: styles$5["appmenu-container"]
+      className: styles$6["appmenu-container"]
     }, /*#__PURE__*/React.createElement("a", {
       "aria-current": appName === (homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name) ? "page" : undefined,
       "aria-label": homeProduct ? homeProduct.name : appName,
       "data-pendo": `app-switcher--change-app--${homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name}`,
       "data-turbolinks": false,
-      className: classnames(styles$5["appmenu-list-a"], styles$5["appmenu-list-a--top"]),
+      className: classnames(styles$6["appmenu-list-a"], styles$6["appmenu-list-a--top"]),
       href: homeProduct ? pcoUrl$1(env)("accounts") + getAppsSwitchProductPath(homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name) : undefined
     }, /*#__PURE__*/React.createElement(UserMenuAppLockup, {
       appName: homeProduct ? homeProduct.name : appName
     })), /*#__PURE__*/React.createElement("div", {
-      className: styles$5["appmenu-scroll"]
+      className: styles$6["appmenu-scroll"]
     }, /*#__PURE__*/React.createElement("ul", {
       "data-pendo": "app-switcher",
-      className: styles$5["appmenu-list"]
+      className: styles$6["appmenu-list"]
     }, appsMenuFormatter(restProducts).map(({
       name
     }) => (/*#__PURE__*/React.createElement("li", {
       key: name,
-      className: styles$5["appmenu-list-li"]
+      className: styles$6["appmenu-list-li"]
     }, /*#__PURE__*/React.createElement("a", {
       "aria-current": name === appName ? "page" : undefined,
       "aria-label": name,
       "data-pendo": `app-switcher--change-app--${name}`,
       "data-turbolinks": false,
-      className: styles$5["appmenu-list-a"],
+      className: styles$6["appmenu-list-a"],
       href: pcoUrl$1(env)("accounts") + getAppsSwitchProductPath(name)
     }, /*#__PURE__*/React.createElement(UserMenuAppLockup, {
       appName: name
     }))))), accountsProduct && (/*#__PURE__*/React.createElement("li", {
-      className: styles$5["appmenu-list-li"]
+      className: styles$6["appmenu-list-li"]
     }, /*#__PURE__*/React.createElement(AccountSettingsLink, {
       env: env
     }))))))))
@@ -32924,11 +33124,11 @@ const SmallTopbar = ({
     toggle: toggleProductSwitcher,
     visible: productSwitcherVisible
   })), routesMenuVisible && (/*#__PURE__*/React.createElement("div", {
-    className: styles$5["routes"]
+    className: styles$6["routes"]
   }, props.routes)), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classnames(styles$5["current-route"], {
-      [styles$5["is-active"]]: routesMenuVisible
+    className: classnames(styles$6["current-route"], {
+      [styles$6["is-active"]]: routesMenuVisible
     }),
     onClick: props.routes.length > 0 ? () => {
       setProductSwitcherVisible(false);
@@ -32936,7 +33136,7 @@ const SmallTopbar = ({
     } : null
   }, /*#__PURE__*/React.createElement(CurrentRouteComponent, null, capitalize$1(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$5["profile-button"],
+    className: styles$6["profile-button"],
     onClick: () => {
       var _a, _b;
       props.requestConnectedPeopleFetch();
@@ -32952,7 +33152,7 @@ const SmallRoute = ({
   className,
   ...props
 }) => (/*#__PURE__*/React.createElement("a", {
-  className: classnames(styles$5["route"], className, active && styles$5["is-active"]),
+  className: classnames(styles$6["route"], className, active && styles$6["is-active"]),
   ...props
 }));
 
@@ -33091,7 +33291,7 @@ const topbarTheme = {
   id: "topbar"
 };
 
-var styles$4 = {"debug-pco-resource":"debug-pco-resource-sLteM","debug-pco-resource-header":"debug-pco-resource-header-5fEbe","debug-pco-resource-badge":"debug-pco-resource-badge-J9v1F","debug-pco-resource-title":"debug-pco-resource-title-volWV","debug-pco-resource-field":"debug-pco-resource-field-7Gitp","debug-pco-resource-field-label":"debug-pco-resource-field-label--f1xX","debug-pco-resource-field-value":"debug-pco-resource-field-value-YoX-C","debug-pco-resource-note":"debug-pco-resource-note-N5xyf","debug-pco-resource-json":"debug-pco-resource-json-Rx-JI"};
+var styles$5 = {"debug-pco-resource":"debug-pco-resource-sLteM","debug-pco-resource-header":"debug-pco-resource-header-5fEbe","debug-pco-resource-badge":"debug-pco-resource-badge-J9v1F","debug-pco-resource-title":"debug-pco-resource-title-volWV","debug-pco-resource-field":"debug-pco-resource-field-7Gitp","debug-pco-resource-field-label":"debug-pco-resource-field-label--f1xX","debug-pco-resource-field-value":"debug-pco-resource-field-value-YoX-C","debug-pco-resource-note":"debug-pco-resource-note-N5xyf","debug-pco-resource-json":"debug-pco-resource-json-Rx-JI"};
 
 function isPresent(value) {
   return value !== undefined && value.trim() !== "";
@@ -33120,11 +33320,11 @@ function Field({
   value
 }) {
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$4["debug-pco-resource-field"]
+    className: styles$5["debug-pco-resource-field"]
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$4["debug-pco-resource-field-label"]
+    className: styles$5["debug-pco-resource-field-label"]
   }, label), /*#__PURE__*/React.createElement("span", {
-    className: styles$4["debug-pco-resource-field-value"]
+    className: styles$5["debug-pco-resource-field-value"]
   }, value));
 }
 // Only staff ghosting or impersonating a person get pco:staff-access-level,
@@ -33197,13 +33397,13 @@ function DebugPanel({
     };
   }, [pcrl, env]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames("staff-only", styles$4["debug-pco-resource"])
+    className: classnames("staff-only", styles$5["debug-pco-resource"])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$4["debug-pco-resource-header"]
+    className: styles$5["debug-pco-resource-header"]
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$4["debug-pco-resource-badge"]
+    className: styles$5["debug-pco-resource-badge"]
   }, "Staff"), /*#__PURE__*/React.createElement("span", {
-    className: styles$4["debug-pco-resource-title"]
+    className: styles$5["debug-pco-resource-title"]
   }, "Recently Visited debug")), /*#__PURE__*/React.createElement(Field, {
     label: "pco:resource",
     value: describeTag("resource", resource)
@@ -33211,29 +33411,29 @@ function DebugPanel({
     label: "pco:recently_visitable",
     value: describeTag("recently_visitable", recentlyVisitable)
   }), hasInvalidResource && (/*#__PURE__*/React.createElement("p", {
-    className: styles$4["debug-pco-resource-note"]
+    className: styles$5["debug-pco-resource-note"]
   }, "pco:resource isn't a PCRL (product/v2/type/id), so Recently Visited ignores it.")), visit === null && (/*#__PURE__*/React.createElement("p", {
-    className: styles$4["debug-pco-resource-note"]
+    className: styles$5["debug-pco-resource-note"]
   }, "This page is not eligible for Recently Visited")), pcrl && hasRecentlyVisitable && (/*#__PURE__*/React.createElement("p", {
-    className: styles$4["debug-pco-resource-note"]
+    className: styles$5["debug-pco-resource-note"]
   }, "Both tags are present \u2014 pco:resource takes precedence for the Recently Visited entry.")), pcrl && lookup.status === "loading" && (/*#__PURE__*/React.createElement("p", {
-    className: styles$4["debug-pco-resource-note"]
+    className: styles$5["debug-pco-resource-note"]
   }, "Looking up resource\u2026")), pcrl && lookup.status === "error" && (/*#__PURE__*/React.createElement("p", {
-    className: styles$4["debug-pco-resource-note"]
+    className: styles$5["debug-pco-resource-note"]
   }, lookup.message)), pcrl && lookup.status === "loaded" && (/*#__PURE__*/React.createElement("pre", {
-    className: styles$4["debug-pco-resource-json"]
+    className: styles$5["debug-pco-resource-json"]
   }, JSON.stringify(lookup.json, null, 2))), (visit === null || visit === void 0 ? void 0 : visit.type) === "page" && (/*#__PURE__*/React.createElement("p", {
-    className: styles$4["debug-pco-resource-note"]
+    className: styles$5["debug-pco-resource-note"]
   }, "Recently Visited title: ", visit.title)), /*#__PURE__*/React.createElement("span", {
-    className: styles$4["debug-pco-resource-field-label"]
+    className: styles$5["debug-pco-resource-field-label"]
   }, "Recently Visited"), personId ? (/*#__PURE__*/React.createElement("pre", {
-    className: styles$4["debug-pco-resource-json"]
+    className: styles$5["debug-pco-resource-json"]
   }, JSON.stringify(recentlyVisited, null, 2))) : (/*#__PURE__*/React.createElement("p", {
-    className: styles$4["debug-pco-resource-note"]
+    className: styles$5["debug-pco-resource-note"]
   }, "No current person, so nothing is recorded.")));
 }
 
-var styles$3 = {"drawer-wrap":"drawer-wrap-J0rSL","is-visible":"is-visible-KTME8","drawer":"drawer-j7f4l"};
+var styles$4 = {"drawer-wrap":"drawer-wrap-J0rSL","is-visible":"is-visible-KTME8","drawer":"drawer-j7f4l"};
 
 function Drawer({
   children,
@@ -33241,7 +33441,7 @@ function Drawer({
 }) {
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: styles$3["drawer"]
+    className: styles$4["drawer"]
   }, children);
 }
 function DrawerWrap({
@@ -33251,7 +33451,7 @@ function DrawerWrap({
   ...props
 }) {
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles$3["drawer-wrap"], className, isVisible && styles$3["is-visible"]),
+    className: classnames(styles$4["drawer-wrap"], className, isVisible && styles$4["is-visible"]),
     ...props
   }, children);
 }
@@ -33467,7 +33667,7 @@ function Icon({
   }));
 }
 
-var styles$2 = {"color-mode-switcher":"color-mode-switcher-JpczO","color-mode-switcher-label":"color-mode-switcher-label-3jPM2","color-mode-switcher-modes":"color-mode-switcher-modes-u-bic"};
+var styles$3 = {"color-mode-switcher":"color-mode-switcher-JpczO","color-mode-switcher-label":"color-mode-switcher-label-3jPM2","color-mode-switcher-modes":"color-mode-switcher-modes-u-bic"};
 
 const COLOR_MODES = [{
   icon: "toolbar.sun",
@@ -33490,11 +33690,11 @@ function ColorModeSwitcher() {
   const updateStore = useUpdateStore();
   const [counter] = React.useState(() => COLOR_MODE_INSTANCE_COUNTER++);
   return /*#__PURE__*/React.createElement("fieldset", {
-    className: styles$2["color-mode-switcher"]
+    className: styles$3["color-mode-switcher"]
   }, /*#__PURE__*/React.createElement("legend", {
-    className: styles$2["color-mode-switcher-label"]
+    className: styles$3["color-mode-switcher-label"]
   }, "Appearance", " "), /*#__PURE__*/React.createElement("div", {
-    className: styles$2["color-mode-switcher-modes"]
+    className: styles$3["color-mode-switcher-modes"]
   }, COLOR_MODES.map(({
     icon,
     label,
@@ -33764,7 +33964,7 @@ const useToolbarReducer = overrides => React__namespace.useReducer(reducer, {
   ...overrides
 });
 
-var styles$1 = {"toolbar":"toolbar-KHJR5","toolbar-button":"toolbar-button-Ye4h5","is-current":"is-current-DZK47","toolbar-button--avatar":"toolbar-button--avatar-5FUik","toolbar-button--home":"toolbar-button--home-Pthd0"};
+var styles$2 = {"toolbar":"toolbar-KHJR5","toolbar-button":"toolbar-button-Ye4h5","is-current":"is-current-DZK47","toolbar-button--avatar":"toolbar-button--avatar-5FUik","toolbar-button--home":"toolbar-button--home-Pthd0"};
 
 // PCO Box serves TLS by default, and a bare http:// frame inside an https
 // product page is blocked as mixed content, so follow the page's scheme.
@@ -33936,7 +34136,7 @@ const DeveloperTools = {
   name: "DeveloperTools"
 };
 
-var styles = {"banner":"banner-YfQ37","stacked":"stacked-EwLRh","content":"content-lNjWf","icon":"icon-abz7q","iconShape":"iconShape-6uyot","iconSparkle":"iconSparkle-t0OzK","text":"text--Vlhl","title":"title-zOEOR","subtitle":"subtitle-ufLnk","chevron":"chevron-oOUA-","inlineContent":"inlineContent-h5sVl","sparkle":"sparkle-uuMBp","inlineTitle":"inlineTitle-ru2Rk","action":"action-fSY3n","actionLabel":"actionLabel-MRBjb","actionChevron":"actionChevron-DghlN"};
+var styles$1 = {"banner":"banner-YfQ37","stacked":"stacked-EwLRh","content":"content-lNjWf","icon":"icon-abz7q","iconShape":"iconShape-6uyot","iconSparkle":"iconSparkle-t0OzK","text":"text--Vlhl","title":"title-zOEOR","subtitle":"subtitle-ufLnk","chevron":"chevron-oOUA-","inlineContent":"inlineContent-h5sVl","sparkle":"sparkle-uuMBp","inlineTitle":"inlineTitle-ru2Rk","action":"action-fSY3n","actionLabel":"actionLabel-MRBjb","actionChevron":"actionChevron-DghlN"};
 
 const SPARKLE_PATH$1 = "M3.809 10.1332C3.87511 9.95596 4.12579 9.95588 4.19181 10.1332L4.63712 11.3363C4.64169 11.3487 4.65116 11.359 4.66349 11.3637L5.86661 11.809C6.04452 11.8749 6.04455 12.126 5.86661 12.1918L4.66349 12.6371C4.65134 12.6417 4.64173 12.6513 4.63712 12.6635L4.19181 13.8666C4.12597 14.0445 3.87486 14.0445 3.809 13.8666L3.36368 12.6635C3.35905 12.6512 3.3487 12.6417 3.33634 12.6371L2.13321 12.1918C1.95588 12.1258 1.95596 11.8751 2.13321 11.809L3.33634 11.3637C3.34877 11.3591 3.35908 11.3488 3.36368 11.3363L3.809 10.1332ZM8.52091 3.33341C8.68571 2.88899 9.31518 2.88891 9.47989 3.33341L10.5922 6.34122C10.6037 6.37226 10.6285 6.39712 10.6596 6.4086L13.6664 7.52091C14.1113 7.68553 14.1113 8.31528 13.6664 8.47989L10.6596 9.5922C10.6285 9.6037 10.6037 9.6285 10.5922 9.65958L9.47989 12.6664C9.31528 13.1113 8.68553 13.1113 8.52091 12.6664L7.4086 9.65958C7.39712 9.62853 7.37226 9.60371 7.34122 9.5922L4.33341 8.47989C3.88891 8.31518 3.88899 7.68571 4.33341 7.52091L7.34122 6.4086C7.3723 6.3971 7.3971 6.3723 7.4086 6.34122L8.52091 3.33341ZM3.809 2.13321C3.87511 1.95596 4.12579 1.95588 4.19181 2.13321L4.63712 3.33634C4.64169 3.3487 4.65116 3.35905 4.66349 3.36368L5.86661 3.809C6.04452 3.87486 6.04455 4.12597 5.86661 4.19181L4.66349 4.63712C4.65134 4.64173 4.64173 4.65134 4.63712 4.66349L4.19181 5.86661C4.12597 6.04455 3.87486 6.04452 3.809 5.86661L3.36368 4.66349C3.35905 4.65116 3.3487 4.64169 3.33634 4.63712L2.13321 4.19181C1.95588 4.12579 1.95596 3.87511 2.13321 3.809L3.33634 3.36368C3.34877 3.35908 3.35908 3.34877 3.36368 3.33634L3.809 2.13321Z";
 // Same stops as the AskAIBanner border gradient, so the two stay in sync.
@@ -33996,8 +34196,8 @@ function AskAIBanner(props) {
   var _a, _b;
   const isStacked = props.variant !== "inline";
   return /*#__PURE__*/React.createElement("button", {
-    className: classnames(styles.banner, {
-      [styles.stacked]: isStacked
+    className: classnames(styles$1.banner, {
+      [styles$1.stacked]: isStacked
     }),
     onClick: () => props.onClick(),
     type: "button"
@@ -34012,15 +34212,15 @@ function StackedContent({
   title
 }) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: styles.content
+    className: styles$1.content
   }, /*#__PURE__*/React.createElement(AskAIIcon, null), /*#__PURE__*/React.createElement("span", {
-    className: styles.text
+    className: styles$1.text
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles.title
+    className: styles$1.title
   }, title), /*#__PURE__*/React.createElement("span", {
-    className: styles.subtitle
+    className: styles$1.subtitle
   }, "Support answers tailored to you"))), /*#__PURE__*/React.createElement(tapestryReact.Icon, {
-    className: styles.chevron,
+    className: styles$1.chevron,
     name: "general.rightChevron",
     size: "16px"
   }));
@@ -34030,18 +34230,18 @@ function InlineContent({
   title
 }) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: styles.inlineContent
+    className: styles$1.inlineContent
   }, /*#__PURE__*/React.createElement(SparkleIcon, {
-    className: styles.sparkle,
+    className: styles$1.sparkle,
     fill: "currentColor"
   }), /*#__PURE__*/React.createElement("span", {
-    className: styles.inlineTitle
+    className: styles$1.inlineTitle
   }, title)), /*#__PURE__*/React.createElement("span", {
-    className: styles.action
+    className: styles$1.action
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles.actionLabel
+    className: styles$1.actionLabel
   }, action), /*#__PURE__*/React.createElement(tapestryReact.Icon, {
-    className: styles.actionChevron,
+    className: styles$1.actionChevron,
     name: "general.rightChevron",
     size: "14px"
   })));
@@ -34058,9 +34258,9 @@ function AskAIIcon() {
   const borderA = `${uid}-border-a`;
   const borderB = `${uid}-border-b`;
   return /*#__PURE__*/React.createElement("span", {
-    className: styles.icon
+    className: styles$1.icon
   }, /*#__PURE__*/React.createElement("svg", {
-    className: styles.iconShape,
+    className: styles$1.iconShape,
     viewBox: "0 0 32 32",
     fill: "none",
     "aria-hidden": "true"
@@ -34231,7 +34431,7 @@ function AskAIIcon() {
     stopColor: "#D48B91",
     stopOpacity: "0"
   })))), /*#__PURE__*/React.createElement("svg", {
-    className: styles.iconSparkle,
+    className: styles$1.iconSparkle,
     viewBox: "0 0 19.4995 17.9999",
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("path", {
@@ -34240,6 +34440,24 @@ function AskAIIcon() {
   })));
 }
 
+var styles = {"button":"button-2NVI1","sparkle":"sparkle-ruJGP","label":"label-4NUGB"};
+
+function AskAIButton({
+  onClick,
+  text = "Ask AI"
+}) {
+  return /*#__PURE__*/React.createElement("button", {
+    className: styles.button,
+    onClick: () => onClick(),
+    type: "button"
+  }, /*#__PURE__*/React.createElement(SparkleIcon, {
+    className: styles.sparkle,
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: styles.label
+  }, text));
+}
+
 // The article heading lives in the deepest populated hierarchy level (lvl0 is
 // always "Planning Center").
 const hitTitle = hierarchy => (hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.lvl6) || (hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.lvl5) || (hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.lvl4) || (hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.lvl3) || (hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.lvl2) || (hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.lvl1) || (hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.lvl0) || "";
@@ -34423,6 +34641,9 @@ function createPicobotIframe(picobotOrigin, {
     // Contact support) and picobot's own NEW_ROUTE_RENDERED reports—so it
     // always reflects the live conversation. See buildPicobotSrc.
     const [loadedPath, setLoadedPath] = React.useState(iframePath || "");
+    // Hidden until picobot paints so its blank first frame doesn't flash
+    // white against the drawer in dark mode.
+    const [isReady, setIsReady] = React.useState(false);
     const hasReportedErrorRef = React.useRef(false);
     const loadTimeoutRef = React.useRef();
     const reportLoadError = React.useCallback(() => {
@@ -34450,7 +34671,10 @@ function createPicobotIframe(picobotOrigin, {
           setLoadedPath(reportedPath);
           onIframeChangePath(reportedPath);
         }
-        if (((_c = e.data) === null || _c === void 0 ? void 0 : _c.type) === "READY") clearTimeout(loadTimeoutRef.current);
+        if (((_c = e.data) === null || _c === void 0 ? void 0 : _c.type) === "READY") {
+          clearTimeout(loadTimeoutRef.current);
+          setIsReady(true);
+        }
         if (onMessage) onMessage(e.data);
       }
       window.addEventListener("message", handleGuestMessage);
@@ -34479,6 +34703,7 @@ function createPicobotIframe(picobotOrigin, {
         border: 0,
         flex: 1,
         height: "100%",
+        visibility: isReady ? undefined : "hidden",
         width: "100%"
       },
       title: "Picobot"
@@ -34550,6 +34775,18 @@ function HelpdeskComponent({
           }
         }
       },
+      AskAIButton: {
+        component: AskAIButton,
+        properties: {
+          onClick: {
+            event: false,
+            type: Function
+          },
+          text: {
+            type: String
+          }
+        }
+      },
       CalendlyWidget: {
         component: CalendlyWidget,
         properties: {
@@ -36058,18 +36295,18 @@ function Toolbar({
   return /*#__PURE__*/React.createElement(tapestryReact.ThemeProvider, {
     theme: topbarTheme
   }, /*#__PURE__*/React.createElement(addOns.UiExtensionDataContext, null, /*#__PURE__*/React.createElement("div", {
-    className: styles$1["toolbar"],
+    className: styles$2["toolbar"],
     "data-pendo": "toolbar-profile-support-wrapper"
   }, /*#__PURE__*/React.createElement(ToolbarButton, {
     "aria-label": `Open ${userName}’s profile drawer`,
     onClick: () => toggleDrawer(Profile),
     "data-pendo": "toolbar-profile",
-    className: styles$1["toolbar-button--avatar"]
+    className: styles$2["toolbar-button--avatar"]
   }, /*#__PURE__*/React.createElement(Avatar, {
     env: env,
     url: userAvatarPath
   })), /*#__PURE__*/React.createElement(ToolbarButton, {
-    className: styles$1["toolbar-button--home"],
+    className: styles$2["toolbar-button--home"],
     onClick: () => closeDrawer()
   }, /*#__PURE__*/React.createElement(tapestryReact.Icon, {
     name: "toolbar.planningCenter",
@@ -36106,7 +36343,7 @@ const ToolbarButton = ({
 }) => {
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classnames(styles$1["toolbar-button"], className, current && styles$1["is-current"]),
+    className: classnames(styles$2["toolbar-button"], className, current && styles$2["is-current"]),
     onClick: onClick,
     "data-toolbar-link": "true",
     ...restProps