@planningcenter/topbar 12.3.0 → 12.4.0-qa-958.1

package/dist/topbar.js

@@ -7,11 +7,12 @@ var general = require('@planningcenter/icons/paths/general');
 var Jolt = require('@planningcenter/jolt-client');
 var shim = require('use-sync-external-store/shim');
 require('react/jsx-runtime');
+var toolbar = require('@planningcenter/icons/paths/toolbar');
+var logomarks = require('@planningcenter/icons/paths/logomark');
 var tapestryReact = require('@planningcenter/tapestry-react');
 var addOns = require('@planningcenter/add-ons');
 var churchCenter = require('@planningcenter/icons/paths/church-center');
 var people = require('@planningcenter/icons/paths/people');
-var toolbar = require('@planningcenter/icons/paths/toolbar');
 var reactCalendly = require('react-calendly');
 var algoliasearch = require('algoliasearch');
 var reactInstantsearchCore = require('react-instantsearch-core');
@@ -37,11 +38,12 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var general__namespace = /*#__PURE__*/_interopNamespaceDefault(general);
+var toolbar__namespace = /*#__PURE__*/_interopNamespaceDefault(toolbar);
+var logomarks__namespace = /*#__PURE__*/_interopNamespaceDefault(logomarks);
 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$s = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
 
 const AccessibilityToolbar = ({
   children
@@ -53,7 +55,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$s["accessibility-toolbar"]
   }, /*#__PURE__*/React.createElement(tapestry.Link, {
     href: "#main-content",
     kind: "primary",
@@ -180,12 +182,14 @@ function inferRailsCsrfToken() {
 }
 function apiRequest(fetch, url, {
   method = "GET",
-  data = null
+  data = null,
+  headers = {}
 } = {}) {
   const options = {
     headers: {
       Accept: "application/json",
-      "Content-Type": "application/json"
+      "Content-Type": "application/json",
+      ...headers
     },
     method,
     redirect: "follow"
@@ -370,11 +374,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$r = {"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$r["announcement-icon"],
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
@@ -499,7 +503,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$r["announcement"], styles$r[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
       "data-announcement-variant": variant !== null && variant !== void 0 ? variant : "platform",
       style: isPromo ? {
         backgroundImage: promoBackgroundUrl,
@@ -508,7 +512,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$r["announcement-content"],
       style: style,
       ...platformProps
     }));
@@ -557,7 +561,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$r.dismiss, isPromo && styles$r["dismiss--promo"]),
     ...props
   }, /*#__PURE__*/React.createElement(X, {
     fill: isPromo ? "currentColor" : "white",
@@ -637,9 +641,9 @@ class StyledAnnouncement extends React.Component {
       ...platformProps
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$k["announcement"]
+      className: styles$r["announcement"]
     }, /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
-      className: styles$k["announcement-content"],
+      className: styles$r["announcement-content"],
       style: style,
       ...platformProps
     }));
@@ -650,7 +654,7 @@ function StyledDismissButton({
 }) {
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$k.dismiss,
+    className: styles$r.dismiss,
     ...props
   }, /*#__PURE__*/React.createElement(X, {
     fill: "white",
@@ -805,7 +809,7 @@ function useMediaQuery(query) {
   return matches;
 }
 
-const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1);
+const capitalize$1 = s => s.charAt(0).toUpperCase() + s.slice(1);
 const RESOLVED_COLOR_MODE_ATTRIBUTE = "data-resolved-color-mode";
 function resolveColorMode(colorMode) {
   if (colorMode === "system") {
@@ -1772,7 +1776,7 @@ function MonoAppIcon({
   })) : (/*#__PURE__*/React.createElement("div", null, "appName not supported")));
 }
 
-var styles$j = {"icon-slot":"icon-slot-m3ZIk","name":"name-UNqbW"};
+var styles$q = {"icon-slot":"icon-slot-m3ZIk","name":"name-UNqbW"};
 
 const AppRow = ({
   appName,
@@ -1781,24 +1785,24 @@ const AppRow = ({
 }) => {
   if (appName === "Accounts") {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: styles$j["icon-slot"]
+      className: styles$q["icon-slot"]
     }, /*#__PURE__*/React.createElement(MonoAppIcon, {
       appName: "Accounts",
       colors: colors,
       size: iconSize
     })), /*#__PURE__*/React.createElement("span", {
-      className: styles$j.name
+      className: styles$q.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$q.name
   }, appName));
 };
 
-var styles$i = {"button":"button-XMbeQ","label":"label-884of","chevron":"chevron-RRg9k"};
+var styles$p = {"button":"button-XMbeQ","label":"label-884of","chevron":"chevron-RRg9k"};
 
 const AppsButton = /*#__PURE__*/React.forwardRef(({
   appName,
@@ -1810,10 +1814,10 @@ const AppsButton = /*#__PURE__*/React.forwardRef(({
     ...restProps,
     ref: ref,
     "aria-label": `App switcher: ${appName}`,
-    className: styles$i.button,
+    className: styles$p.button,
     kind: "neutral-inline",
     label: /*#__PURE__*/React.createElement("span", {
-      className: styles$i.label
+      className: styles$p.label
     }, isAccounts ? "Account settings" : appName),
     prefix: isAccounts ? (/*#__PURE__*/React.createElement(MonoAppIcon, {
       appName: "Accounts",
@@ -1824,13 +1828,13 @@ const AppsButton = /*#__PURE__*/React.forwardRef(({
       size: 22
     })),
     suffix: /*#__PURE__*/React.createElement(DisclosureChevronIcon, {
-      className: `${styles$i.chevron} symbol`
+      className: `${styles$p.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$o = {"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,
@@ -1851,8 +1855,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$o.link, {
+        [styles$o.current]: isCurrent
       }),
       "data-pendo": `app-switcher--change-app--${name}`,
       "data-turbolinks": false,
@@ -1868,22 +1872,22 @@ const AppsMenu = ({
     colors: colors
   })), /*#__PURE__*/React.createElement(tapestry.PopoverContent, {
     "aria-label": "Switch app",
-    className: styles$h["popover-content"],
+    className: styles$o["popover-content"],
     placement: "bottom start"
   }, /*#__PURE__*/React.createElement("nav", {
-    className: styles$h.nav,
+    className: styles$o.nav,
     "data-pendo": "app-switcher"
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$h.list,
+    className: styles$o.list,
     role: "list"
   }, homeProduct && renderProductLink(homeProduct.name), restProducts.map(({
     name
   }) => renderProductLink(name)), accountsProduct && (/*#__PURE__*/React.createElement("li", {
-    className: styles$h["accounts-item"]
+    className: styles$o["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$o.link, styles$o["accounts-link"]),
     "data-pendo": "app-switcher--change-app--Accounts",
     "data-turbolinks": false,
     href: pcoUrl$1(env)("accounts") + getAppsSwitchProductPath(accountsProduct.name)
@@ -2091,7 +2095,7 @@ function MonoAppName({
   })) : (/*#__PURE__*/React.createElement("div", null, "appName not supported"));
 }
 
-var styles$g = {"unbutton":"unbutton-lEbTR"};
+var styles$n = {"unbutton":"unbutton-lEbTR"};
 
 function Unbutton({
   className,
@@ -2100,7 +2104,7 @@ function Unbutton({
   ...nativeProps
 }) {
   return /*#__PURE__*/React.createElement("button", {
-    className: classnames(styles$g.unbutton, className),
+    className: classnames(styles$n.unbutton, className),
     style: {
       ...style
     },
@@ -2109,7 +2113,7 @@ function Unbutton({
   });
 }
 
-var styles$f = {"button":"button-wsipc","button-accounts":"button-accounts-zQmBM","chevron":"chevron-obyBF","is-expanded":"is-expanded-PoCQ9"};
+var styles$m = {"button":"button-wsipc","button-accounts":"button-accounts-zQmBM","chevron":"chevron-obyBF","is-expanded":"is-expanded-PoCQ9"};
 
 const LegacyAppsButton = ({
   appName,
@@ -2124,8 +2128,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$m.button, {
+      [styles$m["is-expanded"]]: expanded
     }),
     type: "button",
     style: style,
@@ -2134,7 +2138,7 @@ const LegacyAppsButton = ({
     appName: "Accounts",
     colors: colors
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$f["button-accounts"]
+    className: styles$m["button-accounts"]
   }, "Account settings"))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorAppIcon, {
     appName: appName.replace(/[\s-]/, "")
   }), /*#__PURE__*/React.createElement(MonoAppName, {
@@ -2142,7 +2146,7 @@ const LegacyAppsButton = ({
     key: "mono-app-name",
     size: 24
   }))), /*#__PURE__*/React.createElement(DisclosureChevronIcon, {
-    className: styles$f.chevron,
+    className: styles$m.chevron,
     key: "disclosure-chevron-icon"
   }));
 };
@@ -2275,7 +2279,7 @@ class Outsider extends React.Component {
   }
 }
 
-var styles$e = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
+var styles$l = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
 
 const Popup = ({
   className,
@@ -2283,8 +2287,8 @@ const Popup = ({
   isVisible,
   ...nativeProps
 }) => (/*#__PURE__*/React.createElement(C, {
-  className: classnames(styles$e.popup, {
-    [styles$e["is-visible"]]: isVisible
+  className: classnames(styles$l.popup, {
+    [styles$l["is-visible"]]: isVisible
   }, className),
   ...nativeProps
 }));
@@ -2292,11 +2296,11 @@ const Popup = ({
 const PopupRoot = ({
   ...nativeProps
 }) => (/*#__PURE__*/React.createElement("div", {
-  className: styles$e["popup-root"],
+  className: styles$l["popup-root"],
   ...nativeProps
 }));
 
-var styles$d = {"popup":"popup-bVhSa"};
+var styles$k = {"popup":"popup-bVhSa"};
 
 const LegacyAppsMenu = ({
   appName,
@@ -2334,7 +2338,7 @@ const LegacyAppsMenu = ({
     cleanup: !visible,
     component: Outsider,
     onOutsideClick: toggle,
-    className: styles$d.popup,
+    className: styles$k.popup,
     isVisible: visible
   }, /*#__PURE__*/React.createElement("menu", {
     ref: menuRef,
@@ -3244,29 +3248,121 @@ 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 STORAGE_KEY = "topbar.product_search.last_product";
-function readLastProduct() {
-  try {
-    return localStorage.getItem(STORAGE_KEY);
-  } catch {
-    return null;
-  }
+const collections = {
+  general: general__namespace,
+  toolbar: toolbar__namespace
+};
+const paths = collections;
+function Icon({
+  name,
+  size = 16,
+  style,
+  theme,
+  title,
+  ...props
+}) {
+  const [collection, symbol] = name.split(".");
+  return /*#__PURE__*/React.createElement("svg", {
+    "aria-hidden": title ? undefined : true,
+    fill: "currentColor",
+    height: size,
+    role: title ? "img" : undefined,
+    style: {
+      color: theme && `var(${theme})`,
+      flexShrink: 0,
+      ...style
+    },
+    viewBox: "0 0 16 16",
+    width: size,
+    ...props
+  }, title && /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("path", {
+    d: paths[collection][symbol]
+  }));
 }
-function saveLastProduct(slug) {
-  try {
-    localStorage.setItem(STORAGE_KEY, slug);
-  } catch {
-    // Storage can be full or blocked; search still works without it.
+
+const SEARCHABLE_PRODUCTS = [{
+  appName: "Calendar",
+  slug: "calendar"
+}, {
+  appName: "Check-Ins",
+  slug: "check-ins"
+}, {
+  appName: "Giving",
+  slug: "giving"
+}, {
+  appName: "Groups",
+  slug: "groups"
+}, {
+  appName: "People",
+  slug: "people"
+}, {
+  appName: "Publishing",
+  slug: "publishing"
+}, {
+  appName: "Registrations",
+  slug: "registrations"
+}, {
+  appName: "Services",
+  slug: "services"
+}];
+const KEYBOARD_SHORTCUTS = {
+  copyLink: {
+    key: "c",
+    label: "Copy link",
+    modifierKey: true
+  },
+  openInNewTab: {
+    label: "Open in new tab"},
+  openSearch: {
+    key: "k",
+    label: "Open search",
+    modifierKey: true
+  },
+  select: {
+    label: "Select",
+    modifierKey: false,
+    next: "ArrowDown",
+    previous: "ArrowUp"
   }
-}
+};
 
-var styles$c = {"visuallyHidden":"visuallyHidden-C28ju"};
+const isMac = () => /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+const hasCommandKey = event => isMac() ? event.metaKey : event.ctrlKey;
+const matchesShortcut = (shortcut, event) => event.key.toLowerCase() === shortcut.key && !event.altKey && !event.shiftKey && hasCommandKey(event) === shortcut.modifierKey;
+const isSearchShortcut = event => matchesShortcut(KEYBOARD_SHORTCUTS.openSearch, 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 => matchesShortcut(KEYBOARD_SHORTCUTS.copyLink, 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 => ({
+  [KEYBOARD_SHORTCUTS.select.next]: 1,
+  [KEYBOARD_SHORTCUTS.select.previous]: -1
+})[key];
+const horizontalStep = key => ({
+  ArrowLeft: -1,
+  ArrowRight: 1
+})[key];
 
-var styles$b = {"tab":"tab-lQLDx"};
+var styles$j = {"searchButton":"searchButton-fYa5-","mobile":"mobile-ksZyA"};
+
+function SearchButton({
+  mobile = false,
+  onClick
+}) {
+  return /*#__PURE__*/React.createElement("button", {
+    "aria-keyshortcuts": mobile ? undefined : `${isMac() ? "Meta" : "Control"}+${KEYBOARD_SHORTCUTS.openSearch.key.toUpperCase()} /`,
+    "aria-label": "Search",
+    className: classnames(styles$j.searchButton, {
+      [styles$j.mobile]: mobile
+    }),
+    onClick: onClick,
+    type: "button"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "general.search",
+    size: mobile ? 18 : 14
+  }));
+}
 
 // useId isn't available on React 17, which our peer range still supports.
 let instanceCount$1 = 0;
@@ -3275,173 +3371,33 @@ 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();
-    } 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$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));
-}
-
-var styles$a = {"result":"result-WCnxr"};
-
-function SearchResult({
-  highlighted,
-  id,
-  onHighlight,
-  result
-}) {
-  const {
-    metadata,
-    title,
-    url
-  } = result.attributes;
-  const ref = React.useRef(null);
-  React.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.createElement("a", {
-    "aria-selected": highlighted,
-    className: styles$a.result,
-    href: url,
-    id: id,
-    onMouseMove: onHighlight,
-    ref: ref,
-    role: "option",
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement("div", null, title), /*#__PURE__*/React.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 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.createElement(ResultGroups, {
-          busy: true,
-          groups: search.groups,
-          ...navigation
-        });
-      }
-      return /*#__PURE__*/React.createElement("p", {
-        role: "status"
-      }, "Searching\u2026");
-    case "error":
-      return /*#__PURE__*/React.createElement("p", {
-        role: "alert"
-      }, "Search isn\u2019t working right now. Try again.");
-    case "done":
-      if (search.groups.length === 0) {
-        return /*#__PURE__*/React.createElement("p", {
-          role: "status"
-        }, "No results for \u201C", term.trim(), "\u201D");
-      }
-      return /*#__PURE__*/React.createElement(ResultGroups, {
-        groups: search.groups,
-        ...navigation
-      });
+// 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 {};
   }
 }
-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),
-        result: result
-      });
-    }));
-  }));
-}
 
 const CACHE_TTL_MS = 60000;
 const MAX_ENTRIES$1 = 50;
@@ -3458,7 +3414,9 @@ function cachedRequest(url) {
   }
 }
 function fetchIntoCache(url) {
-  const promise = apiRequest(defaultFetch, url).then(({
+  const promise = apiRequest(defaultFetch, url, {
+    headers: apiVersionHeaders(url)
+  }).then(({
     json,
     ok
   }) => {
@@ -3514,44 +3472,52 @@ function useCachedRequest(url) {
     };
   }
 }
-
-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"
+// 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",
@@ -3582,6 +3548,53 @@ function groupByType({
   };
   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();
@@ -3590,29 +3603,489 @@ function useSettledProduct(product, status) {
   }, [product, status]);
   return settledProduct;
 }
-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;
+
+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 shim.useSyncExternalStore(store.subscribe, () => store.getState());
+}
+function useRecentlyVisitableMetadata() {
+  observe();
+  return shim.useSyncExternalStore(recentlyVisitableMetadataStore.subscribe, () => recentlyVisitableMetadataStore.getState().metadata);
 }
 
-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.useState({
-    index: 0,
-    results
+// 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$1 = ["accounts", "calendar", "check-ins", "giving", "groups", "home", "login", "people", "publishing", "registrations", "services"];
+// Login has no pages worth returning to.
+const APPS = PRODUCTS$1.filter(product => product !== "login");
+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$1.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.app}:${entry.path.split("?")[0]}`;
+  }
+}
+function isEntry(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 isApp(value.app) && isPath(value.path) && isNonBlankString(value.title) && isPageMetadata(value.metadata);
+  } 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 clampMetadata({
+  details,
+  type
+}) {
+  return {
+    ...(details && {
+      details: clampText(details)
+    }),
+    ...(type && {
+      type: clampText(type)
+    })
+  };
+}
+function clampVisit(visit) {
+  if (visit.type === "resource") {
+    return visit;
+  } else {
+    return {
+      ...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) {
+  let parsed = null;
+  try {
+    parsed = JSON.parse(value !== null && value !== void 0 ? value : "null");
+  } catch {
+    parsed = null;
+  }
+  if (Array.isArray(parsed)) {
+    return parsed.filter(isEntry);
+  } else {
+    return [];
+  }
+}
+function addVisit(entries, entry) {
+  const key = entryKey(entry);
+  return [entry, ...entries.filter(existing => entryKey(existing) !== key)].slice(0, MAX_ENTRIES);
+}
+
+// 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 app rebuilds a working link.
+function currentApp() {
+  var _a;
+  return (_a = APPS.find(app => new URL(pcoUrl$1.pcoUrl(app)).hostname === window.location.hostname)) !== null && _a !== void 0 ? _a : null;
+}
+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,
+      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 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
+// present. A resource that isn't a PCRL is ignored rather than recorded.
+function visitFromPage({
+  metadata,
+  resource,
+  title
+}) {
+  const app = currentApp();
+  if (resource && isPcrl(resource)) {
+    return {
+      pcrl: resource,
+      type: "resource"
+    };
+  } else if (title && title.trim() !== "" && app) {
+    const pageMetadata = metadataFromPage(metadata);
+    return {
+      app,
+      ...(pageMetadata && {
+        metadata: pageMetadata
+      }),
+      path: pathFromLocation(window.location),
+      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 React.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)));
+  } catch {
+    return [];
+  }
+}
+function recordVisit(visit, scope) {
+  const entry = toEntry(visit, new Date());
+  if (isEntry(entry)) {
+    try {
+      localStorage.setItem(storageKey(scope), JSON.stringify(addVisit(readRecentlyVisited(scope), entry)));
+      changes.setState({
+        version: changes.getState().version + 1
+      });
+    } catch {
+      // Storage can be full or blocked; recents are disposable.
+    }
+  }
+}
+function useRecentlyVisited({
+  env,
+  personId
+}) {
+  const version = shim.useSyncExternalStore(changes.subscribe, () => changes.getState().version);
+  // `version` isn't read, but listing it re-reads storage after each visit.
+  return React.useMemo(() => personId ? readRecentlyVisited({
+    env,
+    personId
+  }) : [], [env, personId, version]);
+}
+
+const pcoUrl = pcoUrl$1;
+
+// Resolves resource entries with one pcrl_lookups request per product.
+// pcrl_lookups reports forbidden and deleted resources the same way, so both
+// become `unresolved`, as does every entry in a batch whose request failed.
+function useHydratedRecentlyVisited(entries, env) {
+  const batches = React.useMemo(() => batchByProduct(entries), [entries]);
+  const urls = React.useMemo(() => batches.map(([product, pcrls]) => pcrlLookupsUrl(product, pcrls)), [batches]);
+  const requests = useCachedRequests(urls);
+  const lookups = new Map();
+  batches.forEach(([, pcrls], index) => {
+    const request = requests[index];
+    for (const pcrl of pcrls) lookups.set(pcrl, lookupFor(pcrl, request));
   });
-  const highlightedIndex = highlight.results === results ? highlight.index : 0;
-  const highlighted = results[highlightedIndex];
+  return entries.map(entry => {
+    var _a;
+    if (entry.type === "page") {
+      return {
+        entry,
+        status: "page",
+        url: pageUrl(entry, env)
+      };
+    } else {
+      const lookup = (_a = lookups.get(entry.pcrl)) !== null && _a !== void 0 ? _a : {
+        status: "unresolved"
+      };
+      if (lookup.status === "resolved") {
+        return {
+          ...lookup,
+          entry,
+          url: lookup.result.attributes.url
+        };
+      } else {
+        return {
+          entry,
+          status: lookup.status
+        };
+      }
+    }
+  });
+}
+function lookupFor(pcrl, request) {
+  if (request.status === "done") {
+    const result = request.data.data.find(({
+      attributes
+    }) => attributes.pcrl === pcrl);
+    return result ? {
+      result,
+      status: "resolved"
+    } : {
+      status: "unresolved"
+    };
+  } else if (request.status === "error") {
+    return {
+      status: "unresolved"
+    };
+  } else {
+    return {
+      status: "loading"
+    };
+  }
+}
+const RECENTLY_VISITED_PAGE_SIZE = 10;
+// A PCRL can only be looked up through its own product's API, which may not be
+// the product it was visited in. Each page of entries is batched on its own,
+// so loading the next page leaves earlier pages' URLs, and so their cache
+// keys, alone. Sorting keeps them stable as a page reorders.
+function batchByProduct(entries) {
+  var _a;
+  const batches = [];
+  for (let start = 0; start < entries.length; start += RECENTLY_VISITED_PAGE_SIZE) {
+    const page = new Map();
+    for (const entry of entries.slice(start, start + RECENTLY_VISITED_PAGE_SIZE)) {
+      if (entry.type === "resource") {
+        const [product] = entry.pcrl.split("/");
+        page.set(product, [...((_a = page.get(product)) !== null && _a !== void 0 ? _a : []), entry.pcrl]);
+      }
+    }
+    for (const [product, pcrls] of page) {
+      batches.push([product, [...pcrls].sort()]);
+    }
+  }
+  return batches;
+}
+function pcrlLookupsUrl(product, pcrls) {
+  const params = new URLSearchParams({
+    "where[pcrl]": pcrls.join(",")
+  });
+  return `${window.location.origin}/~api/${product}/v2/pcrl_lookups?${params}`;
+}
+// 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 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) {
@@ -3622,201 +4095,721 @@ function useResultNavigation(results) {
       return undefined;
     }
   }, [copiedUrl]);
-  const highlightIndex = React.useCallback(index => setHighlight(current => current.results === results && current.index === index ? current : {
-    index,
-    results
-  }), [results]);
+  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.
+// Disabled, nothing is highlighted and the keys and pointer leave it alone.
+function useResultNavigation(items, list, enabled = true) {
+  const [highlight, setHighlight] = React.useState({
+    index: 0,
+    list
+  });
+  const highlightedIndex = highlight.list === list ? highlight.index : 0;
+  const highlighted = enabled ? items[highlightedIndex] : undefined;
+  const {
+    copiedUrl,
+    copy
+  } = useCopyLink();
+  const highlightIndex = React.useCallback(index => {
+    if (!enabled) return;
+    setHighlight(current => current.list === list && current.index === index ? current : {
+      index,
+      list
+    });
+  }, [enabled, list]);
   const handleKeyDown = event => {
+    if (!enabled) return;
     const step = verticalStep(event.key);
-    if (step && results.length > 0) {
+    if (step && items.length > 0) {
       event.preventDefault();
-      highlightIndex((highlightedIndex + step + results.length) % results.length);
+      highlightIndex((highlightedIndex + step + items.length) % items.length);
     } else if (event.key === "Enter" && highlighted && !event.nativeEvent.isComposing) {
       event.preventDefault();
-      open(highlighted.attributes.url, {
+      open(highlighted.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));
+      copy(highlighted.url);
     }
   };
   return {
-    copied: copiedUrl !== null && copiedUrl === (highlighted === null || highlighted === void 0 ? void 0 : highlighted.attributes.url),
+    copied: copiedUrl !== null && copiedUrl === (highlighted === null || highlighted === void 0 ? void 0 : highlighted.url),
     handleKeyDown,
     highlightIndex,
     highlighted,
     highlightedIndex: highlighted ? highlightedIndex : null
   };
 }
-function open(url, {
-  newTab
+
+var styles$i = {"modal":"modal-NR3TO","mobile":"mobile-4e5rC","header":"header-c3SLe","visuallyHidden":"visuallyHidden-C28ju","panel":"panel-HlF7S"};
+
+function groupSections(groups = []) {
+  return groups.map(({
+    results,
+    type
+  }) => ({
+    heading: type,
+    items: results.map(resultItem),
+    key: type
+  }));
+}
+function resultItem({
+  attributes,
+  id
 }) {
-  if (newTab) {
-    window.open(url, "_blank", "noopener");
+  return {
+    category: attributes.category,
+    imageUrl: attributes.image_url,
+    key: id,
+    product: attributes.product,
+    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 {
+      category: "generic",
+      imageUrl: null,
+      product: app,
+      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 {
-    window.location.assign(url);
+    const {
+      category,
+      image_url,
+      metadata,
+      product,
+      title,
+      type
+    } = visit.result.attributes;
+    return {
+      category,
+      imageUrl: image_url,
+      product,
+      subtitle: subtitle(productName(product), type, summarize(metadata)),
+      title,
+      url: visit.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 : "") !== "";
+// 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 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)
+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$h = {"container":"container-YDdM1","hint":"hint-017Rd","keycap":"keycap-ENJM2","copied":"copied-DUFa1"};
+
+const SYMBOLS = {
+  command: {
+    label: "⌘",
+    paths: ["M7 9a2 2 0 1 1 2 -2v10a2 2 0 1 1 -2 -2h10a2 2 0 1 1 -2 2v-10a2 2 0 1 1 2 2h-10"]
+  },
+  down: {
+    label: "↓",
+    paths: ["M12 6l0 12", "M16 14l-4 4", "M8 14l4 4"]
+  },
+  return: {
+    label: "↵",
+    paths: ["M18 6v6a3 3 0 0 1 -3 3h-10l4 -4m0 8l-4 -4"]
+  },
+  up: {
+    label: "↑",
+    paths: ["M12 6l0 12", "M16 10l-4 -4", "M8 10l4 -4"]
+  }
 };
-function fetchMe(product, fields) {
-  const params = new URLSearchParams({
-    "fields[Person]": fields
+function Keycap(props) {
+  return /*#__PURE__*/React.createElement("kbd", {
+    className: styles$h.keycap
+  }, "symbol" in props ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
+    "aria-hidden": true,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    viewBox: "0 0 24 24"
+  }, SYMBOLS[props.symbol].paths.map(d => (/*#__PURE__*/React.createElement("path", {
+    d: d,
+    key: d
+  })))), /*#__PURE__*/React.createElement("span", {
+    className: styles$i.visuallyHidden
+  }, SYMBOLS[props.symbol].label))) : props.label);
+}
+function CommandKey() {
+  return isMac() ? /*#__PURE__*/React.createElement(Keycap, {
+    symbol: "command"
+  }) : /*#__PURE__*/React.createElement(Keycap, {
+    label: "Ctrl"
   });
-  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;
+}
+function EnterKey() {
+  return isMac() ? /*#__PURE__*/React.createElement(Keycap, {
+    symbol: "return"
+  }) : /*#__PURE__*/React.createElement(Keycap, {
+    label: "Enter"
   });
 }
-// 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;
+const {
+  copyLink,
+  openInNewTab,
+  openSearch,
+  select
+} = KEYBOARD_SHORTCUTS;
+function KeyboardHints({
+  copied
+}) {
+  return /*#__PURE__*/React.createElement("ul", {
+    "aria-label": "Keyboard shortcuts",
+    className: styles$h.container
+  }, /*#__PURE__*/React.createElement("li", {
+    className: styles$h.hint
+  }, /*#__PURE__*/React.createElement(tapestry.Flex, {
+    gap: 0.5
+  }, select.modifierKey, /*#__PURE__*/React.createElement(Keycap, {
+    symbol: "up"
+  }), /*#__PURE__*/React.createElement(Keycap, {
+    symbol: "down"
+  })), select.label), /*#__PURE__*/React.createElement("li", {
+    className: styles$h.hint
+  }, /*#__PURE__*/React.createElement(tapestry.Flex, {
+    gap: 0.5
+  }, /*#__PURE__*/React.createElement(CommandKey, null), /*#__PURE__*/React.createElement(EnterKey, null)), openInNewTab.label), /*#__PURE__*/React.createElement("li", {
+    className: classnames(styles$h.hint, copied && styles$h.copied)
+  }, /*#__PURE__*/React.createElement(tapestry.Flex, {
+    gap: 0.5
+  }, /*#__PURE__*/React.createElement(CommandKey, null), /*#__PURE__*/React.createElement(Keycap, {
+    label: copyLink.key.toUpperCase()
+  })), /*#__PURE__*/React.createElement("span", {
+    role: "status"
+  }, copied ? "Copied!" : copyLink.label)), /*#__PURE__*/React.createElement("li", {
+    className: styles$h.hint
+  }, /*#__PURE__*/React.createElement(tapestry.Flex, {
+    gap: 0.5
+  }, /*#__PURE__*/React.createElement(CommandKey, null), /*#__PURE__*/React.createElement(Keycap, {
+    label: openSearch.key.toUpperCase()
+  })), openSearch.label));
+}
+
+var styles$g = {"icon":"icon-XKLvN","squircle":"squircle-JCHr6"};
+
+const PRODUCTS = {
+  accounts: {
+    gradient: "--t-fill-color-product-accounts-gradient-brand",
+    path: logomarks__namespace.accounts
+  },
+  api: {
+    gradient: "--t-fill-color-product-api-gradient-brand",
+    path: logomarks__namespace.api
+  },
+  calendar: {
+    gradient: "--t-fill-color-product-calendar-gradient-brand",
+    path: logomarks__namespace.calendar
+  },
+  "check-ins": {
+    gradient: "--t-fill-color-product-checkins-gradient-brand",
+    path: logomarks__namespace.checkIns
+  },
+  "church-center": {
+    gradient: "--t-fill-color-product-cc-gradient-brand",
+    path: logomarks__namespace.churchCenter
+  },
+  giving: {
+    gradient: "--t-fill-color-product-giving-gradient-brand",
+    path: logomarks__namespace.giving
+  },
+  groups: {
+    gradient: "--t-fill-color-product-groups-gradient-brand",
+    path: logomarks__namespace.groups
+  },
+  home: {
+    gradient: "--t-fill-color-product-home-gradient-brand",
+    path: logomarks__namespace.home
+  },
+  "music-stand": {
+    gradient: "--t-fill-color-product-musicstand-gradient-brand",
+    path: logomarks__namespace.musicStand
+  },
+  people: {
+    gradient: "--t-fill-color-product-people-gradient-brand",
+    path: logomarks__namespace.people
+  },
+  publishing: {
+    gradient: "--t-fill-color-product-publishing-gradient-brand",
+    path: logomarks__namespace.publishing
+  },
+  registrations: {
+    gradient: "--t-fill-color-product-registrations-gradient-brand",
+    path: logomarks__namespace.registrations
+  },
+  services: {
+    gradient: "--t-fill-color-product-services-gradient-brand",
+    path: logomarks__namespace.services
   }
+};
+const isProductIconSlug = slug => Object.prototype.hasOwnProperty.call(PRODUCTS, slug);
+const maskFor = path => `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="${path}"/></svg>`)}")`;
+function ProductIcon({
+  size = 16,
+  slug
+}) {
+  const {
+    gradient,
+    path
+  } = PRODUCTS[slug];
+  const mask = maskFor(path);
+  return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": true,
+    className: styles$g.icon,
+    style: {
+      height: size,
+      width: size
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles$g.squircle,
+    style: {
+      WebkitMaskImage: mask,
+      background: `var(${gradient})`,
+      maskImage: mask
+    }
+  }));
 }
-function useSearchableProducts(apps) {
-  // Keyed by name because providers hand over a fresh `apps` array on renders
-  // where nothing changed.
-  const accessibleKey = inSwitcherOrder(apps).map(({
+
+var styles$f = {"picker":"picker-iuzzj","option":"option--7LXg"};
+
+// Phones have no room for a tab per product, so they pick from a dropdown.
+// Complex mode renders each option's logomark, in the list and the trigger.
+function ProductSelect({
+  children,
+  onSelect,
+  products,
+  selected
+}) {
+  const options = products.map(({
+    appName,
     slug
-  }) => slug).join(",");
-  const [settled, setSettled] = React.useState();
-  React.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])
-        });
+  }) => ({
+    label: (/*#__PURE__*/React.createElement("span", {
+      className: styles$f.option
+    }, /*#__PURE__*/React.createElement(ProductIcon, {
+      slug: slug
+    }), appName)),
+    textValue: appName,
+    value: slug
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles$f.picker
+  }, /*#__PURE__*/React.createElement(tapestry.Select, {
+    "aria-label": "Product",
+    complex: true,
+    onChange: event => onSelect(event.target.value),
+    options: options,
+    value: selected.slug
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$i.panel
+  }, children));
+}
+
+var styles$e = {"tablist":"tablist-7ASvc","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",
+    className: styles$e.tablist,
+    onKeyDown: handleKeyDown,
+    role: "tablist"
+  }, products.map(product => (/*#__PURE__*/React.createElement("button", {
+    "aria-controls": `${id}-panel`,
+    "aria-selected": product === selected,
+    className: styles$e.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"
+  }, /*#__PURE__*/React.createElement(ProductIcon, {
+    slug: product.slug
+  }), product === selected ? product.appName : (/*#__PURE__*/React.createElement("span", {
+    className: styles$i.visuallyHidden
+  }, product.appName)))))), /*#__PURE__*/React.createElement("div", {
+    "aria-labelledby": tabId(selected.slug),
+    className: styles$i.panel,
+    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();
     });
-    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"
-    };
-  }
+    if (ref.current) observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [onVisible]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  });
 }
-function inSwitcherOrder(apps) {
-  return groupApps(apps).restProducts.flatMap(app => SEARCHABLE_PRODUCTS.filter(product => product.appName === app.name));
+
+const resultId = (listboxId, index) => `${listboxId}-result-${index}`;
+
+var styles$d = {"result":"result-Thq2C","title":"title-KYUEn","subtitle":"subtitle-R2haq","image":"image-KVDor","avatar":"avatar-6Gh62","photo":"photo-FZR3Q","badge":"badge-trUKt"};
+
+function SearchResult({
+  category,
+  highlighted,
+  id,
+  imageUrl,
+  onHighlight,
+  product,
+  subtitle,
+  title,
+  url
+}) {
+  const ref = React.useRef(null);
+  // A hovered result is already under the pointer, and scrolling it clear of
+  // the panel's scroll padding would slide the list out from under the mouse.
+  const highlightedByPointer = React.useRef(false);
+  React.useEffect(() => {
+    var _a;
+    if (!highlighted) return;
+    if (highlightedByPointer.current) {
+      highlightedByPointer.current = false;
+    } else {
+      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+        block: "nearest"
+      });
+    }
+  }, [highlighted]);
+  const highlightFromPointer = () => {
+    if (highlighted) return;
+    highlightedByPointer.current = true;
+    onHighlight();
+  };
+  // 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.createElement("a", {
+    "aria-selected": highlighted,
+    className: styles$d.result,
+    href: url,
+    id: id,
+    onMouseMove: highlightFromPointer,
+    ref: ref,
+    role: "option",
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(ResultImage, {
+    category: category,
+    imageUrl: imageUrl,
+    product: product
+  }), /*#__PURE__*/React.createElement("span", {
+    className: styles$d.title
+  }, title), /*#__PURE__*/React.createElement("span", {
+    className: styles$d.subtitle
+  }, subtitle));
+}
+// A person's photo or the result's own image, badged with its product, or
+// just the product's logomark when there's no image.
+function ResultImage({
+  category,
+  imageUrl,
+  product
+}) {
+  const icon = size => isProductIconSlug(product) ? (/*#__PURE__*/React.createElement(ProductIcon, {
+    size: size,
+    slug: product
+  })) : null;
+  return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": true,
+    className: styles$d.image
+  }, imageUrl ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    className: category === "profile" ? styles$d.avatar : styles$d.photo,
+    loading: "lazy",
+    src: imageUrl
+  }), /*#__PURE__*/React.createElement("span", {
+    className: styles$d.badge
+  }, icon(16)))) : icon("100%"));
 }
 
-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
+var styles$c = {"message":"message-1-PP-","heading":"heading-LioUF"};
+
+// 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
 }) {
-  const searchable = useSearchableProducts(apps);
-  if (searchable.status === "done" && searchable.products.length > 0) {
-    return /*#__PURE__*/React.createElement(SearchButtonAndDialog, {
-      products: searchable.products
+  let index = 0;
+  const renderItem = item => {
+    const itemIndex = index++;
+    return /*#__PURE__*/React.createElement(SearchResult, {
+      category: item.category,
+      highlighted: itemIndex === highlightedIndex,
+      id: resultId(id, itemIndex),
+      imageUrl: item.imageUrl,
+      key: item.key,
+      onHighlight: () => onHighlight(itemIndex),
+      product: item.product,
+      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", {
+      className: styles$c.heading,
+      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", {
+      className: styles$c.message
+    }, "Pages you visit will show up here.");
   } else {
-    return null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: styles$c.heading,
+      id: headingId
+    }, "Recently visited"), /*#__PURE__*/React.createElement(ResultListbox, {
+      labelledBy: headingId,
+      sections: [{
+        items,
+        key: "recents"
+      }],
+      ...navigation
+    }), hasMore && /*#__PURE__*/React.createElement(EndOfResultsObserver, {
+      key: count,
+      onVisible: showMore
+    }));
   }
 }
-function SearchButtonAndDialog({
-  products
+
+var styles$b = {"header":"header-sXEyG","bordered":"bordered-mWkCy","input":"input-YQkTC","clearButton":"clearButton-9Yh9w"};
+
+// A combobox: focus stays here while aria-activedescendant points screen
+// readers at the highlighted result in the listbox it controls.
+function SearchInput({
+  bordered = false,
+  expanded,
+  highlightedIndex,
+  inputRef,
+  listboxId,
+  onChange,
+  onFocus,
+  onKeyDown,
+  value
 }) {
-  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"} /`,
+  return /*#__PURE__*/React.createElement("label", {
+    className: classnames(styles$b.header, {
+      [styles$b.bordered]: bordered
+    })
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "general.search",
+    size: 20,
+    theme: "--t-icon-color-dim"
+  }), /*#__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",
-    onClick: () => setOpen(true),
+    autoFocus: true,
+    className: styles$b.input,
+    onChange: event => onChange(event.target.value),
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    placeholder: "Search",
+    ref: inputRef,
+    role: "combobox",
+    type: "search",
+    value: value
+  }), value !== "" && (/*#__PURE__*/React.createElement("button", {
+    "aria-label": "Clear search",
+    className: styles$b.clearButton,
+    onClick: () => {
+      var _a;
+      onChange("");
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    tabIndex: -1,
     type: "button"
-  }, /*#__PURE__*/React.createElement(Spyglass, {
-    fill: "currentColor"
-  })), /*#__PURE__*/React.createElement(tapestry.Modal, {
-    "aria-label": "Search",
-    dismissible: true,
-    onClose: () => setOpen(false),
-    open: open
-  }, /*#__PURE__*/React.createElement(SearchPanel, {
-    products: products
-  })));
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "general.smallX"
+  }))));
+}
+
+function SearchResults({
+  label,
+  sections,
+  status,
+  term,
+  ...navigation
+}) {
+  switch (status) {
+    case "idle":
+      return null;
+    case "loading":
+      if (sections.length > 0) {
+        return /*#__PURE__*/React.createElement(ResultListbox, {
+          busy: true,
+          label: label,
+          sections: sections,
+          ...navigation
+        });
+      }
+      return /*#__PURE__*/React.createElement("p", {
+        className: styles$c.message,
+        role: "status"
+      }, "Searching\u2026");
+    case "error":
+      return /*#__PURE__*/React.createElement("p", {
+        className: styles$c.message,
+        role: "alert"
+      }, "Search isn\u2019t working right now. Try again.");
+    case "done":
+      if (sections.length === 0) {
+        return /*#__PURE__*/React.createElement("p", {
+          className: styles$c.message,
+          role: "status"
+        }, "No results for \u201C", term.trim(), "\u201D");
+      }
+      return /*#__PURE__*/React.createElement(ResultListbox, {
+        busy: false,
+        label: label,
+        sections: sections,
+        ...navigation
+      });
+  }
 }
+
+// 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({
+  mobile = false,
+  env,
   products
 }) {
   var _a, _b;
@@ -3829,11 +4822,17 @@ function SearchPanel({
   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 navigation = useResultNavigation(results);
+  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;
+  // Touch-only devices open results by tapping them, with no highlight to
+  // arrow through. A narrow window with a keyboard and mouse keeps both.
+  const touchOnly = useMediaQuery("(hover: none) and (pointer: coarse)");
+  const navigation = useResultNavigation(items, hasTerm ? sections : RECENTS, !touchOnly);
   const {
     highlightedIndex
   } = navigation;
@@ -3856,296 +4855,273 @@ function SearchPanel({
   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": 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.createElement(ProductTabs, {
-    onKeyDown: handleTabsKeyDown,
-    onSelect: setSelectedSlug,
-    products: products,
-    selected: product
-  }, /*#__PURE__*/React.createElement(SearchResults, {
+  const results = hasTerm ? (/*#__PURE__*/React.createElement(SearchResults, {
     highlightedIndex: highlightedIndex,
     id: listboxId,
     label: `${product.appName} results`,
     onHighlight: navigation.highlightIndex,
-    search: search,
+    sections: sections,
+    status: search.status,
     term: term
-  })), /*#__PURE__*/React.createElement("div", {
+  })) : (/*#__PURE__*/React.createElement(RecentlyVisited, {
+    highlightedIndex: highlightedIndex,
+    id: listboxId,
+    items: recentItems,
+    onHighlight: navigation.highlightIndex,
+    ...recents
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchInput, {
+    bordered: mobile,
+    expanded: items.length > 0,
+    highlightedIndex: highlightedIndex,
+    inputRef: inputRef,
+    listboxId: listboxId,
+    onChange: setTerm,
+    onFocus: () => setAnnounceHighlight(false),
+    onKeyDown: navigation.handleKeyDown,
+    value: term
+  }), mobile ? (/*#__PURE__*/React.createElement(ProductSelect, {
+    onSelect: setSelectedSlug,
+    products: products,
+    selected: product
+  }, results)) : (/*#__PURE__*/React.createElement(ProductTabs, {
+    onKeyDown: handleTabsKeyDown,
+    onSelect: setSelectedSlug,
+    products: products,
+    selected: product
+  }, results)), /*#__PURE__*/React.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.createElement(KeyboardHints, {
+    className: styles$i.visuallyHidden
+  }, announceHighlight ? (_b = navigation.highlighted) === null || _b === void 0 ? void 0 : _b.title : null), mobile ? 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 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;
+// 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));
 }
-// 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;
+// 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;
 }
-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
-    });
+function hasBackdrop(element, width, height) {
+  let current = element;
+  while (current && !isBackdrop(current, width, height)) {
+    current = current.parentElement;
   }
+  return current !== null;
 }
-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 shim.useSyncExternalStore(store.subscribe, () => store.getState());
+// 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 useRecentlyVisitableMetadata() {
-  observe();
-  return shim.useSyncExternalStore(recentlyVisitableMetadataStore.subscribe, () => recentlyVisitableMetadataStore.getState().metadata);
+// 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(() => {
+    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 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("");
+const PERMISSION_CHECKS = {
+  "check-ins": () => fetchMe("check-ins", "permission").then(({
+    permission
+  }) => permission !== null),
+  giving: personId => {
+    if (personId === undefined) {
+      return Promise.reject(new Error("No person to check Giving access for"));
+    } else {
+      return fetchAttributes(`giving/v2/person_permissions/${personId}`, {
+        "fields[PersonPermissions]": "can_search"
+      }).then(({
+        can_search
+      }) => can_search);
+    }
+  },
+  people: () => fetchMe("people", "people_permissions,site_administrator").then(({
+    people_permissions,
+    site_administrator
+  }) => site_administrator || people_permissions !== null),
+  registrations: () => fetchMe("registrations", "can_search").then(({
+    can_search
+  }) => can_search),
+  services: () => fetchMe("services", "can_search").then(({
+    can_search
+  }) => can_search)
+};
+function fetchMe(product, fields) {
+  return fetchAttributes(`${product}/v2/me`, {
+    "fields[Person]": fields
+  });
 }
-function clampEntry(entry) {
-  if (entry.type === "resource") {
-    return entry;
-  } else {
-    return {
-      ...entry,
-      details: clampText(entry.details),
-      title: clampText(entry.title)
-    };
-  }
+function fetchAttributes(path, params) {
+  const url = `${window.location.origin}/~api/${path}?${new URLSearchParams(params)}`;
+  return apiRequest(defaultFetch, url, {
+    headers: apiVersionHeaders(url)
+  }).then(({
+    json,
+    ok
+  }) => {
+    if (!ok || json === null) throw new Error("Permission check failed");
+    return json.data.attributes;
+  });
 }
-// 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);
+// 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, personId) {
+  const check = PERMISSION_CHECKS[slug];
+  const cached = permissionCache.get(slug);
+  if (!check) {
+    return Promise.resolve(true);
+  } else if (cached) {
+    return cached;
   } else {
-    return [];
+    const promise = check(personId).catch(() => {
+      permissionCache.delete(slug);
+      return false;
+    });
+    permissionCache.set(slug, promise);
+    return promise;
   }
 }
-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$1.pcoUrl(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"
+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 personId = useCurrentPersonId();
+  const [settled, setSettled] = React.useState();
+  React.useEffect(() => {
+    let current = true;
+    const accessible = accessibleKey.split(",").flatMap(slug => SEARCHABLE_PRODUCTS.filter(product => product.slug === slug));
+    Promise.all(accessible.map(({
+      slug
+    }) => canSearch(slug, personId))).then(allowed => {
+      if (current) {
+        setSettled({
+          accessibleKey,
+          personId,
+          products: accessible.filter((_, index) => allowed[index])
+        });
+      }
+    });
+    return () => {
+      current = false;
     };
-  } else if (title && title.trim() !== "" && product) {
+  }, [accessibleKey, personId]);
+  if ((settled === null || settled === void 0 ? void 0 : settled.accessibleKey) === accessibleKey && settled.personId === personId) {
     return {
-      details: detailsFromMetadata(metadata),
-      path: window.location.pathname,
-      product,
-      title,
-      type: "page"
+      products: settled.products,
+      status: "done"
     };
   } else {
-    return null;
+    return {
+      status: "loading"
+    };
   }
 }
-// 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 React.useMemo(() => visitFromPage({
-    metadata,
-    resource,
-    title
-  }), [metadata, resource, title]);
+function inSwitcherOrder(apps) {
+  return groupApps(apps).restProducts.flatMap(app => SEARCHABLE_PRODUCTS.filter(product => product.appName === app.name));
 }
-// 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);
+
+/**
+ * Writes the height of the visible part of the page to the parent of `ref`'s
+ * element as `--visual-viewport-height`. It shrinks when an on-screen keyboard
+ * opens; `100dvh` doesn't, since mobile Safari draws the keyboard over it.
+ */
+function useVisualViewportHeight(ref, enabled) {
+  React.useEffect(() => {
+    var _a;
+    const viewport = window.visualViewport;
+    const parent = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+    if (!enabled || !viewport || !parent) return undefined;
+    const update = () => parent.style.setProperty("--visual-viewport-height", `${viewport.height}px`);
+    update();
+    viewport.addEventListener("resize", update);
+    return () => {
+      viewport.removeEventListener("resize", update);
+      parent.style.removeProperty("--visual-viewport-height");
+    };
+  }, [enabled, ref]);
 }
 
-// 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
+function ProductSearch({
+  apps,
+  mobile = false,
+  env
 }) {
-  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.
-    }
-  }
+  const searchable = useSearchableProducts(apps);
+  const [open, setOpen] = React.useState(false);
+  const modalRef = React.useRef(null);
+  // Sizes Tapestry's modal frame, the dialog's parent, to fit above the keyboard.
+  useVisualViewportHeight(modalRef, mobile && open);
+  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, {
+    mobile: mobile,
+    onClick: () => setOpen(true)
+  }), /*#__PURE__*/React.createElement(tapestry.Modal, {
+    "aria-label": "Search",
+    className: classnames(styles$i.modal, {
+      [styles$i.mobile]: mobile
+    }),
+    dismissible: true,
+    onClose: () => setOpen(false),
+    open: open,
+    ref: modalRef,
+    size: "lg"
+  }, mobile && /*#__PURE__*/React.createElement(tapestry.ModalHeader, {
+    className: styles$i.header,
+    title: "Search"
+  }), /*#__PURE__*/React.createElement(SearchPanel, {
+    mobile: mobile,
+    env: env,
+    products: searchable.products
+  })));
 }
 
 function useRecordRecentlyVisited({
@@ -4190,9 +5166,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,
@@ -4211,7 +5187,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: {
@@ -4355,11 +5331,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",
@@ -4371,7 +5347,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)));
 };
 
@@ -4431,13 +5407,14 @@ 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"
     }
   }), !notificationsEnabled && notifications(), productSearchEnabled ? (/*#__PURE__*/React.createElement(ProductSearch, {
-    apps: props.apps
+    apps: props.apps,
+    env: props.env
   })) : search({
     hideRoutes: () => setRoutesVisible(false),
     showRoutes: () => setRoutesVisible(true)
@@ -4471,12 +5448,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,
@@ -4486,7 +5463,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
@@ -32245,7 +33222,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,
@@ -32273,8 +33250,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,
@@ -32286,48 +33263,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)
@@ -32350,14 +33327,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","actions":"actions-INQ7-","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)
@@ -32380,7 +33357,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,
@@ -32441,7 +33418,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-]/, "")
@@ -32449,7 +33426,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"
@@ -32466,37 +33443,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
     }))))))))
@@ -32560,19 +33537,25 @@ 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);
       setRoutesMenuVisible(visible => !visible);
     } : null
-  }, /*#__PURE__*/React.createElement(CurrentRouteComponent, null, capitalize(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement(CurrentRouteComponent, null, capitalize$1(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React.createElement("div", {
+    className: styles$6["actions"]
+  }, productSearchEnabled && (/*#__PURE__*/React.createElement(ProductSearch, {
+    apps: props.apps,
+    mobile: true,
+    env: props.env
+  })), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$5["profile-button"],
+    className: styles$6["profile-button"],
     onClick: () => {
       var _a, _b;
       props.requestConnectedPeopleFetch();
@@ -32581,14 +33564,14 @@ const SmallTopbar = ({
   }, /*#__PURE__*/React.createElement(Avatar, {
     env: props.env,
     url: props.userAvatarPath
-  })));
+  }))));
 };
 const SmallRoute = ({
   active,
   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
 }));
 
@@ -32727,7 +33710,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() !== "";
@@ -32756,15 +33739,31 @@ 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,
+// which keeps the panel away from regular users on staging.
 function DebugPcoResource({
   env
+}) {
+  const {
+    "staff-access-level": staffAccessLevel
+  } = usePcoMeta();
+  if (isPresent(staffAccessLevel)) {
+    return /*#__PURE__*/React.createElement(DebugPanel, {
+      env: env
+    });
+  } else {
+    return null;
+  }
+}
+function DebugPanel({
+  env
 }) {
   const {
     recently_visitable: recentlyVisitable,
@@ -32773,12 +33772,17 @@ function DebugPcoResource({
   const [lookup, setLookup] = React.useState({
     status: "idle"
   });
-  const hasResource = isPresent(resource);
+  const visit = useCurrentVisit();
+  const personId = useCurrentPersonId();
+  const recentlyVisited = useRecentlyVisited({
+    env,
+    personId
+  });
+  const pcrl = (visit === null || visit === void 0 ? void 0 : visit.type) === "resource" ? visit.pcrl : null;
   const hasRecentlyVisitable = isPresent(recentlyVisitable);
+  const hasInvalidResource = isPresent(resource) && !isPcrl(resource);
   React.useEffect(() => {
-    // pco:resource is the more specific signal, so it always wins when both
-    // tags are present.
-    const url = hasResource ? pcrlLookupUrl(resource, env) : null;
+    const url = pcrl ? pcrlLookupUrl(pcrl, env) : null;
     if (!url) {
       setLookup({
         status: "idle"
@@ -32810,37 +33814,45 @@ function DebugPcoResource({
     return () => {
       cancelled = true;
     };
-  }, [resource, env, hasResource]);
+  }, [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)
   }), /*#__PURE__*/React.createElement(Field, {
     label: "pco:recently_visitable",
     value: describeTag("recently_visitable", recentlyVisitable)
-  }), !hasResource && !hasRecentlyVisitable && (/*#__PURE__*/React.createElement("p", {
-    className: styles$4["debug-pco-resource-note"]
-  }, "This page is not eligible for Recently Visited")), hasResource && hasRecentlyVisitable && (/*#__PURE__*/React.createElement("p", {
-    className: styles$4["debug-pco-resource-note"]
-  }, "Both tags are present \u2014 pco:resource takes precedence for the Recently Visited entry.")), hasResource && lookup.status === "loading" && (/*#__PURE__*/React.createElement("p", {
-    className: styles$4["debug-pco-resource-note"]
-  }, "Looking up resource\u2026")), hasResource && lookup.status === "error" && (/*#__PURE__*/React.createElement("p", {
-    className: styles$4["debug-pco-resource-note"]
-  }, lookup.message)), hasResource && lookup.status === "loaded" && (/*#__PURE__*/React.createElement("pre", {
-    className: styles$4["debug-pco-resource-json"]
-  }, JSON.stringify(lookup.json, null, 2))), !hasResource && hasRecentlyVisitable && (/*#__PURE__*/React.createElement("p", {
-    className: styles$4["debug-pco-resource-note"]
-  }, "Recently Visited title: ", recentlyVisitable)));
-}
-
-var styles$3 = {"drawer-wrap":"drawer-wrap-J0rSL","is-visible":"is-visible-KTME8","drawer":"drawer-j7f4l"};
+  }), hasInvalidResource && (/*#__PURE__*/React.createElement("p", {
+    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$5["debug-pco-resource-note"]
+  }, "This page is not eligible for Recently Visited")), pcrl && hasRecentlyVisitable && (/*#__PURE__*/React.createElement("p", {
+    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$5["debug-pco-resource-note"]
+  }, "Looking up resource\u2026")), pcrl && lookup.status === "error" && (/*#__PURE__*/React.createElement("p", {
+    className: styles$5["debug-pco-resource-note"]
+  }, lookup.message)), pcrl && lookup.status === "loaded" && (/*#__PURE__*/React.createElement("pre", {
+    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$5["debug-pco-resource-note"]
+  }, "Recently Visited title: ", visit.title)), /*#__PURE__*/React.createElement("span", {
+    className: styles$5["debug-pco-resource-field-label"]
+  }, "Recently Visited"), personId ? (/*#__PURE__*/React.createElement("pre", {
+    className: styles$5["debug-pco-resource-json"]
+  }, JSON.stringify(recentlyVisited, null, 2))) : (/*#__PURE__*/React.createElement("p", {
+    className: styles$5["debug-pco-resource-note"]
+  }, "No current person, so nothing is recorded.")));
+}
+
+var styles$4 = {"drawer-wrap":"drawer-wrap-J0rSL","is-visible":"is-visible-KTME8","drawer":"drawer-j7f4l"};
 
 function Drawer({
   children,
@@ -32848,7 +33860,7 @@ function Drawer({
 }) {
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: styles$3["drawer"]
+    className: styles$4["drawer"]
   }, children);
 }
 function DrawerWrap({
@@ -32858,7 +33870,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);
 }
@@ -33042,15 +34054,18 @@ const SwitchView = ({
   }));
 };
 
-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",
   label: "Light",
   value: "light"
 }, {
+  icon: "toolbar.moon",
   label: "Dark",
   value: "dark"
 }, {
+  icon: "toolbar.display",
   label: "System",
   value: "system"
 }];
@@ -33062,14 +34077,15 @@ 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(({
-    value,
-    label
+    icon,
+    label,
+    value
   }) => (/*#__PURE__*/React.createElement("label", {
     key: value
   }, /*#__PURE__*/React.createElement("input", {
@@ -33086,8 +34102,9 @@ function ColorModeSwitcher() {
       document.documentElement.setAttribute(RESOLVED_COLOR_MODE_ATTRIBUTE, resolveColorMode(colorMode));
       updateColorMode(colorMode);
     }
-  }), /*#__PURE__*/React.createElement(ColorModeIcon, {
-    mode: value
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 15
   }), label)))));
 }
 function updateColorMode(mode) {
@@ -33102,28 +34119,6 @@ function updateColorMode(mode) {
     method: "POST"
   });
 }
-const COLOR_MODE_ICON_PATHS = {
-  dark: "M12.66667,9.07579 C11.90047,9.42229 11.04997,9.61514 10.15457,9.61514 C6.78392,9.61514 4.05151,6.88275 4.05151,3.51215 C4.05151,2.61663 4.24438,1.76615 4.59086,1 C2.47336,1.95762 1,4.08858 1,6.56366 C1,9.93423 3.73241,12.66663 7.103,12.66663 C9.57807,12.66663 11.70907,11.19333 12.66667,9.07579 Z",
-  light: "M6.83333,1 L6.83333,2.16667 M6.83333,11.50003 L6.83333,12.66663 M2.16667,6.83334 L1,6.83334 M3.51657,3.51657 L2.69161,2.69161 M10.1501,3.51657 L10.9751,2.69161 M3.51657,10.15253 L2.69161,10.97743 M10.1501,10.15253 L10.9751,10.97743 M12.6667,6.83334 L11.5,6.83334 M9.75,6.83334 C9.75,8.44415 8.44415,9.75 6.83333,9.75 C5.2225,9.75 3.91667,8.44415 3.91667,6.83334 C3.91667,5.22251 5.2225,3.91667 6.83333,3.91667 C8.44415,3.91667 9.75,5.22251 9.75,6.83334 Z",
-  system: "M4.75,12.50003 L9.41667,12.50003 M7.08334,10.16667 L7.08334,12.50003 M4.05,10.16667 L10.11665,10.16667 C11.09675,10.16667 11.58675,10.16667 11.96115,9.97592 C12.29045,9.80815 12.55815,9.54046 12.72595,9.21117 C12.91665,8.83678 12.91665,8.34678 12.91665,7.36667 L12.91665,4.8 C12.91665,3.81991 12.91665,3.32986 12.72595,2.95552 C12.55815,2.62623 12.29045,2.35852 11.96115,2.19074 C11.58675,2 11.09675,2 10.11665,2 L4.05,2 C3.06991,2 2.57986,2 2.20552,2.19074 C1.87623,2.35852 1.60852,2.62623 1.44074,2.95552 C1.25,3.32986 1.25,3.81991 1.25,4.8 L1.25,7.36667 C1.25,8.34678 1.25,8.83678 1.44074,9.21117 C1.60852,9.54046 1.87623,9.80815 2.20552,9.97592 C2.57986,10.16667 3.06991,10.16667 4.05,10.16667 Z"
-};
-function ColorModeIcon({
-  mode
-}) {
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 14 14",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: COLOR_MODE_ICON_PATHS[mode],
-    strokeWidth: "1.5",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-}
 
 const requestClearConnectedPeopleCache = () => remove();
 function UserProfile({
@@ -33186,10 +34181,10 @@ function UserProfile({
     alignment: "center",
     spacing: 0.5,
     width: "100%"
-  }, /*#__PURE__*/React.createElement(tapestryReact.Icon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     name: mfaConfigured ? "general.lock" : "general.unlock",
-    size: "sm",
-    color: mfaConfigured ? "var(--t-icon-color-status-success)" : "var(--t-icon-color-status-error)"
+    size: 12,
+    theme: mfaConfigured ? "--t-icon-color-status-success" : "--t-icon-color-status-error"
   }), /*#__PURE__*/React.createElement(tapestryReact.Text, {
     size: 4,
     weight: 400,
@@ -33237,9 +34232,10 @@ function UserProfile({
   }, /*#__PURE__*/React.createElement(tapestryReact.Text, {
     color: "var(--text-color-default-secondary)",
     size: 3
-  }, "Log out"), /*#__PURE__*/React.createElement(tapestryReact.Icon, {
+  }, "Log out"), /*#__PURE__*/React.createElement(Icon, {
     name: "general.intoBox",
-    fill: "var(--t-icon-color-secondary)"
+    size: 14,
+    theme: "--t-icon-color-secondary"
   })))), env !== "production" && /*#__PURE__*/React.createElement(DebugPcoResource, {
     env: env
   }), hasConnectedPeople && (/*#__PURE__*/React.createElement(tapestryReact.StackView, {
@@ -33301,26 +34297,42 @@ function UserProfile({
 
 var ActionType;
 (function (ActionType) {
+  ActionType["clearPending"] = "clearPending";
   ActionType["close"] = "close";
   ActionType["mount"] = "mount";
   ActionType["open"] = "open";
+  ActionType["setPending"] = "setPending";
   ActionType["unmount"] = "unmount";
 })(ActionType || (ActionType = {}));
 const initialState = {
   currentContent: null,
-  open: false
+  open: false,
+  pending: null
 };
 const reducer = (state, action) => {
+  var _a, _b;
   switch (action.type) {
     case ActionType.mount:
       return {
         ...state,
-        currentContent: action.payload.content
+        currentContent: action.payload.content,
+        pending: ((_a = state.pending) === null || _a === void 0 ? void 0 : _a.tool) === ((_b = action.payload.content) === null || _b === void 0 ? void 0 : _b.name) ? state.pending : null
       };
     case ActionType.unmount:
       return {
         ...state,
-        currentContent: null
+        currentContent: null,
+        pending: null
+      };
+    case ActionType.setPending:
+      return {
+        ...state,
+        pending: action.payload
+      };
+    case ActionType.clearPending:
+      return {
+        ...state,
+        pending: null
       };
     case ActionType.open:
       return {
@@ -33339,13 +34351,181 @@ 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"};
 
-const pcoUrl = pcoUrl$1;
+// 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.
+const iframeSrc = () => `${window.location.protocol}//pco.test/iframe`;
+const STAFF_PINK = "var(--t-fill-color-product-staff)";
+// The pco.test domain is only ever served by a local PCO Box, so the tool
+// stays hidden in staging and production — and on Topbar's own dev server,
+// which runs on localhost and has no pco.test to frame.
+function isPcoTestHost() {
+  const {
+    hostname
+  } = window.location;
+  return hostname === "pco.test" || hostname.endsWith(".pco.test");
+}
+// Flattened from the source artwork's two outline paths — its gradients,
+// filters and clip paths carry nothing at icon size. Those paths are authored
+// on a 128px canvas, hence the transform: it fits the pair into the same ~24px
+// optical box the sibling toolbar icons occupy. Filled explicitly rather than
+// with `currentColor` so the mark stays staff pink instead of inheriting the
+// toolbar's text color and its hover/active states.
+const WRENCH = "m22.42 17.2 12.96 12.95-2.5 8.78-8.78 2.5-12.96-12.96-5.86 5.86 14.89 21.46 17.56-3.34 61.63 65.62c9.44 9.51 22.17-4.75 13.34-12.87L46.85 42.92l4.01-17.76-22.14-14.27-6.3 6.31zm81.06 91.97c1.68-1.68 4.4-1.68 6.08 0 1.68 1.68 1.68 4.4 0 6.08-1.68 1.67-4.4 1.67-6.08 0-1.68-1.68-1.68-4.4 0-6.08z";
+const SCREWDRIVER = "m55.8 12 .76.16c8.84-2.94 28.68 8.64 24.26 18.96-1.12 1.62-.93 4.5.42 6.31L56.43 62.25c-1.39-1.39-4.48-1.36-5.9 0L9.5 101.63c-3.74 3.59-.8 6.64.78 8.25l7.36 7.36c1.61 1.6 5.86 3.76 8.88.56l38.72-40.81c1.35-1.42 1.36-4.47 0-5.87 0 0 .01-.02 0-.02l24.91-24.9c2.63 2.37 5.11 2.57 7.47 1.93 4.55-1.25 7.09 3.21 9.81 6.46l-1.23 1.21c-1.82 1.84-1.65 4.94.39 6.98s5.15 2.21 6.97.39l8.14-8.13c1.82-1.84 1.65-4.94-.4-6.97-1.84-1.85-4.51-2.09-6.37-.77-5.58-6.26-2.65-7.2-10.01-15.35L91.13 17.86C81.2 8.12 68.3 8.13 55.8 12z";
+function ToolsIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    "aria-hidden": "true",
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: STAFF_PINK,
+    transform: "translate(2.92 2.66) scale(.204)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: WRENCH
+  }), /*#__PURE__*/React.createElement("path", {
+    d: SCREWDRIVER
+  })));
+}
+// A cross-origin frame's own history object is unreachable (touching it throws
+// a SecurityError), but the frame's navigations do land in the top-level joint
+// session history, so the *parent's* back/forward traverse them while leaving
+// the host page in place. Counting frame loads tracks how deep we are, which is
+// what keeps a click on Back from stepping past the frame's first page and
+// navigating the host app instead. Loads we caused are attributed to the
+// traversal that requested them rather than counted as new navigations.
+function useFrameHistory() {
+  const [steps, setSteps] = React.useState({
+    back: 0,
+    forward: 0
+  });
+  // Traversal has to read the current counts outside of render, so the ref is
+  // the source of truth and state exists to paint the buttons.
+  const stepsRef = React.useRef(steps);
+  const pendingTraversal = React.useRef(null);
+  const frameIsLoaded = React.useRef(false);
+  const moveTo = React.useCallback(next => {
+    stepsRef.current = next;
+    setSteps(next);
+  }, []);
+  const onFrameLoad = React.useCallback(() => {
+    if (!frameIsLoaded.current) {
+      // The frame's first page is the floor, not a step.
+      frameIsLoaded.current = true;
+    } else {
+      const traversal = pendingTraversal.current;
+      pendingTraversal.current = null;
+      const {
+        back,
+        forward
+      } = stepsRef.current;
+      if (traversal === "back") {
+        moveTo({
+          back: back - 1,
+          forward: forward + 1
+        });
+      } else if (traversal === "forward") {
+        moveTo({
+          back: back + 1,
+          forward: forward - 1
+        });
+      } else {
+        moveTo({
+          back: back + 1,
+          forward: 0
+        });
+      }
+    }
+  }, [moveTo]);
+  // Guarded here rather than trusting the button's disabled state: traversing
+  // with no frame step left would navigate the host app out from under us.
+  const traverse = React.useCallback(direction => {
+    if (stepsRef.current[direction] > 0) {
+      pendingTraversal.current = direction;
+      window.history[direction]();
+    }
+  }, []);
+  return {
+    onFrameLoad,
+    steps,
+    traverse
+  };
+}
+function NavButton({
+  direction,
+  disabled,
+  onClick
+}) {
+  return /*#__PURE__*/React.createElement(tapestryReact.Button
+  // Tapestry's `disabled` suppresses the click but emits no ARIA state.
+  , {
+    "aria-disabled": disabled,
+    disabled: disabled,
+    hover: {
+      backgroundColor: "var(--t-fill-color-neutral-070)"
+    },
+    icon: {
+      fill: "var(--t-icon-color-dim)",
+      name: direction === "back" ? "general.leftChevron" : "general.rightChevron",
+      size: "md"
+    },
+    onClick: onClick,
+    opacity: disabled ? 0.35 : 1,
+    theme: false,
+    title: direction === "back" ? "Back" : "Forward"
+  });
+}
+function DeveloperToolsComponent({
+  closeDrawer
+}) {
+  const {
+    onFrameLoad,
+    steps,
+    traverse
+  } = useFrameHistory();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DrawerHeader, {
+    closeDrawer: closeDrawer
+  }, /*#__PURE__*/React.createElement(tapestryReact.StackView, {
+    alignment: "center",
+    axis: "horizontal",
+    spacing: 0.25
+  }, /*#__PURE__*/React.createElement(NavButton, {
+    direction: "back",
+    disabled: steps.back === 0,
+    onClick: () => traverse("back")
+  }), /*#__PURE__*/React.createElement(NavButton, {
+    direction: "forward",
+    disabled: steps.forward === 0,
+    onClick: () => traverse("forward")
+  }), /*#__PURE__*/React.createElement(DrawerHeading, {
+    paddingLeft: 0.5
+  }, "Developer Tools"))), /*#__PURE__*/React.createElement(tapestryReact.Box, {
+    as: "iframe",
+    border: "none",
+    flex: "1",
+    minHeight: 0,
+    onLoad: onFrameLoad,
+    src: iframeSrc(),
+    title: "Developer Tools",
+    width: "100%"
+  }));
+}
+const DeveloperTools = {
+  component: DeveloperToolsComponent,
+  icons: {
+    component: ToolsIcon
+  },
+  label: "Developer Tools",
+  // No space: `name` becomes an element id and a pendo attribute.
+  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 = "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";
+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.
 const GRADIENT_STOPS = [{
   color: "var(--t-fill-color-tag-teal-040)",
@@ -33394,7 +34574,7 @@ function SparkleIcon({
       stopColor: color
     }
   })))))), /*#__PURE__*/React.createElement("path", {
-    d: SPARKLE_PATH,
+    d: SPARKLE_PATH$1,
     fill: isGradient ? `url(#${gradientId})` : "currentColor"
   }));
 }
@@ -33403,8 +34583,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"
@@ -33419,15 +34599,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"
   }));
@@ -33437,18 +34617,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"
   })));
@@ -33465,9 +34645,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"
@@ -33638,7 +34818,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", {
@@ -33647,6 +34827,23 @@ 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
+  }), /*#__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) || "";
@@ -33802,16 +34999,24 @@ const DocumentationSearch = ({
 // not the path, so updating it is a same-document navigation that doesn't
 // reload the iframe, but also lets the route survive a forced reload (e.g.
 // Turbo re-parenting the topbar).
-function buildPicobotSrc(origin, path) {
+//
+// `panel` loads picobot as its own toolbar panel rather than inside Helpdesk.
+function buildPicobotSrc(origin, path, {
+  panel = false
+} = {}) {
   const [rawPath, queryPart] = path.replace(/^\/+/, "").split("?", 2);
   const safePath = rawPath.split("/").filter(segment => segment && segment !== "." && segment !== "..").join("/");
   const fragment = queryPart !== undefined ? `${safePath}?${queryPart}` : safePath;
-  const base = new URL("topbar", origin).toString();
+  const url = new URL("topbar", origin);
+  if (panel) url.searchParams.set("panel", "1");
+  const base = url.toString();
   return fragment ? `${base}#${fragment}` : base;
 }
 
 const LOAD_TIMEOUT_MS = 3000;
-function createPicobotIframe(picobotOrigin) {
+function createPicobotIframe(picobotOrigin, {
+  panel = false
+} = {}) {
   return /*#__PURE__*/React.forwardRef(function PicobotIframe({
     currentPath: iframePath,
     onChangePath: onIframeChangePath,
@@ -33867,7 +35072,9 @@ function createPicobotIframe(picobotOrigin) {
         (_b = (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage(message, picobotOrigin);
       }
     }), []);
-    const iframeSrc = buildPicobotSrc(picobotOrigin, loadedPath);
+    const iframeSrc = buildPicobotSrc(picobotOrigin, loadedPath, {
+      panel
+    });
     return /*#__PURE__*/React.createElement("iframe", {
       ref: iframeRef,
       src: iframeSrc,
@@ -33906,22 +35113,28 @@ function HelpdeskComponent({
   currentPath,
   env,
   helpdeskConfig,
-  onChangePath
+  isPicobotLoading,
+  onChangePath,
+  openPicobot
 }) {
   const PicobotIframe = React.useMemo(() => createPicobotIframe(pcoUrl(env)("picobot")), [env]);
+  const loadingFallback = /*#__PURE__*/React.createElement(StackView$1, {
+    flex: 1,
+    axis: "vertical"
+  }, /*#__PURE__*/React.createElement(DrawerHeader, {
+    closeDrawer: closeDrawer
+  }, /*#__PURE__*/React.createElement(StackView$1, {
+    axis: "horizontal",
+    spacing: 1
+  }, /*#__PURE__*/React.createElement(DrawerHeading, null, "Help and support"), /*#__PURE__*/React.createElement(LoadingIndicator$1, null))));
+  // The add-on reads its args once, so mounting before the gate answers
+  // would leave out openPicobot for good.
+  if (isPicobotLoading) return loadingFallback;
   return /*#__PURE__*/React.createElement(addOns.UiExtensionFirstPartyComponent, {
     grow: 1,
     display: "flex",
     extensionId: env === "staging" ? "42" : "11",
-    loadingFallback: /*#__PURE__*/React.createElement(StackView$1, {
-      flex: 1,
-      axis: "vertical"
-    }, /*#__PURE__*/React.createElement(DrawerHeader, {
-      closeDrawer: closeDrawer
-    }, /*#__PURE__*/React.createElement(StackView$1, {
-      axis: "horizontal",
-      spacing: 1
-    }, /*#__PURE__*/React.createElement(DrawerHeading, null, "Help and support"), /*#__PURE__*/React.createElement(LoadingIndicator$1, null)))),
+    loadingFallback: loadingFallback,
     additionalComponents: {
       AskAIBanner: {
         component: AskAIBanner,
@@ -33941,6 +35154,18 @@ function HelpdeskComponent({
           }
         }
       },
+      AskAIButton: {
+        component: AskAIButton,
+        properties: {
+          onClick: {
+            event: false,
+            type: Function
+          },
+          text: {
+            type: String
+          }
+        }
+      },
       CalendlyWidget: {
         component: CalendlyWidget,
         properties: {
@@ -34019,7 +35244,11 @@ function HelpdeskComponent({
       currentPageParams: location.search,
       currentPath,
       helpdeskConfig,
-      onChangePath
+      onChangePath,
+      // Its presence tells helpdesk that Picobot has its own panel.
+      ...(openPicobot && {
+        openPicobot
+      })
     }
   });
 }
@@ -34566,6 +35795,142 @@ const Notifications = {
   name: "Notifications"
 };
 
+const SPARKLE_PATH = "M8.7824 18.8791C8.88371 18.5973 9.26996 18.5973 9.37127 18.8791L9.94256 20.465C10.0222 20.6863 10.1914 20.8616 10.4064 20.9435L11.6779 21.4269L11.9484 21.5304L11.9963 21.5539C12.2205 21.6839 12.2047 22.039 11.9484 22.1369L11.6779 22.2394L10.4064 22.7248C10.1915 22.8068 10.0222 22.9812 9.94256 23.2023L9.37127 24.7893L9.34881 24.8381C9.23098 25.054 8.92273 25.0539 8.80486 24.8381L8.7824 24.7893L8.2111 23.2023C8.14141 23.0088 8.0029 22.8513 7.82536 22.76L7.74723 22.7248L6.47573 22.2394L6.20522 22.1369C5.93172 22.0325 5.93164 21.6347 6.20522 21.5304L6.47476 21.4269L7.74723 20.9435C7.96226 20.8616 8.13147 20.6863 8.2111 20.465L8.7824 18.8791ZM17.5706 8.11138C17.8241 7.40747 18.7928 7.40734 19.0462 8.11138L20.472 12.0782C20.6711 12.6318 21.0952 13.0687 21.6331 13.2735L25.4867 14.7413C26.1711 15.002 26.1711 15.9983 25.4867 16.2589L21.6331 17.7267C21.0952 17.9316 20.6711 18.3684 20.472 18.922L19.2649 22.2785L19.0462 22.8889L18.9905 23.0119C18.6956 23.5517 17.9212 23.5515 17.6262 23.0119L17.5706 22.8889L17.3508 22.2795L16.1448 18.922C15.9457 18.3684 15.5206 17.9316 14.9827 17.7267L11.1291 16.2589C10.4449 15.9982 10.4449 15.0021 11.1291 14.7413L14.9827 13.2735C15.4533 13.0943 15.8379 12.7376 16.0598 12.2804L16.1448 12.0782L17.5706 8.11138ZM18.0266 12.755C17.6351 13.8438 16.7916 14.7249 15.6946 15.1427L14.7551 15.5001L15.6946 15.8575C16.7916 16.2753 17.6351 17.1564 18.0266 18.2453L18.3079 19.0275L18.5891 18.2453C18.9806 17.1564 19.8242 16.2753 20.9212 15.8575L21.8597 15.5001L20.9212 15.1427C19.8242 14.7249 18.9806 13.8439 18.5891 12.755L18.3079 11.9718L18.0266 12.755ZM8.7824 6.21097C8.88388 5.9297 9.26982 5.92966 9.37127 6.21097L9.94256 7.7979C10.0222 8.01911 10.1915 8.19346 10.4064 8.27544L11.6779 8.75982L11.8322 9.16607L11.9484 8.86334C12.2218 8.96779 12.2218 9.36542 11.9484 9.46979L11.6779 9.57233L10.4064 10.0567C10.1914 10.1387 10.0222 10.3139 9.94256 10.5352L9.37127 12.1212C9.26996 12.4029 8.88371 12.4029 8.7824 12.1212L8.2111 10.5352C8.14139 10.3415 8.00304 10.1832 7.82536 10.0919L7.74723 10.0567L6.47573 9.57233L6.20522 9.46979C5.9486 9.37195 5.93265 9.01568 6.15737 8.8858L6.20522 8.86334L7.74723 8.27544C7.96214 8.19346 8.13149 8.0191 8.2111 7.7979L8.69451 6.45413L8.7824 6.21097ZM11.9484 8.86334L11.8322 9.16607L11.6779 8.75982L11.9484 8.86334Z";
+// Helpdesk reads this context off the email path to open its email form the
+// same way a handoff inside its own drawer does.
+function emailPathWithContext(context = {}) {
+  const params = new URLSearchParams();
+  for (const key of ["conversationId", "source", "turnIndex"]) {
+    const value = context[key];
+    if (value !== null && value !== undefined) params.set(key, String(value));
+  }
+  return `email?${params}`;
+}
+function PicobotComponent({
+  clearPending,
+  closeDrawer,
+  currentPath,
+  env,
+  onChangePath,
+  openTool,
+  pending
+}) {
+  const PicobotIframe = React.useMemo(() => createPicobotIframe(pcoUrl(env)("picobot"), {
+    panel: true
+  }), [env]);
+  const picobotRef = React.useRef(null);
+  const [isPicobotReady, setIsPicobotReady] = React.useState(false);
+  // Picobot has no listener until it sends READY, so openPicobot's draft or
+  // conversation waits for it.
+  React.useEffect(function handOverPendingOncePicobotIsReady() {
+    var _a, _b;
+    if (!pending || !isPicobotReady) return;
+    const {
+      conversationId,
+      draft,
+      ticketExternalId
+    } = pending;
+    if (conversationId) {
+      (_a = picobotRef.current) === null || _a === void 0 ? void 0 : _a.postMessage({
+        payload: {
+          conversation_id: conversationId,
+          // Picobot asks whether this resolved the ticket, and closes it.
+          ...(ticketExternalId && {
+            external_id: ticketExternalId,
+            source: "ticket_submitted"
+          })
+        },
+        type: "LOAD_CONVERSATION"
+      });
+    } else if (draft) {
+      // Not both: Picobot cancels a conversation load when a prefill
+      // starts a new conversation.
+      (_b = picobotRef.current) === null || _b === void 0 ? void 0 : _b.postMessage({
+        payload: {
+          source: "email_form",
+          text: draft
+        },
+        type: "PREFILL_COMPOSER"
+      });
+    }
+    clearPending();
+  }, [pending, isPicobotReady, clearPending]);
+  const [iframeErrored, setIframeErrored] = React.useState(false);
+  const [mountKey, setMountKey] = React.useState(0);
+  const handleRetry = React.useCallback(() => {
+    setIframeErrored(false);
+    setIsPicobotReady(false);
+    setMountKey(key => key + 1);
+  }, []);
+  const handleMessage = React.useCallback(data => {
+    var _a;
+    const message = data;
+    switch (message === null || message === void 0 ? void 0 : message.type) {
+      case "CLOSE_DRAWER":
+        return closeDrawer();
+      case "READY":
+        return setIsPicobotReady(true);
+      case "PICOBOT_SUPPORT_HANDOFF":
+        return openTool("helpdesk", ((_a = message.payload) === null || _a === void 0 ? void 0 : _a.method) === "zoom" ? "phone" : emailPathWithContext(message.payload));
+      case "IFRAME_LOAD_ERROR":
+        console.warn("topbar: Picobot iframe failed to load");
+        return setIframeErrored(true);
+    }
+  }, [closeDrawer, openTool]);
+  if (iframeErrored) {
+    return /*#__PURE__*/React.createElement(LoadError, {
+      onContactSupport: () => openTool("helpdesk", "email"),
+      onRetry: handleRetry
+    });
+  }
+  return /*#__PURE__*/React.createElement(PicobotIframe, {
+    key: mountKey,
+    ref: picobotRef,
+    currentPath: currentPath,
+    onChangePath: onChangePath,
+    onMessage: handleMessage
+  });
+}
+function LoadError({
+  onContactSupport,
+  onRetry
+}) {
+  return /*#__PURE__*/React.createElement(tapestryReact.StackView, {
+    axis: "vertical",
+    flex: 1,
+    alignment: "center",
+    distribution: "center",
+    padding: 3,
+    spacing: 1
+  }, /*#__PURE__*/React.createElement(tapestryReact.Heading, {
+    level: 2
+  }, "Picobot is temporarily unavailable"), /*#__PURE__*/React.createElement(tapestryReact.Text, {
+    size: 5,
+    color: "var(--t-text-color-secondary)"
+  }, "Try again or contact support."), /*#__PURE__*/React.createElement(tapestryReact.Box, {
+    paddingTop: 2
+  }, /*#__PURE__*/React.createElement(tapestryReact.Button, {
+    onClick: onRetry,
+    iconLeft: "general.refresh",
+    theme: "primary",
+    variant: "fill",
+    title: "Retry"
+  })), /*#__PURE__*/React.createElement(tapestryReact.Button, {
+    onClick: onContactSupport,
+    variant: "naked",
+    theme: "primary",
+    title: "Contact support"
+  }));
+}
+const Picobot = {
+  component: PicobotComponent,
+  icons: {
+    staticDotPath: SPARKLE_PATH,
+    staticPath: SPARKLE_PATH
+  },
+  name: "Picobot"
+};
+
 const {
   LoadingIndicator,
   StackView
@@ -34961,6 +36326,41 @@ const useChatConfig = ({
   };
 };
 
+// Picobot's API rejects requests without a version header, and apiRequest
+// sets its own headers, so the version rides in on the fetch.
+const picobotFetch = (url, opts) => defaultFetch(url, {
+  ...opts,
+  headers: {
+    ...(opts === null || opts === void 0 ? void 0 : opts.headers),
+    "X-PCO-API-Version": "2026-08-11"
+  }
+});
+// Routes wait on the gate, so a slow Picobot can't hold them up for long.
+const GATE_TIMEOUT_MS = 3000;
+const usePicobotConfig = ({
+  isEnabled
+}) => {
+  // Undefined until Picobot answers.
+  const [panelEnabled, setPanelEnabled] = React.useState();
+  React.useEffect(() => {
+    if (!isEnabled) return undefined;
+    // Whatever settles first wins, so a late answer can't reopen the gate.
+    const settle = enabled => setPanelEnabled(current => current !== null && current !== void 0 ? current : enabled);
+    const timeout = setTimeout(() => settle(false), GATE_TIMEOUT_MS);
+    apiRequest(picobotFetch, `${window.location.origin}/~api/picobot/v2/me`).then(({
+      json
+    }) => {
+      var _a, _b;
+      return settle(((_b = (_a = json === null || json === void 0 ? void 0 : json.data) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b.picobot_panel_enabled) === true);
+    }).catch(() => settle(false)).finally(() => clearTimeout(timeout));
+    return () => clearTimeout(timeout);
+  }, [isEnabled]);
+  return {
+    displayPicobotIcon: panelEnabled === true,
+    isLoading: isEnabled && panelEnabled === undefined
+  };
+};
+
 const Profile = {
   component: UserProfile,
   icons: {
@@ -34971,10 +36371,16 @@ const Profile = {
 };
 
 const DURATION = 100;
+// Exempt paths match regardless of query, so `email?conversationId=…` is
+// exempt along with `email`.
 function isToolPathExemptFromStorage(toolName, path) {
   var _a, _b;
   const tool = toolsRouteMap[toolName];
-  return (_b = (_a = tool === null || tool === void 0 ? void 0 : tool.storageExemptPaths) === null || _a === void 0 ? void 0 : _a.includes(path)) !== null && _b !== void 0 ? _b : false;
+  const [pathWithoutQuery] = path.split("?");
+  return (_b = (_a = tool === null || tool === void 0 ? void 0 : tool.storageExemptPaths) === null || _a === void 0 ? void 0 : _a.includes(pathWithoutQuery)) !== null && _b !== void 0 ? _b : false;
+}
+function isConversationPath(path) {
+  return Boolean(path === null || path === void 0 ? void 0 : path.startsWith("conversations/"));
 }
 function scrollToolDrawerToTop(toolName) {
   var _a;
@@ -34987,6 +36393,7 @@ const TOOLS_MAP = {
   Chat,
   Helpdesk,
   Notifications,
+  Picobot,
   Profile,
   Tasks
 };
@@ -35014,7 +36421,8 @@ function Toolbar({
   });
   const {
     currentContent,
-    open
+    open,
+    pending
   } = state;
   const mounted = !!currentContent;
   const storeData = useStore();
@@ -35027,6 +36435,15 @@ function Toolbar({
     ...(env === "development" ? _storeDataOverride !== null && _storeDataOverride !== void 0 ? _storeDataOverride : {} : {})
   };
   const updateStore = useUpdateStore();
+  const {
+    displayPicobotIcon,
+    isLoading: isPicobotGateLoading
+  } = usePicobotConfig({
+    isEnabled: Boolean(userId)
+  });
+  // Picobot is a kill-switched tool: until its gate says the panel is
+  // enabled, its routes are held, and if it never does, they're ignored.
+  const routableTool = React.useCallback(name => name === Picobot.name.toLowerCase() && !displayPicobotIcon ? undefined : toolsRouteMap[name], [displayPicobotIcon]);
   React.useEffect(() => {
     if (open) {
       document.body.style.overflow = "hidden";
@@ -35114,7 +36531,9 @@ function Toolbar({
     });
   }, [clearRoute]);
   React.useEffect(() => {
-    if (!toolbarFragmentRoute) return;
+    if (!toolbarFragmentRoute || !routableTool(toolbarFragmentRoute.tool)) {
+      return;
+    }
     const isExempt = isToolPathExemptFromStorage(toolbarFragmentRoute.tool, toolbarFragmentRoute.path);
     if (isExempt) return;
     const nextState = {
@@ -35124,12 +36543,32 @@ function Toolbar({
     if (!shallowCompare(nextState, toolStateCookie)) {
       setToolStateCookie(nextState);
     }
-  }, [toolbarFragmentRoute, toolStateCookie]);
+  }, [toolbarFragmentRoute, toolStateCookie, routableTool]);
   React.useEffect(() => {
-    if ((toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool) && (currentContent !== toolsRouteMap[toolbarFragmentRoute.tool] || !open)) {
-      setToolAndOpenDrawer(toolsRouteMap[toolbarFragmentRoute.tool]);
+    // Helpdesk conversations may belong to Picobot, so they wait for its gate
+    // rather than flashing open in Helpdesk first.
+    const mayRedirectToPicobot = (toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool) === Helpdesk.name.toLowerCase() && isConversationPath(toolbarFragmentRoute.path) && (isPicobotGateLoading || displayPicobotIcon);
+    const tool = (toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool) && !mayRedirectToPicobot && routableTool(toolbarFragmentRoute.tool);
+    if (tool && (currentContent !== tool || !open)) {
+      setToolAndOpenDrawer(tool);
     }
-  }, [setToolAndOpenDrawer, toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool, currentContent, open]);
+  }, [setToolAndOpenDrawer, toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool, toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.path, currentContent, open, routableTool, isPicobotGateLoading, displayPicobotIcon]);
+  const openTool = React.useCallback((name, path, pendingValue) => {
+    const tool = routableTool(name.toLowerCase());
+    if (!tool) return;
+    dispatch({
+      payload: pendingValue === undefined ? null : {
+        tool: tool.name,
+        value: pendingValue
+      },
+      type: ActionType.setPending
+    });
+    onChangeToolbarFragmentRoute(tool.name.toLowerCase(), path);
+    scrollToolDrawerToTop(tool.name);
+  }, [onChangeToolbarFragmentRoute, routableTool]);
+  const clearPending = React.useCallback(() => dispatch({
+    type: ActionType.clearPending
+  }), []);
   const toggleDrawer = content => {
     if (!open) {
       return openDrawer(content);
@@ -35146,12 +36585,52 @@ function Toolbar({
     joltPromise: storeData === null || storeData === void 0 ? void 0 : storeData.joltPromise,
     userId
   });
-  const TOOLS = [Notifications, Tasks, displayChatIcon && Chat].filter(Boolean);
+  // Picobot conversations moved from Helpdesk to the Picobot panel, so
+  // send old links and saved paths there once the panel is enabled.
+  React.useEffect(() => {
+    if (!displayPicobotIcon) return;
+    if ((toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool) === Helpdesk.name.toLowerCase() && isConversationPath(toolbarFragmentRoute.path)) {
+      onChangeToolbarFragmentRoute(Picobot.name.toLowerCase(), toolbarFragmentRoute.path);
+    }
+  }, [displayPicobotIcon, toolbarFragmentRoute, onChangeToolbarFragmentRoute]);
+  React.useEffect(() => {
+    if (!displayPicobotIcon) return;
+    const {
+      helpdesk,
+      picobot
+    } = toolStateCookie;
+    if (!isConversationPath(helpdesk)) return;
+    setToolStateCookie({
+      ...toolStateCookie,
+      helpdesk: "",
+      picobot: picobot || helpdesk
+    });
+  }, [displayPicobotIcon, toolStateCookie]);
+  const openPicobot = React.useCallback(options => {
+    var _a;
+    // Moving an open Picobot off its path reloads or navigates the iframe,
+    // which would race the options it's being handed.
+    const path = currentContent === Picobot ? (_a = toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.path) !== null && _a !== void 0 ? _a : "" : "";
+    openTool(Picobot.name, path, options);
+  }, [openTool, currentContent, toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.path]);
+  React.useEffect(() => {
+    if (!displayPicobotIcon) return undefined;
+    window.topbar = window.topbar || {};
+    window.topbar.openPicobot = openPicobot;
+    return () => {
+      delete window.topbar.openPicobot;
+    };
+  }, [displayPicobotIcon, openPicobot]);
+  const TOOLS = [Notifications, Tasks, displayChatIcon && Chat, displayPicobotIcon && Picobot, isPcoTestHost() && DeveloperTools].filter(Boolean);
   const handleToolOnClick = tool => {
     toggleDrawer(tool);
     scrollToolDrawerToTop(tool.name);
   };
   const toolSpecificProps = {
+    Helpdesk: {
+      isPicobotLoading: isPicobotGateLoading,
+      openPicobot: displayPicobotIcon ? openPicobot : undefined
+    },
     Profile: {
       appName,
       closeDrawer,
@@ -35174,6 +36653,7 @@ function Toolbar({
   const routeIsForCurrentTool = (toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool) && toolsRouteMap[toolbarFragmentRoute.tool] === currentContent;
   const currentToolProps = {
     appName,
+    clearPending,
     closeDrawer,
     currentPath: routeIsForCurrentTool ? toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.path : null,
     env,
@@ -35182,6 +36662,8 @@ function Toolbar({
     joltPromise,
     onChangePath,
     openDrawer: () => currentContent && openDrawer(currentContent),
+    openTool,
+    pending: (pending === null || pending === void 0 ? void 0 : pending.tool) === (currentContent === null || currentContent === void 0 ? void 0 : currentContent.name) ? pending === null || pending === void 0 ? void 0 : pending.value : undefined,
     userId,
     ...(currentContent ? toolSpecificProps[currentContent.name] : {})
   };
@@ -35192,38 +36674,37 @@ 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",
     size: "24px"
   })), [HelpDeskTool, ...TOOLS].map(tool => {
+    var _a;
     const current = open && currentContent === tool;
     const indicator = indicatorState[tool.name];
     return /*#__PURE__*/React.createElement(ToolbarButton, {
       current: current,
       onClick: () => handleToolOnClick(tool),
       id: getDataPendoAttribute(tool.name),
-      "aria-label": `Open ${tool.name} drawer`,
+      "aria-label": `Open ${(_a = tool.label) !== null && _a !== void 0 ? _a : tool.name} drawer`,
       "data-pendo": getDataPendoAttribute(tool.name),
       key: tool.name
-    }, !indicator && (/*#__PURE__*/React.createElement(ToolbarButtonIcon, {
-      path: tool.icons.staticPath
-    })), indicator && (/*#__PURE__*/React.createElement(ToolbarButtonIcon, {
-      path: tool.icons.staticDotPath,
-      dot: true
-    })));
+    }, /*#__PURE__*/React.createElement(ToolbarToolIcon, {
+      icons: tool.icons,
+      dot: !!indicator
+    }));
   })), /*#__PURE__*/React.createElement(DrawerWrap, {
     isVisible: open
   }, mounted && (/*#__PURE__*/React.createElement(Drawer, {
@@ -35241,12 +36722,25 @@ 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
   }, children);
 };
+function ToolbarToolIcon({
+  dot,
+  icons
+}) {
+  if ("component" in icons) {
+    return /*#__PURE__*/React.createElement(icons.component, null);
+  } else {
+    return /*#__PURE__*/React.createElement(ToolbarButtonIcon, {
+      path: dot ? icons.staticDotPath : icons.staticPath,
+      dot: dot
+    });
+  }
+}
 function ToolbarButtonIcon({
   dot,
   path