@planningcenter/topbar 12.3.0-qa-899.0 → 12.3.0

package/dist/topbar.umd.js

@@ -27,7 +27,7 @@
   var people__namespace = /*#__PURE__*/_interopNamespaceDefault(people);
   var toolbar__namespace = /*#__PURE__*/_interopNamespaceDefault(toolbar);
 
-  var styles$i = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
+  var styles$l = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
 
   const AccessibilityToolbar = ({
     children
@@ -39,7 +39,7 @@
       (_a = document.getElementById("main-content")) === null || _a === void 0 ? void 0 : _a.focus();
     };
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$i["accessibility-toolbar"]
+      className: styles$l["accessibility-toolbar"]
     }, /*#__PURE__*/React.createElement(tapestry.Link, {
       href: "#main-content",
       kind: "primary",
@@ -356,11 +356,11 @@
     fill: fill
   })));
 
-  var styles$h = {"announcement":"announcement-pI5tM","announcement--platform":"announcement--platform-EcUn2","announcement--promo":"announcement--promo-FarUk","announcement-icon":"announcement-icon-Ov39-","announcement-content":"announcement-content-q2ad6","dismiss":"dismiss-wUAoU","dismiss--promo":"dismiss--promo-7zvO4"};
+  var styles$k = {"announcement":"announcement-pI5tM","announcement--platform":"announcement--platform-EcUn2","announcement--promo":"announcement--promo-FarUk","announcement-icon":"announcement-icon-Ov39-","announcement-content":"announcement-content-q2ad6","dismiss":"dismiss-wUAoU","dismiss--promo":"dismiss--promo-7zvO4"};
 
   function AnnouncementIcon() {
     return /*#__PURE__*/React.createElement("svg", {
-      className: styles$h["announcement-icon"],
+      className: styles$k["announcement-icon"],
       width: "16",
       height: "16",
       viewBox: "0 0 16 16",
@@ -485,7 +485,7 @@
       } = this.props;
       const isPromo = variant === "promo";
       return /*#__PURE__*/React.createElement("div", {
-        className: classnames(styles$h["announcement"], styles$h[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
+        className: classnames(styles$k["announcement"], styles$k[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
         "data-announcement-variant": variant !== null && variant !== void 0 ? variant : "platform",
         style: isPromo ? {
           backgroundImage: promoBackgroundUrl,
@@ -494,7 +494,7 @@
           backgroundSize: "cover"
         } : undefined
       }, !isPromo && /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
-        className: styles$h["announcement-content"],
+        className: styles$k["announcement-content"],
         style: style,
         ...platformProps
       }));
@@ -543,7 +543,7 @@
     const isPromo = variant === "promo";
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: classnames(styles$h.dismiss, isPromo && styles$h["dismiss--promo"]),
+      className: classnames(styles$k.dismiss, isPromo && styles$k["dismiss--promo"]),
       ...props
     }, /*#__PURE__*/React.createElement(X, {
       fill: isPromo ? "currentColor" : "white",
@@ -623,9 +623,9 @@
         ...platformProps
       } = this.props;
       return /*#__PURE__*/React.createElement("div", {
-        className: styles$h["announcement"]
+        className: styles$k["announcement"]
       }, /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
-        className: styles$h["announcement-content"],
+        className: styles$k["announcement-content"],
         style: style,
         ...platformProps
       }));
@@ -636,7 +636,7 @@
   }) {
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: styles$h.dismiss,
+      className: styles$k.dismiss,
       ...props
     }, /*#__PURE__*/React.createElement(X, {
       fill: "white",
@@ -1758,7 +1758,7 @@
     })) : (/*#__PURE__*/React.createElement("div", null, "appName not supported")));
   }
 
-  var styles$g = {"icon-slot":"icon-slot-m3ZIk","name":"name-UNqbW"};
+  var styles$j = {"icon-slot":"icon-slot-m3ZIk","name":"name-UNqbW"};
 
   const AppRow = ({
     appName,
@@ -1767,24 +1767,24 @@
   }) => {
     if (appName === "Accounts") {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        className: styles$g["icon-slot"]
+        className: styles$j["icon-slot"]
       }, /*#__PURE__*/React.createElement(MonoAppIcon, {
         appName: "Accounts",
         colors: colors,
         size: iconSize
       })), /*#__PURE__*/React.createElement("span", {
-        className: styles$g.name
+        className: styles$j.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$g.name
+      className: styles$j.name
     }, appName));
   };
 
-  var styles$f = {"button":"button-XMbeQ","label":"label-884of","chevron":"chevron-RRg9k"};
+  var styles$i = {"button":"button-XMbeQ","label":"label-884of","chevron":"chevron-RRg9k"};
 
   const AppsButton = /*#__PURE__*/React.forwardRef(({
     appName,
@@ -1796,10 +1796,10 @@
       ...restProps,
       ref: ref,
       "aria-label": `App switcher: ${appName}`,
-      className: styles$f.button,
+      className: styles$i.button,
       kind: "neutral-inline",
       label: /*#__PURE__*/React.createElement("span", {
-        className: styles$f.label
+        className: styles$i.label
       }, isAccounts ? "Account settings" : appName),
       prefix: isAccounts ? (/*#__PURE__*/React.createElement(MonoAppIcon, {
         appName: "Accounts",
@@ -1810,13 +1810,13 @@
         size: 22
       })),
       suffix: /*#__PURE__*/React.createElement(DisclosureChevronIcon, {
-        className: `${styles$f.chevron} symbol`
+        className: `${styles$i.chevron} symbol`
       })
     });
   });
   AppsButton.displayName = "AppsButton";
 
-  var styles$e = {"nav":"nav-y-6ML","popover-content":"popover-content-jOAAY","list":"list-jUxvp","link":"link-LMp2h","current":"current-4U4VL","accounts-item":"accounts-item-erJW0","accounts-link":"accounts-link-4jwPW"};
+  var styles$h = {"nav":"nav-y-6ML","popover-content":"popover-content-jOAAY","list":"list-jUxvp","link":"link-LMp2h","current":"current-4U4VL","accounts-item":"accounts-item-erJW0","accounts-link":"accounts-link-4jwPW"};
 
   const AppsMenu = ({
     appName,
@@ -1837,8 +1837,8 @@
       }, /*#__PURE__*/React.createElement("a", {
         "aria-current": isCurrent ? "page" : undefined,
         "aria-label": name,
-        className: classnames(styles$e.link, {
-          [styles$e.current]: isCurrent
+        className: classnames(styles$h.link, {
+          [styles$h.current]: isCurrent
         }),
         "data-pendo": `app-switcher--change-app--${name}`,
         "data-turbolinks": false,
@@ -1854,22 +1854,22 @@
       colors: colors
     })), /*#__PURE__*/React.createElement(tapestry.PopoverContent, {
       "aria-label": "Switch app",
-      className: styles$e["popover-content"],
+      className: styles$h["popover-content"],
       placement: "bottom start"
     }, /*#__PURE__*/React.createElement("nav", {
-      className: styles$e.nav,
+      className: styles$h.nav,
       "data-pendo": "app-switcher"
     }, /*#__PURE__*/React.createElement("ul", {
-      className: styles$e.list,
+      className: styles$h.list,
       role: "list"
     }, homeProduct && renderProductLink(homeProduct.name), restProducts.map(({
       name
     }) => renderProductLink(name)), accountsProduct && (/*#__PURE__*/React.createElement("li", {
-      className: styles$e["accounts-item"]
+      className: styles$h["accounts-item"]
     }, /*#__PURE__*/React.createElement("a", {
       "aria-current": appName === accountsProduct.name ? "page" : undefined,
       "aria-label": "Account settings",
-      className: classnames(styles$e.link, styles$e["accounts-link"]),
+      className: classnames(styles$h.link, styles$h["accounts-link"]),
       "data-pendo": "app-switcher--change-app--Accounts",
       "data-turbolinks": false,
       href: pcoUrl$1(env)("accounts") + getAppsSwitchProductPath(accountsProduct.name)
@@ -2077,7 +2077,7 @@
     })) : (/*#__PURE__*/React.createElement("div", null, "appName not supported"));
   }
 
-  var styles$d = {"unbutton":"unbutton-lEbTR"};
+  var styles$g = {"unbutton":"unbutton-lEbTR"};
 
   function Unbutton({
     className,
@@ -2086,7 +2086,7 @@
     ...nativeProps
   }) {
     return /*#__PURE__*/React.createElement("button", {
-      className: classnames(styles$d.unbutton, className),
+      className: classnames(styles$g.unbutton, className),
       style: {
         ...style
       },
@@ -2095,7 +2095,7 @@
     });
   }
 
-  var styles$c = {"button":"button-wsipc","button-accounts":"button-accounts-zQmBM","chevron":"chevron-obyBF","is-expanded":"is-expanded-PoCQ9"};
+  var styles$f = {"button":"button-wsipc","button-accounts":"button-accounts-zQmBM","chevron":"chevron-obyBF","is-expanded":"is-expanded-PoCQ9"};
 
   const LegacyAppsButton = ({
     appName,
@@ -2110,8 +2110,8 @@
       "aria-haspopup": "true",
       "aria-label": `App switcher: ${appName}`,
       onClick: onClick,
-      className: classnames(styles$c.button, {
-        [styles$c["is-expanded"]]: expanded
+      className: classnames(styles$f.button, {
+        [styles$f["is-expanded"]]: expanded
       }),
       type: "button",
       style: style,
@@ -2120,7 +2120,7 @@
       appName: "Accounts",
       colors: colors
     }), /*#__PURE__*/React.createElement("div", {
-      className: styles$c["button-accounts"]
+      className: styles$f["button-accounts"]
     }, "Account settings"))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorAppIcon, {
       appName: appName.replace(/[\s-]/, "")
     }), /*#__PURE__*/React.createElement(MonoAppName, {
@@ -2128,7 +2128,7 @@
       key: "mono-app-name",
       size: 24
     }))), /*#__PURE__*/React.createElement(DisclosureChevronIcon, {
-      className: styles$c.chevron,
+      className: styles$f.chevron,
       key: "disclosure-chevron-icon"
     }));
   };
@@ -2261,7 +2261,7 @@
     }
   }
 
-  var styles$b = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
+  var styles$e = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
 
   const Popup = ({
     className,
@@ -2269,8 +2269,8 @@
     isVisible,
     ...nativeProps
   }) => (/*#__PURE__*/React.createElement(C, {
-    className: classnames(styles$b.popup, {
-      [styles$b["is-visible"]]: isVisible
+    className: classnames(styles$e.popup, {
+      [styles$e["is-visible"]]: isVisible
     }, className),
     ...nativeProps
   }));
@@ -2278,11 +2278,11 @@
   const PopupRoot = ({
     ...nativeProps
   }) => (/*#__PURE__*/React.createElement("div", {
-    className: styles$b["popup-root"],
+    className: styles$e["popup-root"],
     ...nativeProps
   }));
 
-  var styles$a = {"popup":"popup-bVhSa"};
+  var styles$d = {"popup":"popup-bVhSa"};
 
   const LegacyAppsMenu = ({
     appName,
@@ -2320,7 +2320,7 @@
       cleanup: !visible,
       component: Outsider,
       onOutsideClick: toggle,
-      className: styles$a.popup,
+      className: styles$d.popup,
       isVisible: visible
     }, /*#__PURE__*/React.createElement("menu", {
       ref: menuRef,
@@ -3230,7 +3230,97 @@ true;
     });
   }, []);
 
+  const isMac = () => /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+  const hasCommandKey = event => isMac() ? event.metaKey : event.ctrlKey;
+  const commandKeyLabel = () => isMac() ? "⌘" : "Ctrl+";
+
+  const STORAGE_KEY = "topbar.product_search.last_product";
+  function readLastProduct() {
+    try {
+      return localStorage.getItem(STORAGE_KEY);
+    } catch {
+      return null;
+    }
+  }
+  function saveLastProduct(slug) {
+    try {
+      localStorage.setItem(STORAGE_KEY, slug);
+    } catch {
+      // Storage can be full or blocked; search still works without it.
+    }
+  }
+
+  var styles$c = {"visuallyHidden":"visuallyHidden-C28ju"};
+
+  var styles$b = {"tab":"tab-lQLDx"};
+
+  // useId isn't available on React 17, which our peer range still supports.
+  let instanceCount$1 = 0;
+  function useInstanceId(prefix) {
+    const [id] = React.useState(() => `${prefix}-${++instanceCount$1}`);
+    return id;
+  }
+
+  function ProductTabs({
+    children,
+    onKeyDown,
+    onSelect,
+    products,
+    selected
+  }) {
+    const id = useInstanceId("product-tabs");
+    const tabId = slug => `${id}-tab-${slug}`;
+    const tabRefs = React.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 {
@@ -3238,62 +3328,222 @@ true;
       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", {
-      href: url
+      "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 SEARCH_DEBOUNCE_MS = 300;
-  function useProductSearch(term) {
-    const query = term.trim();
-    const debouncedQuery = useDebouncedValue(query, SEARCH_DEBOUNCE_MS);
-    const [search, setSearch] = React.useState({
-      status: "idle"
+  const resultId = (listboxId, index) => `${listboxId}-result-${index}`;
+  function SearchResults({
+    search,
+    term,
+    ...navigation
+  }) {
+    var _a;
+    switch (search.status) {
+      case "idle":
+        return null;
+      case "loading":
+        if ((_a = search.groups) === null || _a === void 0 ? void 0 : _a.length) {
+          return /*#__PURE__*/React.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
+        });
+    }
+  }
+  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;
+  const cache = new Map();
+  function cachedRequest(url) {
+    const cached = cache.get(url);
+    if (cached && cached.expiresAt > Date.now()) {
+      // Re-inserting keeps the Map in recently-used order for eviction.
+      cache.delete(url);
+      cache.set(url, cached);
+      return cached.promise;
+    } else {
+      return fetchIntoCache(url);
+    }
+  }
+  function fetchIntoCache(url) {
+    const promise = apiRequest(defaultFetch, url).then(({
+      json,
+      ok
+    }) => {
+      if (!ok || json === null) throw new Error(`Request failed: ${url}`);
+      return json;
     });
+    // In-flight entries never expire, so every caller shares the one fetch.
+    const entry = {
+      expiresAt: Infinity,
+      promise
+    };
+    cache.set(url, entry);
+    promise.then(() => entry.expiresAt = Date.now() + CACHE_TTL_MS, () => cache.get(url) === entry && cache.delete(url));
+    if (cache.size > MAX_ENTRIES$1) cache.delete(cache.keys().next().value);
+    return promise;
+  }
+  function useCachedRequest(url) {
+    const [settled, setSettled] = React.useState();
     React.useEffect(() => {
-      if (!debouncedQuery) {
-        setSearch({
-          status: "idle"
-        });
+      if (url) {
+        let current = true;
+        cachedRequest(url).then(data => current && setSettled({
+          data,
+          url
+        }), () => current && setSettled({
+          failed: true,
+          url
+        }));
+        return () => {
+          current = false;
+        };
+      } else {
         return undefined;
       }
-      let current = true;
-      setSearch({
+    }, [url]);
+    if (!url) {
+      return {
+        status: "idle"
+      };
+    } else if ((settled === null || settled === void 0 ? void 0 : settled.url) !== url) {
+      return {
+        data: settled && "data" in settled ? settled.data : undefined,
         status: "loading"
-      });
-      apiRequest(defaultFetch, productSearchUrl(debouncedQuery)).then(({
-        json,
-        ok
-      }) => {
-        if (!current) return;
-        setSearch(ok && json ? {
-          groups: groupByType(json),
-          status: "done"
-        } : {
-          status: "error"
-        });
-      });
-      return () => {
-        current = false;
       };
-    }, [debouncedQuery]);
-    if (!query) return {
-      status: "idle"
-    };
-    if (query !== debouncedQuery) return {
-      status: "loading"
-    };
-    return search;
+    } else if ("data" in settled) {
+      return {
+        data: settled.data,
+        status: "done"
+      };
+    } else {
+      return {
+        status: "error"
+      };
+    }
+  }
+
+  const SEARCH_DEBOUNCE_MS = 300;
+  function useProductSearch(product, term) {
+    const query = term.trim();
+    const debouncedQuery = useDebouncedValue(query, SEARCH_DEBOUNCE_MS);
+    const request = useCachedRequest(debouncedQuery ? productSearchUrl(product, debouncedQuery) : null);
+    const response = "data" in request ? request.data : undefined;
+    const settledProduct = useSettledProduct(product, request.status);
+    // While a request loads, the previous response stays on screen, but only
+    // if it was for this product: People results must never show under the
+    // Services tab.
+    const visibleResponse = request.status === "done" || settledProduct === product ? response : undefined;
+    const groups = React.useMemo(() => visibleResponse && groupByType(visibleResponse), [visibleResponse]);
+    if (!query) {
+      return {
+        status: "idle"
+      };
+    } else if (query !== debouncedQuery) {
+      return {
+        groups,
+        status: "loading"
+      };
+    } else if (request.status === "done") {
+      return {
+        groups: groups !== null && groups !== void 0 ? groups : [],
+        status: "done"
+      };
+    } else if (request.status === "error") {
+      return {
+        status: "error"
+      };
+    } else {
+      return {
+        groups,
+        status: "loading"
+      };
+    }
   }
-  function productSearchUrl(query) {
+  function productSearchUrl(product, query) {
     const params = new URLSearchParams({
       per_page: "100",
       "where[term]": query
     });
-    return `${window.location.origin}/~api/people/v2/product_search_results?${params}`;
+    return `${window.location.origin}/~api/${product}/v2/product_search_results?${params}`;
   }
   function groupByType({
     data,
@@ -3318,6 +3568,14 @@ true;
     };
     return [...groups.values()].sort((a, b) => rank(a.type) - rank(b.type));
   }
+  // The product the most recent finished request was for.
+  function useSettledProduct(product, status) {
+    const [settledProduct, setSettledProduct] = React.useState();
+    React.useEffect(() => {
+      if (status === "done") setSettledProduct(product);
+    }, [product, status]);
+    return settledProduct;
+  }
   function useDebouncedValue(value, delay) {
     const [debounced, setDebounced] = React.useState(value);
     React.useEffect(() => {
@@ -3327,53 +3585,199 @@ true;
     return debounced;
   }
 
-  function SearchResults({
-    term
+  const COPIED_FEEDBACK_MS = 1500;
+  const verticalStep = key => ({
+    ArrowDown: 1,
+    ArrowUp: -1
+  })[key];
+  function useResultNavigation(results) {
+    // Remembering which results the index belongs to puts the highlight back on
+    // the first result whenever new ones arrive, without an effect to reset it.
+    const [highlight, setHighlight] = React.useState({
+      index: 0,
+      results
+    });
+    const highlightedIndex = highlight.results === results ? highlight.index : 0;
+    const highlighted = results[highlightedIndex];
+    const [copiedUrl, setCopiedUrl] = React.useState(null);
+    React.useEffect(() => {
+      if (copiedUrl) {
+        const timeout = setTimeout(() => setCopiedUrl(null), COPIED_FEEDBACK_MS);
+        return () => clearTimeout(timeout);
+      } else {
+        return undefined;
+      }
+    }, [copiedUrl]);
+    const highlightIndex = React.useCallback(index => setHighlight(current => current.results === results && current.index === index ? current : {
+      index,
+      results
+    }), [results]);
+    const handleKeyDown = event => {
+      const step = verticalStep(event.key);
+      if (step && results.length > 0) {
+        event.preventDefault();
+        highlightIndex((highlightedIndex + step + results.length) % results.length);
+      } else if (event.key === "Enter" && highlighted && !event.nativeEvent.isComposing) {
+        event.preventDefault();
+        open(highlighted.attributes.url, {
+          newTab: hasCommandKey(event)
+        });
+      } else if (isCopyShortcut(event) && highlighted && !hasSelectedText(event.currentTarget)) {
+        event.preventDefault();
+        const {
+          url
+        } = highlighted.attributes;
+        navigator.clipboard.writeText(url).then(() => setCopiedUrl(url));
+      }
+    };
+    return {
+      copied: copiedUrl !== null && copiedUrl === (highlighted === null || highlighted === void 0 ? void 0 : highlighted.attributes.url),
+      handleKeyDown,
+      highlightIndex,
+      highlighted,
+      highlightedIndex: highlighted ? highlightedIndex : null
+    };
+  }
+  function open(url, {
+    newTab
   }) {
-    const search = useProductSearch(term);
-    switch (search.status) {
-      case "idle":
-        return null;
-      case "loading":
-        return /*#__PURE__*/React.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");
+    if (newTab) {
+      window.open(url, "_blank", "noopener");
+    } else {
+      window.location.assign(url);
+    }
+  }
+  const isCopyShortcut = event => event.key.toLowerCase() === "c" && !event.altKey && !event.shiftKey && hasCommandKey(event);
+  // With text selected, ⌘C should copy that text as usual, not the link.
+  function hasSelectedText(element) {
+    var _a, _b;
+    const selectedInField = element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
+    return selectedInField || ((_b = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "") !== "";
+  }
+
+  const SEARCHABLE_PRODUCTS = [{
+    appName: "Groups",
+    slug: "groups"
+  }, {
+    appName: "People",
+    slug: "people"
+  }, {
+    appName: "Services",
+    slug: "services"
+  }];
+  const PERMISSION_CHECKS = {
+    people: () => fetchMe("people", "people_permissions,site_administrator").then(({
+      people_permissions,
+      site_administrator
+    }) => site_administrator || people_permissions !== null),
+    services: () => fetchMe("services", "can_search").then(({
+      can_search
+    }) => can_search)
+  };
+  function fetchMe(product, fields) {
+    const params = new URLSearchParams({
+      "fields[Person]": fields
+    });
+    return apiRequest(defaultFetch, `${window.location.origin}/~api/${product}/v2/me?${params}`).then(({
+      json,
+      ok
+    }) => {
+      if (!ok || json === null) throw new Error("Permission check failed");
+      return json.data.attributes;
+    });
+  }
+  // Permissions rarely change mid-session, so a successful check is kept until
+  // the page reloads. A failed one is dropped so a remount tries again.
+  const permissionCache = new Map();
+  function canSearch(slug) {
+    const check = PERMISSION_CHECKS[slug];
+    const cached = permissionCache.get(slug);
+    if (!check) {
+      return Promise.resolve(true);
+    } else if (cached) {
+      return cached;
+    } else {
+      const promise = check().catch(() => {
+        permissionCache.delete(slug);
+        return false;
+      });
+      permissionCache.set(slug, promise);
+      return promise;
+    }
+  }
+  function useSearchableProducts(apps) {
+    // Keyed by name because providers hand over a fresh `apps` array on renders
+    // where nothing changed.
+    const accessibleKey = inSwitcherOrder(apps).map(({
+      slug
+    }) => slug).join(",");
+    const [settled, setSettled] = React.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])
+          });
         }
-        return /*#__PURE__*/React.createElement(React.Fragment, null, search.groups.map(({
-          results,
-          type
-        }) => (/*#__PURE__*/React.createElement("section", {
-          "aria-label": type,
-          key: type
-        }, /*#__PURE__*/React.createElement("h2", null, type), /*#__PURE__*/React.createElement("ul", null, results.map(result => (/*#__PURE__*/React.createElement("li", {
-          key: result.id
-        }, /*#__PURE__*/React.createElement(SearchResult, {
-          result: result
-        })))))))));
+      });
+      return () => {
+        current = false;
+      };
+    }, [accessibleKey]);
+    if ((settled === null || settled === void 0 ? void 0 : settled.accessibleKey) === accessibleKey) {
+      return {
+        products: settled.products,
+        status: "done"
+      };
+    } else {
+      return {
+        status: "loading"
+      };
     }
   }
+  function inSwitcherOrder(apps) {
+    return groupApps(apps).restProducts.flatMap(app => SEARCHABLE_PRODUCTS.filter(product => product.appName === app.name));
+  }
 
-  const isMac = () => /Mac|iPhone|iPad|iPod/.test(navigator.platform);
-  const isSearchShortcut = event => event.key.toLowerCase() === "k" && !event.altKey && !event.shiftKey && (isMac() ? event.metaKey : event.ctrlKey);
-  function ProductSearch() {
+  const isSearchShortcut = event => event.key.toLowerCase() === "k" && !event.altKey && !event.shiftKey && hasCommandKey(event);
+  // Products opened their own search with `/` before this one replaced it.
+  const isLegacySearchShortcut = event => event.key === "/" && !event.altKey && !event.ctrlKey && !event.metaKey && !isTypingIn(event.target);
+  const isTypingKey = event => event.key.length === 1 && event.key !== " " && !event.altKey && !event.ctrlKey && !event.metaKey;
+  const isTypingIn = target => target instanceof Element && target.closest('input, select, textarea, [contenteditable]:not([contenteditable="false"])') !== null;
+  function ProductSearch({
+    apps
+  }) {
+    const searchable = useSearchableProducts(apps);
+    if (searchable.status === "done" && searchable.products.length > 0) {
+      return /*#__PURE__*/React.createElement(SearchButtonAndDialog, {
+        products: searchable.products
+      });
+    } else {
+      return null;
+    }
+  }
+  function SearchButtonAndDialog({
+    products
+  }) {
     const [open, setOpen] = React.useState(false);
     React.useEffect(() => {
+      // Rich text editors like Trix bind ⌘K to "insert link"; capturing at the
+      // window and stopping propagation keeps them from ever seeing it.
       const handleKeyDown = event => {
-        if (!isSearchShortcut(event)) return;
-        // Rich text editors like Trix bind ⌘K to "insert link"; capturing at
-        // the window and stopping propagation keeps them from ever seeing it.
-        event.preventDefault();
-        event.stopPropagation();
-        setOpen(wasOpen => !wasOpen);
+        if (isSearchShortcut(event)) {
+          event.preventDefault();
+          event.stopPropagation();
+          setOpen(wasOpen => !wasOpen);
+        } else if (isLegacySearchShortcut(event)) {
+          event.preventDefault();
+          event.stopPropagation();
+          setOpen(true);
+        }
       };
       window.addEventListener("keydown", handleKeyDown, {
         capture: true
@@ -3383,7 +3787,7 @@ true;
       });
     }, []);
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
-      "aria-keyshortcuts": isMac() ? "Meta+K" : "Control+K",
+      "aria-keyshortcuts": `${isMac() ? "Meta+K" : "Control+K"} /`,
       "aria-label": "Search",
       onClick: () => setOpen(true),
       type: "button"
@@ -3394,21 +3798,357 @@ true;
       dismissible: true,
       onClose: () => setOpen(false),
       open: open
-    }, /*#__PURE__*/React.createElement(SearchPanel, null)));
+    }, /*#__PURE__*/React.createElement(SearchPanel, {
+      products: products
+    })));
   }
-  function SearchPanel() {
+  function SearchPanel({
+    products
+  }) {
+    var _a, _b;
+    const listboxId = useInstanceId("product-search-results");
     const [term, setTerm] = React.useState("");
+    const [selectedSlug, setSelectedSlug] = React.useState(() => initialProduct(products).slug);
+    const product = (_a = products.find(({
+      slug
+    }) => slug === selectedSlug)) !== null && _a !== void 0 ? _a : products[0];
+    const hasTerm = term.trim() !== "";
+    const search = useProductSearch(product.slug, term);
+    const groups = "groups" in search ? search.groups : undefined;
+    const results = React.useMemo(() => {
+      var _a;
+      return (_a = groups === null || groups === void 0 ? void 0 : groups.flatMap(group => group.results)) !== null && _a !== void 0 ? _a : [];
+    }, [groups]);
+    const navigation = useResultNavigation(results);
+    const {
+      highlightedIndex
+    } = navigation;
+    const inputRef = React.useRef(null);
+    const [announceHighlight, setAnnounceHighlight] = React.useState(false);
+    // The tabs keep focus while arrowing through results, but only the focused
+    // input can point screen readers at the highlight, so from the tabs it's
+    // announced instead. Typing goes back to the input, keystroke and all.
+    const handleTabsKeyDown = event => {
+      var _a;
+      if (isTypingKey(event)) {
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      } else if (verticalStep(event.key)) {
+        setAnnounceHighlight(true);
+        navigation.handleKeyDown(event);
+      } else {
+        navigation.handleKeyDown(event);
+      }
+    };
+    React.useEffect(() => {
+      if (hasTerm) saveLastProduct(product.slug);
+    }, [hasTerm, product.slug]);
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+      "aria-activedescendant": highlightedIndex === null ? undefined : resultId(listboxId, highlightedIndex),
+      "aria-autocomplete": "list",
+      "aria-controls": 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(SearchResults, {
+    }), /*#__PURE__*/React.createElement(ProductTabs, {
+      onKeyDown: handleTabsKeyDown,
+      onSelect: setSelectedSlug,
+      products: products,
+      selected: product
+    }, /*#__PURE__*/React.createElement(SearchResults, {
+      highlightedIndex: highlightedIndex,
+      id: listboxId,
+      label: `${product.appName} results`,
+      onHighlight: navigation.highlightIndex,
+      search: search,
       term: term
+    })), /*#__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, {
+      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;
+  }
+  // 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 MAX_ENTRIES = 20;
+  const FORMAT_VERSION = 1;
+  const MAX_TEXT_LENGTH = 200;
+  const PRODUCTS = ["accounts", "calendar", "check-ins", "giving", "groups", "home", "login", "people", "publishing", "registrations", "services"];
+  function isId(value) {
+    return value !== "" && Array.from(value).every(character => character >= "0" && character <= "9");
+  }
+  // A PCRL looks like `<product>/v2/<resource_type>/<id>`.
+  function isPcrl(value) {
+    const segments = value.split("/");
+    return segments.length === 4 && PRODUCTS.some(product => product === segments[0]) && isId(segments[3]);
+  }
+  function isNonBlankString(value) {
+    return typeof value === "string" && value.trim() !== "";
+  }
+  function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+  }
+  function entryKey(entry) {
+    if (entry.type === "resource") {
+      return `resource:${entry.pcrl}`;
+    } else {
+      return `page:${entry.product}:${entry.path}`;
+    }
+  }
+  function isEntry(value) {
+    if (!isRecord(value)) {
+      return false;
+    } else if (value.type === "resource") {
+      return typeof value.pcrl === "string" && isPcrl(value.pcrl);
+    } else if (value.type === "page") {
+      return isNonBlankString(value.product) && isNonBlankString(value.title) && isNonBlankString(value.path) && typeof value.details === "string";
+    } else {
+      return false;
+    }
+  }
+  // Cuts on code points so a surrogate pair is never split.
+  function clampText(value) {
+    return Array.from(value).slice(0, MAX_TEXT_LENGTH).join("");
+  }
+  function clampEntry(entry) {
+    if (entry.type === "resource") {
+      return entry;
+    } else {
+      return {
+        ...entry,
+        details: clampText(entry.details),
+        title: clampText(entry.title)
+      };
+    }
+  }
+  // Recents are disposable: anything unexpected reads as an empty list (or, for
+  // a single bad entry, a list without it) rather than throwing.
+  function parseRecentlyVisited(value, personId) {
+    let parsed = null;
+    try {
+      parsed = JSON.parse(value !== null && value !== void 0 ? value : "null");
+    } catch {
+      parsed = null;
+    }
+    if (isRecord(parsed) && parsed.v === FORMAT_VERSION && parsed.person === personId && Array.isArray(parsed.entries)) {
+      return parsed.entries.filter(isEntry);
+    } else {
+      return [];
+    }
+  }
+  function addVisit(entries, visit) {
+    const key = entryKey(visit);
+    return [clampEntry(visit), ...entries.filter(entry => entryKey(entry) !== key)].slice(0, MAX_ENTRIES);
+  }
+  function serializeRecentlyVisited(entries, personId) {
+    return JSON.stringify({
+      entries,
+      person: personId,
+      v: FORMAT_VERSION
+    });
+  }
+
+  // The product whose URL, in this environment, has the current page's host.
+  // Reversing pcoUrl handles every environment @planningcenter/url knows about,
+  // and guarantees the stored product rebuilds a working link.
+  function currentProduct() {
+    var _a;
+    return (_a = PRODUCTS.find(product => new URL(pcoUrl$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"
+      };
+    } else if (title && title.trim() !== "" && product) {
+      return {
+        details: detailsFromMetadata(metadata),
+        path: window.location.pathname,
+        product,
+        title,
+        type: "page"
+      };
+    } else {
+      return null;
+    }
+  }
+  // The entry Recently Visited would record for the current page, or null when
+  // the page isn't eligible. Shared by the recorder and the debug panel so the
+  // panel always shows what actually gets stored.
+  function useCurrentVisit() {
+    const {
+      recently_visitable: title,
+      resource
+    } = usePcoMeta();
+    const metadata = useRecentlyVisitableMetadata();
+    return 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)), scope.personId);
+    } catch {
+      return [];
+    }
+  }
+  function recordVisit(visit, scope) {
+    if (isEntry(visit)) {
+      try {
+        localStorage.setItem(storageKey(scope), serializeRecentlyVisited(addVisit(readRecentlyVisited(scope), visit), scope.personId));
+        changes.setState({
+          version: changes.getState().version + 1
+        });
+      } catch {
+        // Storage can be full or blocked; recents are disposable.
+      }
+    }
+  }
+
+  function useRecordRecentlyVisited({
+    enabled,
+    env
+  }) {
+    const personId = useCurrentPersonId();
+    const visit = useCurrentVisit();
+    React.useEffect(() => {
+      if (enabled && personId && visit) {
+        recordVisit(visit, {
+          env,
+          personId
+        });
+      }
+    }, [enabled, env, personId, visit]);
+  }
 
   function StyledRoot({
     children,
@@ -3638,6 +4378,10 @@ true;
     const updateStore = useUpdateStore();
     const useRedesignedSwitcher = useFeature(FEATURE_FLAGS.APP_SWITCHER_REDESIGN, props.features);
     const productSearchEnabled = useFeature(FEATURE_FLAGS.PRODUCT_SEARCH, props.features);
+    useRecordRecentlyVisited({
+      enabled: productSearchEnabled,
+      env: props.env
+    });
     React.useEffect(() => {
       const handleToolbarClick = event => {
         const target = event.target;
@@ -3678,7 +4422,9 @@ true;
       style: {
         margin: "auto"
       }
-    }), !notificationsEnabled && notifications(), productSearchEnabled ? (/*#__PURE__*/React.createElement(ProductSearch, null)) : search({
+    }), !notificationsEnabled && notifications(), productSearchEnabled ? (/*#__PURE__*/React.createElement(ProductSearch, {
+      apps: props.apps
+    })) : search({
       hideRoutes: () => setRoutesVisible(false),
       showRoutes: () => setRoutesVisible(true)
     }), /*#__PURE__*/React.createElement(UserMenuTrigger, {
@@ -31754,6 +32500,11 @@ true;
     const [routesMenuVisible, setRoutesMenuVisible] = React.useState(false);
     const [productSwitcherVisible, setProductSwitcherVisible] = React.useState(false);
     const useRedesignedSwitcher = useFeature(FEATURE_FLAGS.APP_SWITCHER_REDESIGN, props.features);
+    const productSearchEnabled = useFeature(FEATURE_FLAGS.PRODUCT_SEARCH, props.features);
+    useRecordRecentlyVisited({
+      enabled: productSearchEnabled,
+      env: props.env
+    });
     const activeRoute = props.routes.filter(({
       props: {
         active
@@ -31962,55 +32713,6 @@ true;
     id: "topbar"
   };
 
-  function parseValue(element) {
-    const datatype = element.getAttribute("datatype");
-    switch (datatype) {
-      case "boolean":
-        return element.content === "true" || element.content === "1";
-      default:
-        return element.content;
-    }
-  }
-  function getAllPcoMeta() {
-    const elements = document.head.querySelectorAll(`meta[property^="pco:"]`);
-    const meta = {};
-    elements.forEach(e => {
-      const property = e.getAttribute("property");
-      meta[property.substring("pco:".length)] = parseValue(e);
-    });
-    return meta;
-  }
-  const store = createStore(getAllPcoMeta());
-  const observer = new MutationObserver(() => {
-    const prevState = store.getState();
-    const nextState = getAllPcoMeta();
-    if (!shallowCompare(prevState, nextState)) store.setState(nextState);
-  });
-  let hasTriggeredObserve = false;
-  function observe() {
-    if (hasTriggeredObserve) return;
-    hasTriggeredObserve = true;
-    // The module-load snapshot above can predate meta tags that appear later
-    // in <head> (e.g. pco:resource, yielded right before </head>) if this
-    // module's own script tag isn't deferred and runs mid-parse. Those tags
-    // never mutate afterward, so the observer alone would never catch them.
-    // Re-read once now, since observe() is only called once a consumer is
-    // actually mounting, which is always after the document has fully parsed.
-    const freshState = getAllPcoMeta();
-    if (!shallowCompare(store.getState(), freshState)) {
-      store.setState(freshState);
-    }
-    observer.observe(document.head, {
-      attributes: true,
-      childList: true,
-      subtree: true
-    });
-  }
-  function usePcoMeta() {
-    observe();
-    return shim.useSyncExternalStore(store.subscribe, () => store.getState());
-  }
-
   var styles$4 = {"debug-pco-resource":"debug-pco-resource-sLteM","debug-pco-resource-header":"debug-pco-resource-header-5fEbe","debug-pco-resource-badge":"debug-pco-resource-badge-J9v1F","debug-pco-resource-title":"debug-pco-resource-title-volWV","debug-pco-resource-field":"debug-pco-resource-field-7Gitp","debug-pco-resource-field-label":"debug-pco-resource-field-label--f1xX","debug-pco-resource-field-value":"debug-pco-resource-field-value-YoX-C","debug-pco-resource-note":"debug-pco-resource-note-N5xyf","debug-pco-resource-json":"debug-pco-resource-json-Rx-JI"};
 
   function isPresent(value) {