@planningcenter/topbar 12.3.0-qa-899.0 → 12.3.0

package/dist/topbar.modern.js

@@ -1,7 +1,7 @@
 import { Link, Button, Popover, PopoverTrigger, PopoverContent, Modal } from '@planningcenter/tapestry';
 import * as React from 'react';
 import React__default, { useState, useEffect, useMemo, useLayoutEffect, useContext, createContext, useCallback, useRef } from 'react';
-import pcoUrl$1, { pcoApiUrl } from '@planningcenter/url';
+import pcoUrl$1, { pcoUrl as pcoUrl$2, pcoApiUrl } from '@planningcenter/url';
 import * as general from '@planningcenter/icons/paths/general';
 import Jolt from '@planningcenter/jolt-client';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
@@ -17,7 +17,7 @@ import { useSearchBox, useHits, InstantSearch, Configure } from 'react-instantse
 import { TransitionGroup, Transition } from 'react-transition-group';
 import datetimeFmt from '@planningcenter/datetime-fmt';
 
-var styles$i = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
+var styles$l = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
 
 const AccessibilityToolbar = ({
   children
@@ -29,7 +29,7 @@ const AccessibilityToolbar = ({
     (_a = document.getElementById("main-content")) === null || _a === void 0 ? void 0 : _a.focus();
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: styles$i["accessibility-toolbar"]
+    className: styles$l["accessibility-toolbar"]
   }, /*#__PURE__*/React__default.createElement(Link, {
     href: "#main-content",
     kind: "primary",
@@ -346,11 +346,11 @@ const X = ({
   fill: fill
 })));
 
-var styles$h = {"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$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"};
 
 function AnnouncementIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    className: styles$h["announcement-icon"],
+    className: styles$k["announcement-icon"],
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
@@ -475,7 +475,7 @@ let StyledAnnouncement$1 = class StyledAnnouncement extends React__default.Compo
     } = this.props;
     const isPromo = variant === "promo";
     return /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles$h["announcement"], styles$h[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
+      className: classnames(styles$k["announcement"], styles$k[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
       "data-announcement-variant": variant !== null && variant !== void 0 ? variant : "platform",
       style: isPromo ? {
         backgroundImage: promoBackgroundUrl,
@@ -484,7 +484,7 @@ let StyledAnnouncement$1 = class StyledAnnouncement extends React__default.Compo
         backgroundSize: "cover"
       } : undefined
     }, !isPromo && /*#__PURE__*/React__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.createElement("div", {
-      className: styles$h["announcement-content"],
+      className: styles$k["announcement-content"],
       style: style,
       ...platformProps
     }));
@@ -533,7 +533,7 @@ function StyledDismissButton$1({
   const isPromo = variant === "promo";
   return /*#__PURE__*/React__default.createElement("button", {
     type: "button",
-    className: classnames(styles$h.dismiss, isPromo && styles$h["dismiss--promo"]),
+    className: classnames(styles$k.dismiss, isPromo && styles$k["dismiss--promo"]),
     ...props
   }, /*#__PURE__*/React__default.createElement(X, {
     fill: isPromo ? "currentColor" : "white",
@@ -613,9 +613,9 @@ class StyledAnnouncement extends React__default.Component {
       ...platformProps
     } = this.props;
     return /*#__PURE__*/React__default.createElement("div", {
-      className: styles$h["announcement"]
+      className: styles$k["announcement"]
     }, /*#__PURE__*/React__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.createElement("div", {
-      className: styles$h["announcement-content"],
+      className: styles$k["announcement-content"],
       style: style,
       ...platformProps
     }));
@@ -626,7 +626,7 @@ function StyledDismissButton({
 }) {
   return /*#__PURE__*/React__default.createElement("button", {
     type: "button",
-    className: styles$h.dismiss,
+    className: styles$k.dismiss,
     ...props
   }, /*#__PURE__*/React__default.createElement(X, {
     fill: "white",
@@ -1748,7 +1748,7 @@ function MonoAppIcon({
   })) : (/*#__PURE__*/React__default.createElement("div", null, "appName not supported")));
 }
 
-var styles$g = {"icon-slot":"icon-slot-m3ZIk","name":"name-UNqbW"};
+var styles$j = {"icon-slot":"icon-slot-m3ZIk","name":"name-UNqbW"};
 
 const AppRow = ({
   appName,
@@ -1757,24 +1757,24 @@ const AppRow = ({
 }) => {
   if (appName === "Accounts") {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-      className: styles$g["icon-slot"]
+      className: styles$j["icon-slot"]
     }, /*#__PURE__*/React__default.createElement(MonoAppIcon, {
       appName: "Accounts",
       colors: colors,
       size: iconSize
     })), /*#__PURE__*/React__default.createElement("span", {
-      className: styles$g.name
+      className: styles$j.name
     }, "Account settings"));
   }
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ColorAppIcon, {
     appName: appName.replace(/[\s-]/, ""),
     size: iconSize
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: styles$g.name
+    className: styles$j.name
   }, appName));
 };
 
-var styles$f = {"button":"button-XMbeQ","label":"label-884of","chevron":"chevron-RRg9k"};
+var styles$i = {"button":"button-XMbeQ","label":"label-884of","chevron":"chevron-RRg9k"};
 
 const AppsButton = /*#__PURE__*/React__default.forwardRef(({
   appName,
@@ -1786,10 +1786,10 @@ const AppsButton = /*#__PURE__*/React__default.forwardRef(({
     ...restProps,
     ref: ref,
     "aria-label": `App switcher: ${appName}`,
-    className: styles$f.button,
+    className: styles$i.button,
     kind: "neutral-inline",
     label: /*#__PURE__*/React__default.createElement("span", {
-      className: styles$f.label
+      className: styles$i.label
     }, isAccounts ? "Account settings" : appName),
     prefix: isAccounts ? (/*#__PURE__*/React__default.createElement(MonoAppIcon, {
       appName: "Accounts",
@@ -1800,13 +1800,13 @@ const AppsButton = /*#__PURE__*/React__default.forwardRef(({
       size: 22
     })),
     suffix: /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, {
-      className: `${styles$f.chevron} symbol`
+      className: `${styles$i.chevron} symbol`
     })
   });
 });
 AppsButton.displayName = "AppsButton";
 
-var styles$e = {"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$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"};
 
 const AppsMenu = ({
   appName,
@@ -1827,8 +1827,8 @@ const AppsMenu = ({
     }, /*#__PURE__*/React__default.createElement("a", {
       "aria-current": isCurrent ? "page" : undefined,
       "aria-label": name,
-      className: classnames(styles$e.link, {
-        [styles$e.current]: isCurrent
+      className: classnames(styles$h.link, {
+        [styles$h.current]: isCurrent
       }),
       "data-pendo": `app-switcher--change-app--${name}`,
       "data-turbolinks": false,
@@ -1844,22 +1844,22 @@ const AppsMenu = ({
     colors: colors
   })), /*#__PURE__*/React__default.createElement(PopoverContent, {
     "aria-label": "Switch app",
-    className: styles$e["popover-content"],
+    className: styles$h["popover-content"],
     placement: "bottom start"
   }, /*#__PURE__*/React__default.createElement("nav", {
-    className: styles$e.nav,
+    className: styles$h.nav,
     "data-pendo": "app-switcher"
   }, /*#__PURE__*/React__default.createElement("ul", {
-    className: styles$e.list,
+    className: styles$h.list,
     role: "list"
   }, homeProduct && renderProductLink(homeProduct.name), restProducts.map(({
     name
   }) => renderProductLink(name)), accountsProduct && (/*#__PURE__*/React__default.createElement("li", {
-    className: styles$e["accounts-item"]
+    className: styles$h["accounts-item"]
   }, /*#__PURE__*/React__default.createElement("a", {
     "aria-current": appName === accountsProduct.name ? "page" : undefined,
     "aria-label": "Account settings",
-    className: classnames(styles$e.link, styles$e["accounts-link"]),
+    className: classnames(styles$h.link, styles$h["accounts-link"]),
     "data-pendo": "app-switcher--change-app--Accounts",
     "data-turbolinks": false,
     href: pcoUrl$1(env)("accounts") + getAppsSwitchProductPath(accountsProduct.name)
@@ -2067,7 +2067,7 @@ function MonoAppName({
   })) : (/*#__PURE__*/React__default.createElement("div", null, "appName not supported"));
 }
 
-var styles$d = {"unbutton":"unbutton-lEbTR"};
+var styles$g = {"unbutton":"unbutton-lEbTR"};
 
 function Unbutton({
   className,
@@ -2076,7 +2076,7 @@ function Unbutton({
   ...nativeProps
 }) {
   return /*#__PURE__*/React__default.createElement("button", {
-    className: classnames(styles$d.unbutton, className),
+    className: classnames(styles$g.unbutton, className),
     style: {
       ...style
     },
@@ -2085,7 +2085,7 @@ function Unbutton({
   });
 }
 
-var styles$c = {"button":"button-wsipc","button-accounts":"button-accounts-zQmBM","chevron":"chevron-obyBF","is-expanded":"is-expanded-PoCQ9"};
+var styles$f = {"button":"button-wsipc","button-accounts":"button-accounts-zQmBM","chevron":"chevron-obyBF","is-expanded":"is-expanded-PoCQ9"};
 
 const LegacyAppsButton = ({
   appName,
@@ -2100,8 +2100,8 @@ const LegacyAppsButton = ({
     "aria-haspopup": "true",
     "aria-label": `App switcher: ${appName}`,
     onClick: onClick,
-    className: classnames(styles$c.button, {
-      [styles$c["is-expanded"]]: expanded
+    className: classnames(styles$f.button, {
+      [styles$f["is-expanded"]]: expanded
     }),
     type: "button",
     style: style,
@@ -2110,7 +2110,7 @@ const LegacyAppsButton = ({
     appName: "Accounts",
     colors: colors
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$c["button-accounts"]
+    className: styles$f["button-accounts"]
   }, "Account settings"))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ColorAppIcon, {
     appName: appName.replace(/[\s-]/, "")
   }), /*#__PURE__*/React__default.createElement(MonoAppName, {
@@ -2118,7 +2118,7 @@ const LegacyAppsButton = ({
     key: "mono-app-name",
     size: 24
   }))), /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, {
-    className: styles$c.chevron,
+    className: styles$f.chevron,
     key: "disclosure-chevron-icon"
   }));
 };
@@ -2251,7 +2251,7 @@ class Outsider extends React__default.Component {
   }
 }
 
-var styles$b = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
+var styles$e = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
 
 const Popup = ({
   className,
@@ -2259,8 +2259,8 @@ const Popup = ({
   isVisible,
   ...nativeProps
 }) => (/*#__PURE__*/React__default.createElement(C, {
-  className: classnames(styles$b.popup, {
-    [styles$b["is-visible"]]: isVisible
+  className: classnames(styles$e.popup, {
+    [styles$e["is-visible"]]: isVisible
   }, className),
   ...nativeProps
 }));
@@ -2268,11 +2268,11 @@ const Popup = ({
 const PopupRoot = ({
   ...nativeProps
 }) => (/*#__PURE__*/React__default.createElement("div", {
-  className: styles$b["popup-root"],
+  className: styles$e["popup-root"],
   ...nativeProps
 }));
 
-var styles$a = {"popup":"popup-bVhSa"};
+var styles$d = {"popup":"popup-bVhSa"};
 
 const LegacyAppsMenu = ({
   appName,
@@ -2310,7 +2310,7 @@ const LegacyAppsMenu = ({
     cleanup: !visible,
     component: Outsider,
     onOutsideClick: toggle,
-    className: styles$a.popup,
+    className: styles$d.popup,
     isVisible: visible
   }, /*#__PURE__*/React__default.createElement("menu", {
     ref: menuRef,
@@ -3220,7 +3220,97 @@ const useUpdateStore = () => useCallback(updates => {
   });
 }, []);
 
+const isMac = () => /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+const hasCommandKey = event => isMac() ? event.metaKey : event.ctrlKey;
+const commandKeyLabel = () => isMac() ? "⌘" : "Ctrl+";
+
+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.
+  }
+}
+
+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) {
+  const [id] = React__default.useState(() => `${prefix}-${++instanceCount$1}`);
+  return id;
+}
+
+function ProductTabs({
+  children,
+  onKeyDown,
+  onSelect,
+  products,
+  selected
+}) {
+  const id = useInstanceId("product-tabs");
+  const tabId = slug => `${id}-tab-${slug}`;
+  const tabRefs = React__default.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();
+    } else {
+      onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    "aria-label": "Product",
+    onKeyDown: handleKeyDown,
+    role: "tablist"
+  }, products.map(product => (/*#__PURE__*/React__default.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__default.createElement("div", {
+    "aria-labelledby": tabId(selected.slug),
+    id: `${id}-panel`,
+    role: "tabpanel"
+  }, children));
+}
+
+var styles$a = {"result":"result-WCnxr"};
+
 function SearchResult({
+  highlighted,
+  id,
+  onHighlight,
   result
 }) {
   const {
@@ -3228,62 +3318,222 @@ function SearchResult({
     title,
     url
   } = result.attributes;
+  const ref = React__default.useRef(null);
+  React__default.useEffect(() => {
+    var _a;
+    if (highlighted) (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+      block: "nearest"
+    });
+  }, [highlighted]);
+  // Focus stays in the search input, which points at the highlighted result
+  // with aria-activedescendant, so results are kept out of the tab order.
+  // Mouse move rather than enter: arrowing scrolls results under a resting
+  // pointer, and that shouldn't steal the highlight.
   return /*#__PURE__*/React__default.createElement("a", {
-    href: url
+    "aria-selected": highlighted,
+    className: styles$a.result,
+    href: url,
+    id: id,
+    onMouseMove: onHighlight,
+    ref: ref,
+    role: "option",
+    tabIndex: -1
   }, /*#__PURE__*/React__default.createElement("div", null, title), /*#__PURE__*/React__default.createElement("div", null, summarize(metadata)));
 }
 function summarize(metadata) {
   return Object.values(metadata !== null && metadata !== void 0 ? metadata : {}).filter(value => typeof value === "string" && value !== "").join(" · ");
 }
 
-const SEARCH_DEBOUNCE_MS = 300;
-function useProductSearch(term) {
-  const query = term.trim();
-  const debouncedQuery = useDebouncedValue(query, SEARCH_DEBOUNCE_MS);
-  const [search, setSearch] = React__default.useState({
-    status: "idle"
+const resultId = (listboxId, index) => `${listboxId}-result-${index}`;
+function SearchResults({
+  search,
+  term,
+  ...navigation
+}) {
+  var _a;
+  switch (search.status) {
+    case "idle":
+      return null;
+    case "loading":
+      if ((_a = search.groups) === null || _a === void 0 ? void 0 : _a.length) {
+        return /*#__PURE__*/React__default.createElement(ResultGroups, {
+          busy: true,
+          groups: search.groups,
+          ...navigation
+        });
+      }
+      return /*#__PURE__*/React__default.createElement("p", {
+        role: "status"
+      }, "Searching\u2026");
+    case "error":
+      return /*#__PURE__*/React__default.createElement("p", {
+        role: "alert"
+      }, "Search isn\u2019t working right now. Try again.");
+    case "done":
+      if (search.groups.length === 0) {
+        return /*#__PURE__*/React__default.createElement("p", {
+          role: "status"
+        }, "No results for \u201C", term.trim(), "\u201D");
+      }
+      return /*#__PURE__*/React__default.createElement(ResultGroups, {
+        groups: search.groups,
+        ...navigation
+      });
+  }
+}
+function ResultGroups({
+  busy = false,
+  groups,
+  highlightedIndex,
+  id,
+  label,
+  onHighlight
+}) {
+  let index = 0;
+  return /*#__PURE__*/React__default.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__default.createElement("div", {
+      "aria-labelledby": headingId,
+      key: type,
+      role: "group"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      id: headingId
+    }, type), results.map(result => {
+      const resultIndex = index++;
+      return /*#__PURE__*/React__default.createElement(SearchResult, {
+        highlighted: resultIndex === highlightedIndex,
+        id: resultId(id, resultIndex),
+        key: result.id,
+        onHighlight: () => onHighlight(resultIndex),
+        result: result
+      });
+    }));
+  }));
+}
+
+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).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__default.useState();
   React__default.useEffect(() => {
-    if (!debouncedQuery) {
-      setSearch({
-        status: "idle"
-      });
+    if (url) {
+      let current = true;
+      cachedRequest(url).then(data => current && setSettled({
+        data,
+        url
+      }), () => current && setSettled({
+        failed: true,
+        url
+      }));
+      return () => {
+        current = false;
+      };
+    } else {
       return undefined;
     }
-    let current = true;
-    setSearch({
+  }, [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"
-    });
-    apiRequest(defaultFetch, productSearchUrl(debouncedQuery)).then(({
-      json,
-      ok
-    }) => {
-      if (!current) return;
-      setSearch(ok && json ? {
-        groups: groupByType(json),
-        status: "done"
-      } : {
-        status: "error"
-      });
-    });
-    return () => {
-      current = false;
     };
-  }, [debouncedQuery]);
-  if (!query) return {
-    status: "idle"
-  };
-  if (query !== debouncedQuery) return {
-    status: "loading"
-  };
-  return search;
+  } else if ("data" in settled) {
+    return {
+      data: settled.data,
+      status: "done"
+    };
+  } else {
+    return {
+      status: "error"
+    };
+  }
+}
+
+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__default.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"
+    };
+  }
 }
-function productSearchUrl(query) {
+function productSearchUrl(product, query) {
   const params = new URLSearchParams({
     per_page: "100",
     "where[term]": query
   });
-  return `${window.location.origin}/~api/people/v2/product_search_results?${params}`;
+  return `${window.location.origin}/~api/${product}/v2/product_search_results?${params}`;
 }
 function groupByType({
   data,
@@ -3308,6 +3558,14 @@ function groupByType({
   };
   return [...groups.values()].sort((a, b) => rank(a.type) - rank(b.type));
 }
+// The product the most recent finished request was for.
+function useSettledProduct(product, status) {
+  const [settledProduct, setSettledProduct] = React__default.useState();
+  React__default.useEffect(() => {
+    if (status === "done") setSettledProduct(product);
+  }, [product, status]);
+  return settledProduct;
+}
 function useDebouncedValue(value, delay) {
   const [debounced, setDebounced] = React__default.useState(value);
   React__default.useEffect(() => {
@@ -3317,53 +3575,199 @@ function useDebouncedValue(value, delay) {
   return debounced;
 }
 
-function SearchResults({
-  term
+const COPIED_FEEDBACK_MS = 1500;
+const verticalStep = key => ({
+  ArrowDown: 1,
+  ArrowUp: -1
+})[key];
+function useResultNavigation(results) {
+  // Remembering which results the index belongs to puts the highlight back on
+  // the first result whenever new ones arrive, without an effect to reset it.
+  const [highlight, setHighlight] = React__default.useState({
+    index: 0,
+    results
+  });
+  const highlightedIndex = highlight.results === results ? highlight.index : 0;
+  const highlighted = results[highlightedIndex];
+  const [copiedUrl, setCopiedUrl] = React__default.useState(null);
+  React__default.useEffect(() => {
+    if (copiedUrl) {
+      const timeout = setTimeout(() => setCopiedUrl(null), COPIED_FEEDBACK_MS);
+      return () => clearTimeout(timeout);
+    } else {
+      return undefined;
+    }
+  }, [copiedUrl]);
+  const highlightIndex = React__default.useCallback(index => setHighlight(current => current.results === results && current.index === index ? current : {
+    index,
+    results
+  }), [results]);
+  const handleKeyDown = event => {
+    const step = verticalStep(event.key);
+    if (step && results.length > 0) {
+      event.preventDefault();
+      highlightIndex((highlightedIndex + step + results.length) % results.length);
+    } else if (event.key === "Enter" && highlighted && !event.nativeEvent.isComposing) {
+      event.preventDefault();
+      open(highlighted.attributes.url, {
+        newTab: hasCommandKey(event)
+      });
+    } else if (isCopyShortcut(event) && highlighted && !hasSelectedText(event.currentTarget)) {
+      event.preventDefault();
+      const {
+        url
+      } = highlighted.attributes;
+      navigator.clipboard.writeText(url).then(() => setCopiedUrl(url));
+    }
+  };
+  return {
+    copied: copiedUrl !== null && copiedUrl === (highlighted === null || highlighted === void 0 ? void 0 : highlighted.attributes.url),
+    handleKeyDown,
+    highlightIndex,
+    highlighted,
+    highlightedIndex: highlighted ? highlightedIndex : null
+  };
+}
+function open(url, {
+  newTab
 }) {
-  const search = useProductSearch(term);
-  switch (search.status) {
-    case "idle":
-      return null;
-    case "loading":
-      return /*#__PURE__*/React__default.createElement("p", {
-        role: "status"
-      }, "Searching\u2026");
-    case "error":
-      return /*#__PURE__*/React__default.createElement("p", {
-        role: "alert"
-      }, "Search isn\u2019t working right now. Try again.");
-    case "done":
-      if (search.groups.length === 0) {
-        return /*#__PURE__*/React__default.createElement("p", {
-          role: "status"
-        }, "No results for \u201C", term.trim(), "\u201D");
+  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 : "") !== "";
+}
+
+const SEARCHABLE_PRODUCTS = [{
+  appName: "Groups",
+  slug: "groups"
+}, {
+  appName: "People",
+  slug: "people"
+}, {
+  appName: "Services",
+  slug: "services"
+}];
+const PERMISSION_CHECKS = {
+  people: () => fetchMe("people", "people_permissions,site_administrator").then(({
+    people_permissions,
+    site_administrator
+  }) => site_administrator || people_permissions !== null),
+  services: () => fetchMe("services", "can_search").then(({
+    can_search
+  }) => can_search)
+};
+function fetchMe(product, fields) {
+  const params = new URLSearchParams({
+    "fields[Person]": fields
+  });
+  return apiRequest(defaultFetch, `${window.location.origin}/~api/${product}/v2/me?${params}`).then(({
+    json,
+    ok
+  }) => {
+    if (!ok || json === null) throw new Error("Permission check failed");
+    return json.data.attributes;
+  });
+}
+// Permissions rarely change mid-session, so a successful check is kept until
+// the page reloads. A failed one is dropped so a remount tries again.
+const permissionCache = new Map();
+function canSearch(slug) {
+  const check = PERMISSION_CHECKS[slug];
+  const cached = permissionCache.get(slug);
+  if (!check) {
+    return Promise.resolve(true);
+  } else if (cached) {
+    return cached;
+  } else {
+    const promise = check().catch(() => {
+      permissionCache.delete(slug);
+      return false;
+    });
+    permissionCache.set(slug, promise);
+    return promise;
+  }
+}
+function useSearchableProducts(apps) {
+  // Keyed by name because providers hand over a fresh `apps` array on renders
+  // where nothing changed.
+  const accessibleKey = inSwitcherOrder(apps).map(({
+    slug
+  }) => slug).join(",");
+  const [settled, setSettled] = React__default.useState();
+  React__default.useEffect(() => {
+    let current = true;
+    const accessible = accessibleKey.split(",").flatMap(slug => SEARCHABLE_PRODUCTS.filter(product => product.slug === slug));
+    Promise.all(accessible.map(({
+      slug
+    }) => canSearch(slug))).then(allowed => {
+      if (current) {
+        setSettled({
+          accessibleKey,
+          products: accessible.filter((_, index) => allowed[index])
+        });
       }
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, search.groups.map(({
-        results,
-        type
-      }) => (/*#__PURE__*/React__default.createElement("section", {
-        "aria-label": type,
-        key: type
-      }, /*#__PURE__*/React__default.createElement("h2", null, type), /*#__PURE__*/React__default.createElement("ul", null, results.map(result => (/*#__PURE__*/React__default.createElement("li", {
-        key: result.id
-      }, /*#__PURE__*/React__default.createElement(SearchResult, {
-        result: result
-      })))))))));
+    });
+    return () => {
+      current = false;
+    };
+  }, [accessibleKey]);
+  if ((settled === null || settled === void 0 ? void 0 : settled.accessibleKey) === accessibleKey) {
+    return {
+      products: settled.products,
+      status: "done"
+    };
+  } else {
+    return {
+      status: "loading"
+    };
   }
 }
+function inSwitcherOrder(apps) {
+  return groupApps(apps).restProducts.flatMap(app => SEARCHABLE_PRODUCTS.filter(product => product.appName === app.name));
+}
 
-const isMac = () => /Mac|iPhone|iPad|iPod/.test(navigator.platform);
-const isSearchShortcut = event => event.key.toLowerCase() === "k" && !event.altKey && !event.shiftKey && (isMac() ? event.metaKey : event.ctrlKey);
-function ProductSearch() {
+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
+}) {
+  const searchable = useSearchableProducts(apps);
+  if (searchable.status === "done" && searchable.products.length > 0) {
+    return /*#__PURE__*/React__default.createElement(SearchButtonAndDialog, {
+      products: searchable.products
+    });
+  } else {
+    return null;
+  }
+}
+function SearchButtonAndDialog({
+  products
+}) {
   const [open, setOpen] = React__default.useState(false);
   React__default.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)) return;
-      // Rich text editors like Trix bind ⌘K to "insert link"; capturing at
-      // the window and stopping propagation keeps them from ever seeing it.
-      event.preventDefault();
-      event.stopPropagation();
-      setOpen(wasOpen => !wasOpen);
+      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
@@ -3373,7 +3777,7 @@ function ProductSearch() {
     });
   }, []);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
-    "aria-keyshortcuts": isMac() ? "Meta+K" : "Control+K",
+    "aria-keyshortcuts": `${isMac() ? "Meta+K" : "Control+K"} /`,
     "aria-label": "Search",
     onClick: () => setOpen(true),
     type: "button"
@@ -3384,21 +3788,357 @@ function ProductSearch() {
     dismissible: true,
     onClose: () => setOpen(false),
     open: open
-  }, /*#__PURE__*/React__default.createElement(SearchPanel, null)));
+  }, /*#__PURE__*/React__default.createElement(SearchPanel, {
+    products: products
+  })));
 }
-function SearchPanel() {
+function SearchPanel({
+  products
+}) {
+  var _a, _b;
+  const listboxId = useInstanceId("product-search-results");
   const [term, setTerm] = React__default.useState("");
+  const [selectedSlug, setSelectedSlug] = React__default.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__default.useMemo(() => {
+    var _a;
+    return (_a = groups === null || groups === void 0 ? void 0 : groups.flatMap(group => group.results)) !== null && _a !== void 0 ? _a : [];
+  }, [groups]);
+  const navigation = useResultNavigation(results);
+  const {
+    highlightedIndex
+  } = navigation;
+  const inputRef = React__default.useRef(null);
+  const [announceHighlight, setAnnounceHighlight] = React__default.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__default.useEffect(() => {
+    if (hasTerm) saveLastProduct(product.slug);
+  }, [hasTerm, product.slug]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input", {
+    "aria-activedescendant": highlightedIndex === null ? undefined : resultId(listboxId, highlightedIndex),
+    "aria-autocomplete": "list",
+    "aria-controls": results.length > 0 ? listboxId : undefined,
+    "aria-expanded": results.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__default.createElement(SearchResults, {
+  }), /*#__PURE__*/React__default.createElement(ProductTabs, {
+    onKeyDown: handleTabsKeyDown,
+    onSelect: setSelectedSlug,
+    products: products,
+    selected: product
+  }, /*#__PURE__*/React__default.createElement(SearchResults, {
+    highlightedIndex: highlightedIndex,
+    id: listboxId,
+    label: `${product.appName} results`,
+    onHighlight: navigation.highlightIndex,
+    search: search,
     term: term
+  })), /*#__PURE__*/React__default.createElement("div", {
+    "aria-live": "polite",
+    className: styles$c.visuallyHidden
+  }, announceHighlight ? (_b = navigation.highlighted) === null || _b === void 0 ? void 0 : _b.attributes.title : null), /*#__PURE__*/React__default.createElement(KeyboardHints, {
+    copied: navigation.copied
   }));
 }
+function KeyboardHints({
+  copied
+}) {
+  const command = commandKeyLabel();
+  return /*#__PURE__*/React__default.createElement("p", null, "\u2191\u2193 Select \u00B7 \u21B5 Open \u00B7 ", command, "\u21B5 Open in new tab \u00B7 ", command, "C", " ", /*#__PURE__*/React__default.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 parseValue(element) {
+  const datatype = element.getAttribute("datatype");
+  switch (datatype) {
+    case "boolean":
+      return element.content === "true" || element.content === "1";
+    default:
+      return element.content;
+  }
+}
+function getAllPcoMeta() {
+  const elements = document.head.querySelectorAll(`meta[property^="pco:"]`);
+  const meta = {};
+  elements.forEach(e => {
+    const property = e.getAttribute("property");
+    meta[property.substring("pco:".length)] = parseValue(e);
+  });
+  return meta;
+}
+// usePcoMeta only reads each tag's content. Recently Visited also needs the
+// pco:recently_visitable tag's `metadata` attribute, which can change while
+// the content stays the same, so it is tracked in its own store.
+function getRecentlyVisitableMetadata() {
+  var _a, _b;
+  return (_b = (_a = document.head.querySelector(`meta[property="pco:recently_visitable"]`)) === null || _a === void 0 ? void 0 : _a.getAttribute("metadata")) !== null && _b !== void 0 ? _b : null;
+}
+const store = createStore(getAllPcoMeta());
+const recentlyVisitableMetadataStore = createStore({
+  metadata: getRecentlyVisitableMetadata()
+});
+function sync() {
+  const nextState = getAllPcoMeta();
+  if (!shallowCompare(store.getState(), nextState)) store.setState(nextState);
+  const metadata = getRecentlyVisitableMetadata();
+  if (recentlyVisitableMetadataStore.getState().metadata !== metadata) {
+    recentlyVisitableMetadataStore.setState({
+      metadata
+    });
+  }
+}
+const observer = new MutationObserver(sync);
+let hasTriggeredObserve = false;
+function observe() {
+  if (hasTriggeredObserve) return;
+  hasTriggeredObserve = true;
+  // The module-load snapshot above can predate meta tags that appear later
+  // in <head> (e.g. pco:resource, yielded right before </head>) if this
+  // module's own script tag isn't deferred and runs mid-parse. Those tags
+  // never mutate afterward, so the observer alone would never catch them.
+  // Re-read once now, since observe() is only called once a consumer is
+  // actually mounting, which is always after the document has fully parsed.
+  sync();
+  observer.observe(document.head, {
+    attributes: true,
+    childList: true,
+    subtree: true
+  });
+}
+function usePcoMeta() {
+  observe();
+  return useSyncExternalStore(store.subscribe, () => store.getState());
+}
+function useRecentlyVisitableMetadata() {
+  observe();
+  return useSyncExternalStore(recentlyVisitableMetadataStore.subscribe, () => recentlyVisitableMetadataStore.getState().metadata);
+}
+
+const MAX_ENTRIES = 20;
+const FORMAT_VERSION = 1;
+const MAX_TEXT_LENGTH = 200;
+const PRODUCTS = ["accounts", "calendar", "check-ins", "giving", "groups", "home", "login", "people", "publishing", "registrations", "services"];
+function isId(value) {
+  return value !== "" && Array.from(value).every(character => character >= "0" && character <= "9");
+}
+// A PCRL looks like `<product>/v2/<resource_type>/<id>`.
+function isPcrl(value) {
+  const segments = value.split("/");
+  return segments.length === 4 && PRODUCTS.some(product => product === segments[0]) && isId(segments[3]);
+}
+function isNonBlankString(value) {
+  return typeof value === "string" && value.trim() !== "";
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function entryKey(entry) {
+  if (entry.type === "resource") {
+    return `resource:${entry.pcrl}`;
+  } else {
+    return `page:${entry.product}:${entry.path}`;
+  }
+}
+function isEntry(value) {
+  if (!isRecord(value)) {
+    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";
+  } else {
+    return false;
+  }
+}
+// Cuts on code points so a surrogate pair is never split.
+function clampText(value) {
+  return Array.from(value).slice(0, MAX_TEXT_LENGTH).join("");
+}
+function clampEntry(entry) {
+  if (entry.type === "resource") {
+    return entry;
+  } else {
+    return {
+      ...entry,
+      details: clampText(entry.details),
+      title: clampText(entry.title)
+    };
+  }
+}
+// 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) {
+  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);
+  } else {
+    return [];
+  }
+}
+function addVisit(entries, visit) {
+  const key = entryKey(visit);
+  return [clampEntry(visit), ...entries.filter(entry => entryKey(entry) !== key)].slice(0, MAX_ENTRIES);
+}
+function serializeRecentlyVisited(entries, personId) {
+  return JSON.stringify({
+    entries,
+    person: personId,
+    v: FORMAT_VERSION
+  });
+}
+
+// The product 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() {
+  var _a;
+  return (_a = PRODUCTS.find(product => new URL(pcoUrl$2(product)).hostname === window.location.hostname)) !== null && _a !== void 0 ? _a : null;
+}
+function detailsFromMetadata(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 : "";
+  } catch {
+    return "";
+  }
+}
+// pco:resource is the more specific signal, so it wins when both tags are
+// present. A resource that isn't a PCRL is ignored rather than recorded.
+function visitFromPage({
+  metadata,
+  resource,
+  title
+}) {
+  const product = currentProduct();
+  if (resource && isPcrl(resource)) {
+    return {
+      pcrl: resource,
+      type: "resource"
+    };
+  } else if (title && title.trim() !== "" && product) {
+    return {
+      details: detailsFromMetadata(metadata),
+      path: window.location.pathname,
+      product,
+      title,
+      type: "page"
+    };
+  } else {
+    return null;
+  }
+}
+// The entry Recently Visited would record for the current page, or null when
+// the page isn't eligible. Shared by the recorder and the debug panel so the
+// panel always shows what actually gets stored.
+function useCurrentVisit() {
+  const {
+    recently_visitable: title,
+    resource
+  } = usePcoMeta();
+  const metadata = useRecentlyVisitableMetadata();
+  return useMemo(() => visitFromPage({
+    metadata,
+    resource,
+    title
+  }), [metadata, resource, title]);
+}
+// Products hand the person's ID to AppsProvider, not to the topbar itself,
+// and several pass it as a number.
+function useCurrentPersonId() {
+  const {
+    userId
+  } = useStore();
+  return userId == null ? undefined : String(userId);
+}
+
+// Per-origin localStorage is a stopgap: each product keeps its own list until
+// PCA-409 moves this to storage shared across product subdomains. Only this
+// file should need to change when it does.
+function storageKey({
+  env,
+  personId
+}) {
+  return `topbar.recently_visited.${env}.${personId}`;
+}
+// localStorage doesn't notify the tab that wrote it, so readers in this tab
+// learn about new visits from this counter instead.
+const changes = createStore({
+  version: 0
+});
+function readRecentlyVisited(scope) {
+  try {
+    return parseRecentlyVisited(localStorage.getItem(storageKey(scope)), scope.personId);
+  } catch {
+    return [];
+  }
+}
+function recordVisit(visit, scope) {
+  if (isEntry(visit)) {
+    try {
+      localStorage.setItem(storageKey(scope), serializeRecentlyVisited(addVisit(readRecentlyVisited(scope), visit), scope.personId));
+      changes.setState({
+        version: changes.getState().version + 1
+      });
+    } catch {
+      // Storage can be full or blocked; recents are disposable.
+    }
+  }
+}
+
+function useRecordRecentlyVisited({
+  enabled,
+  env
+}) {
+  const personId = useCurrentPersonId();
+  const visit = useCurrentVisit();
+  useEffect(() => {
+    if (enabled && personId && visit) {
+      recordVisit(visit, {
+        env,
+        personId
+      });
+    }
+  }, [enabled, env, personId, visit]);
+}
 
 function StyledRoot({
   children,
@@ -3628,6 +4368,10 @@ const NotSmallTopbar = ({
   const updateStore = useUpdateStore();
   const useRedesignedSwitcher = useFeature(FEATURE_FLAGS.APP_SWITCHER_REDESIGN, props.features);
   const productSearchEnabled = useFeature(FEATURE_FLAGS.PRODUCT_SEARCH, props.features);
+  useRecordRecentlyVisited({
+    enabled: productSearchEnabled,
+    env: props.env
+  });
   React__default.useEffect(() => {
     const handleToolbarClick = event => {
       const target = event.target;
@@ -3668,7 +4412,9 @@ const NotSmallTopbar = ({
     style: {
       margin: "auto"
     }
-  }), !notificationsEnabled && notifications(), productSearchEnabled ? (/*#__PURE__*/React__default.createElement(ProductSearch, null)) : search({
+  }), !notificationsEnabled && notifications(), productSearchEnabled ? (/*#__PURE__*/React__default.createElement(ProductSearch, {
+    apps: props.apps
+  })) : search({
     hideRoutes: () => setRoutesVisible(false),
     showRoutes: () => setRoutesVisible(true)
   }), /*#__PURE__*/React__default.createElement(UserMenuTrigger, {
@@ -31744,6 +32490,11 @@ const SmallTopbar = ({
   const [routesMenuVisible, setRoutesMenuVisible] = React__default.useState(false);
   const [productSwitcherVisible, setProductSwitcherVisible] = React__default.useState(false);
   const useRedesignedSwitcher = useFeature(FEATURE_FLAGS.APP_SWITCHER_REDESIGN, props.features);
+  const productSearchEnabled = useFeature(FEATURE_FLAGS.PRODUCT_SEARCH, props.features);
+  useRecordRecentlyVisited({
+    enabled: productSearchEnabled,
+    env: props.env
+  });
   const activeRoute = props.routes.filter(({
     props: {
       active
@@ -31952,55 +32703,6 @@ const topbarTheme = {
   id: "topbar"
 };
 
-function parseValue(element) {
-  const datatype = element.getAttribute("datatype");
-  switch (datatype) {
-    case "boolean":
-      return element.content === "true" || element.content === "1";
-    default:
-      return element.content;
-  }
-}
-function getAllPcoMeta() {
-  const elements = document.head.querySelectorAll(`meta[property^="pco:"]`);
-  const meta = {};
-  elements.forEach(e => {
-    const property = e.getAttribute("property");
-    meta[property.substring("pco:".length)] = parseValue(e);
-  });
-  return meta;
-}
-const store = createStore(getAllPcoMeta());
-const observer = new MutationObserver(() => {
-  const prevState = store.getState();
-  const nextState = getAllPcoMeta();
-  if (!shallowCompare(prevState, nextState)) store.setState(nextState);
-});
-let hasTriggeredObserve = false;
-function observe() {
-  if (hasTriggeredObserve) return;
-  hasTriggeredObserve = true;
-  // The module-load snapshot above can predate meta tags that appear later
-  // in <head> (e.g. pco:resource, yielded right before </head>) if this
-  // module's own script tag isn't deferred and runs mid-parse. Those tags
-  // never mutate afterward, so the observer alone would never catch them.
-  // Re-read once now, since observe() is only called once a consumer is
-  // actually mounting, which is always after the document has fully parsed.
-  const freshState = getAllPcoMeta();
-  if (!shallowCompare(store.getState(), freshState)) {
-    store.setState(freshState);
-  }
-  observer.observe(document.head, {
-    attributes: true,
-    childList: true,
-    subtree: true
-  });
-}
-function usePcoMeta() {
-  observe();
-  return useSyncExternalStore(store.subscribe, () => store.getState());
-}
-
 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"};
 
 function isPresent(value) {