@planningcenter/topbar 12.2.5 → 12.2.6

package/dist/topbar.module.js

@@ -1,7 +1,7 @@
 import { Link } from '@planningcenter/tapestry';
 import * as React from 'react';
 import React__default, { useState, useEffect, useMemo, useLayoutEffect, useContext, createContext, useCallback, useRef } from 'react';
-import pcoUrl$1 from '@planningcenter/url';
+import pcoUrl$1, { pcoApiUrl } from '@planningcenter/url';
 import * as general from '@planningcenter/icons/paths/general';
 import Jolt from '@planningcenter/jolt-client';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
@@ -17,7 +17,7 @@ import { useSearchBox, useHits, InstantSearch, Configure } from 'react-instantse
 import { TransitionGroup, Transition } from 'react-transition-group';
 import datetimeFmt from '@planningcenter/datetime-fmt';
 
-var styles$d = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
+var styles$e = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
 
 const AccessibilityToolbar = ({
   children
@@ -29,7 +29,7 @@ const AccessibilityToolbar = ({
     (_a = document.getElementById("main-content")) === null || _a === void 0 ? void 0 : _a.focus();
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: styles$d["accessibility-toolbar"]
+    className: styles$e["accessibility-toolbar"]
   }, /*#__PURE__*/React__default.createElement(Link, {
     href: "#main-content",
     kind: "primary",
@@ -346,11 +346,11 @@ const X = ({
   fill: fill
 })));
 
-var styles$c = {"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$d = {"announcement":"announcement-pI5tM","announcement--platform":"announcement--platform-EcUn2","announcement--promo":"announcement--promo-FarUk","announcement-icon":"announcement-icon-Ov39-","announcement-content":"announcement-content-q2ad6","dismiss":"dismiss-wUAoU","dismiss--promo":"dismiss--promo-7zvO4"};
 
 function AnnouncementIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    className: styles$c["announcement-icon"],
+    className: styles$d["announcement-icon"],
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
@@ -475,7 +475,7 @@ let StyledAnnouncement$1 = class StyledAnnouncement extends React__default.Compo
     } = this.props;
     const isPromo = variant === "promo";
     return /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles$c["announcement"], styles$c[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
+      className: classnames(styles$d["announcement"], styles$d[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
       "data-announcement-variant": variant !== null && variant !== void 0 ? variant : "platform",
       style: isPromo ? {
         backgroundImage: promoBackgroundUrl,
@@ -484,7 +484,7 @@ let StyledAnnouncement$1 = class StyledAnnouncement extends React__default.Compo
         backgroundSize: "cover"
       } : undefined
     }, !isPromo && /*#__PURE__*/React__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.createElement("div", {
-      className: styles$c["announcement-content"],
+      className: styles$d["announcement-content"],
       style: style,
       ...platformProps
     }));
@@ -533,7 +533,7 @@ function StyledDismissButton$1({
   const isPromo = variant === "promo";
   return /*#__PURE__*/React__default.createElement("button", {
     type: "button",
-    className: classnames(styles$c.dismiss, isPromo && styles$c["dismiss--promo"]),
+    className: classnames(styles$d.dismiss, isPromo && styles$d["dismiss--promo"]),
     ...props
   }, /*#__PURE__*/React__default.createElement(X, {
     fill: isPromo ? "currentColor" : "white",
@@ -613,9 +613,9 @@ class StyledAnnouncement extends React__default.Component {
       ...platformProps
     } = this.props;
     return /*#__PURE__*/React__default.createElement("div", {
-      className: styles$c["announcement"]
+      className: styles$d["announcement"]
     }, /*#__PURE__*/React__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.createElement("div", {
-      className: styles$c["announcement-content"],
+      className: styles$d["announcement-content"],
       style: style,
       ...platformProps
     }));
@@ -626,7 +626,7 @@ function StyledDismissButton({
 }) {
   return /*#__PURE__*/React__default.createElement("button", {
     type: "button",
-    className: styles$c.dismiss,
+    className: styles$d.dismiss,
     ...props
   }, /*#__PURE__*/React__default.createElement(X, {
     fill: "white",
@@ -1873,7 +1873,7 @@ function MonoAppName({
   })) : (/*#__PURE__*/React__default.createElement("div", null, "appName not supported"));
 }
 
-var styles$b = {"unbutton":"unbutton-lEbTR"};
+var styles$c = {"unbutton":"unbutton-lEbTR"};
 
 function Unbutton({
   className,
@@ -1882,7 +1882,7 @@ function Unbutton({
   ...nativeProps
 }) {
   return /*#__PURE__*/React__default.createElement("button", {
-    className: classnames(styles$b.unbutton, className),
+    className: classnames(styles$c.unbutton, className),
     style: {
       ...style
     },
@@ -1891,7 +1891,7 @@ function Unbutton({
   });
 }
 
-var styles$a = {"button":"button-XMbeQ","button-accounts":"button-accounts-nNh-z","chevron":"chevron-RRg9k","is-expanded":"is-expanded-zD0A0"};
+var styles$b = {"button":"button-XMbeQ","button-accounts":"button-accounts-nNh-z","chevron":"chevron-RRg9k","is-expanded":"is-expanded-zD0A0"};
 
 const AppsButton = ({
   appName,
@@ -1906,8 +1906,8 @@ const AppsButton = ({
     "aria-haspopup": "true",
     "aria-label": `App switcher: ${appName}`,
     onClick: onClick,
-    className: classnames(styles$a.button, {
-      [styles$a["is-expanded"]]: expanded
+    className: classnames(styles$b.button, {
+      [styles$b["is-expanded"]]: expanded
     }),
     type: "button",
     style: style,
@@ -1916,7 +1916,7 @@ const AppsButton = ({
     appName: "Accounts",
     colors: colors
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$a["button-accounts"]
+    className: styles$b["button-accounts"]
   }, "Account settings"))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ColorAppIcon, {
     appName: appName.replace(/[\s-]/, "")
   }), /*#__PURE__*/React__default.createElement(MonoAppName, {
@@ -1924,7 +1924,7 @@ const AppsButton = ({
     key: "mono-app-name",
     size: 24
   }))), /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, {
-    className: styles$a.chevron,
+    className: styles$b.chevron,
     key: "disclosure-chevron-icon"
   }));
 };
@@ -2012,7 +2012,7 @@ const IEFlex1 = {
   flex: "1 1 auto"
 };
 
-var styles$9 = {"popup":"popup-sJ-Nv"};
+var styles$a = {"popup":"popup-sJ-Nv"};
 
 const HoverableListItem = ({
   active = false,
@@ -2069,7 +2069,7 @@ class Outsider extends React__default.Component {
   }
 }
 
-var styles$8 = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
+var styles$9 = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
 
 const Popup = ({
   className,
@@ -2077,8 +2077,8 @@ const Popup = ({
   isVisible,
   ...nativeProps
 }) => (/*#__PURE__*/React__default.createElement(C, {
-  className: classnames(styles$8.popup, {
-    [styles$8["is-visible"]]: isVisible
+  className: classnames(styles$9.popup, {
+    [styles$9["is-visible"]]: isVisible
   }, className),
   ...nativeProps
 }));
@@ -2086,7 +2086,7 @@ const Popup = ({
 const PopupRoot = ({
   ...nativeProps
 }) => (/*#__PURE__*/React__default.createElement("div", {
-  className: styles$8["popup-root"],
+  className: styles$9["popup-root"],
   ...nativeProps
 }));
 
@@ -2126,7 +2126,7 @@ const AppsMenu = ({
     cleanup: !visible,
     component: Outsider,
     onOutsideClick: toggle,
-    className: styles$9.popup,
+    className: styles$a.popup,
     isVisible: visible
   }, /*#__PURE__*/React__default.createElement("menu", {
     ref: menuRef,
@@ -3022,9 +3022,9 @@ function StyledRoot({
     `), children);
 }
 
-var styles$7 = {"route":"route--8BWe","is-active":"is-active-FsU9Y","apps-routes-separator":"apps-routes-separator-Nlm-N"};
+var styles$8 = {"route":"route--8BWe","is-active":"is-active-FsU9Y","apps-routes-separator":"apps-routes-separator-Nlm-N"};
 
-var styles$6 = {"popup":"popup-mDNKn","trigger-wrap":"trigger-wrap-Jd-KR","trigger":"trigger-WgRT5","is-visible":"is-visible-GZC0-","trigger-orgname":"trigger-orgname-TDHCc"};
+var styles$7 = {"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,
@@ -3043,7 +3043,7 @@ const UserMenu = ({
     component: Outsider,
     onOutsideClick: () => setUserMenuVisible(false),
     cleanup: !userMenuVisible,
-    className: styles$6.popup,
+    className: styles$7.popup,
     isVisible: userMenuVisible
   }, /*#__PURE__*/React__default.createElement("div", null, hasConnectedPeople ? (/*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -3187,11 +3187,11 @@ const UserMenuTrigger = ({
   userMenuVisible
 }) => {
   return /*#__PURE__*/React__default.createElement("div", {
-    className: styles$6["trigger-wrap"],
+    className: styles$7["trigger-wrap"],
     "data-pendo": "topbar-org-switcher"
   }, /*#__PURE__*/React__default.createElement(Hoverable, {
-    className: classnames(styles$6["trigger"], {
-      [styles$6["is-visible"]]: userMenuVisible
+    className: classnames(styles$7["trigger"], {
+      [styles$7["is-visible"]]: userMenuVisible
     }),
     component: "button",
     type: "button",
@@ -3203,7 +3203,7 @@ const UserMenuTrigger = ({
       requestConnectedPeopleFetch();
     }
   }, showOrgName && (/*#__PURE__*/React__default.createElement("span", {
-    className: styles$6["trigger-orgname"]
+    className: styles$7["trigger-orgname"]
   }, orgName)), /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, null)));
 };
 
@@ -3260,7 +3260,7 @@ const NotSmallTopbar = ({
     },
     appName: props.appName
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$7["apps-routes-separator"]
+    className: styles$8["apps-routes-separator"]
   }), routesVisible && props.routes, /*#__PURE__*/React__default.createElement("div", {
     style: {
       margin: "auto"
@@ -3298,12 +3298,12 @@ const NotSmallRoute = ({
   ...nativeProps
 }) => {
   return /*#__PURE__*/React__default.createElement("a", {
-    className: classnames(styles$7["route"], className, active && styles$7["is-active"]),
+    className: classnames(styles$8["route"], className, active && styles$8["is-active"]),
     ...nativeProps
   });
 };
 
-var styles$5 = {"avatar":"avatar-tW-wn"};
+var styles$6 = {"avatar":"avatar-tW-wn"};
 
 function Avatar({
   env,
@@ -3313,7 +3313,7 @@ function Avatar({
 }) {
   const url = incomingUrl || `${pcoUrl$1(env)("people")}/static/no_photo_thumbnail_gray.svg`;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: styles$5.avatar,
+    className: styles$6.avatar,
     style: {
       backgroundImage: `url(${url})`,
       ...style
@@ -3335,14 +3335,14 @@ ClientStorage.defaultProps = {
   method: "localStorage"
 };
 
-var styles$4 = {"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$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"};
 
 function AccountSettingsLink({
   env
 }) {
   const accountsName = "accounts";
   return /*#__PURE__*/React__default.createElement("a", {
-    className: classnames(styles$4["appmenu-list-a"], styles$4["appmenu-list-a--bottom"]),
+    className: classnames(styles$5["appmenu-list-a"], styles$5["appmenu-list-a--bottom"]),
     "data-pendo": `app-switcher--change-app--${accountsName}`,
     "data-turbolinks": false,
     href: pcoUrl$1(env)(accountsName) + getAppsSwitchProductPath(accountsName)
@@ -3365,7 +3365,7 @@ const CloseMenuButton = ({
 }) => (/*#__PURE__*/React__default.createElement("button", {
   "aria-label": "Close menu",
   type: "button",
-  className: styles$4["appmenu-close-button"],
+  className: styles$5["appmenu-close-button"],
   style: style
 }, /*#__PURE__*/React__default.createElement(X, {
   fill: color,
@@ -3446,7 +3446,7 @@ const SmallTopbar = ({
     "aria-haspopup": "true",
     "aria-label": `App switcher: ${props.appName}`,
     type: "button",
-    className: styles$4["appmenu-button"],
+    className: styles$5["appmenu-button"],
     onClick: () => {
       props.requestAppsFetch();
       props.requestConnectedPeopleFetch();
@@ -3456,12 +3456,12 @@ const SmallTopbar = ({
   }, /*#__PURE__*/React__default.createElement(ColorAppIcon, {
     appName: props.appName.replace(/[\s-]/, "")
   })), routesMenuVisible && (/*#__PURE__*/React__default.createElement("div", {
-    className: styles$4["routes"]
+    className: styles$5["routes"]
   }, props.routes)), /*#__PURE__*/React__default.createElement(ClientStorage, {
     item: "Topbar:Small:Menus:Products:visibility",
     render: () => (/*#__PURE__*/React__default.createElement("div", {
       ref: appMenuRef,
-      className: styles$4["appmenu-layer"],
+      className: styles$5["appmenu-layer"],
       style: {
         ...(productSwitcherVisible && {
           display: "block"
@@ -3480,44 +3480,44 @@ const SmallTopbar = ({
           e.stopPropagation();
         }
       },
-      className: styles$4["appmenu-container"]
+      className: styles$5["appmenu-container"]
     }, /*#__PURE__*/React__default.createElement("a", {
       "aria-current": props.appName === (homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name) ? "page" : undefined,
       "aria-label": homeProduct ? homeProduct.name : props.appName,
       "data-pendo": `app-switcher--change-app--${homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name}`,
       "data-turbolinks": false,
-      className: classnames(styles$4["appmenu-list-a"], styles$4["appmenu-list-a--top"]),
+      className: classnames(styles$5["appmenu-list-a"], styles$5["appmenu-list-a--top"]),
       href: homeProduct ? pcoUrl$1(props.env)("accounts") + getAppsSwitchProductPath(homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name) : undefined
     }, /*#__PURE__*/React__default.createElement(UserMenuAppLockup, {
       appName: homeProduct ? homeProduct.name : props.appName
     })), /*#__PURE__*/React__default.createElement("div", {
-      className: styles$4["appmenu-scroll"]
+      className: styles$5["appmenu-scroll"]
     }, /*#__PURE__*/React__default.createElement("ul", {
       "data-pendo": "app-switcher",
-      className: styles$4["appmenu-list"]
+      className: styles$5["appmenu-list"]
     }, appsMenuFormatter(restProducts).map(({
       name
     }) => (/*#__PURE__*/React__default.createElement("li", {
       key: name,
-      className: styles$4["appmenu-list-li"]
+      className: styles$5["appmenu-list-li"]
     }, /*#__PURE__*/React__default.createElement("a", {
       "aria-current": name === props.appName ? "page" : undefined,
       "aria-label": name,
       "data-pendo": `app-switcher--change-app--${name}`,
       "data-turbolinks": false,
-      className: styles$4["appmenu-list-a"],
+      className: styles$5["appmenu-list-a"],
       href: pcoUrl$1(props.env)("accounts") + getAppsSwitchProductPath(name)
     }, /*#__PURE__*/React__default.createElement(UserMenuAppLockup, {
       appName: name
     }))))), accountsProduct && (/*#__PURE__*/React__default.createElement("li", {
-      className: styles$4["appmenu-list-li"]
+      className: styles$5["appmenu-list-li"]
     }, /*#__PURE__*/React__default.createElement(AccountSettingsLink, {
       env: props.env
     }))))))))
   }), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
-    className: classnames(styles$4["current-route"], {
-      [styles$4["is-active"]]: routesMenuVisible
+    className: classnames(styles$5["current-route"], {
+      [styles$5["is-active"]]: routesMenuVisible
     }),
     onClick: props.routes.length > 0 ? () => {
       setProductSwitcherVisible(false);
@@ -3525,7 +3525,7 @@ const SmallTopbar = ({
     } : null
   }, /*#__PURE__*/React__default.createElement(CurrentRouteComponent, null, capitalize(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
-    className: styles$4["profile-button"],
+    className: styles$5["profile-button"],
     onClick: () => {
       var _a, _b;
       props.requestConnectedPeopleFetch();
@@ -3541,7 +3541,7 @@ const SmallRoute = ({
   className,
   ...props
 }) => (/*#__PURE__*/React__default.createElement("a", {
-  className: classnames(styles$4["route"], className, active && styles$4["is-active"]),
+  className: classnames(styles$5["route"], className, active && styles$5["is-active"]),
   ...props
 }));
 
@@ -3680,6 +3680,168 @@ const topbarTheme = {
   id: "topbar"
 };
 
+function parseValue(element) {
+  const datatype = element.getAttribute("datatype");
+  switch (datatype) {
+    case "boolean":
+      return element.content === "true" || element.content === "1";
+    default:
+      return element.content;
+  }
+}
+function getAllPcoMeta() {
+  const elements = document.head.querySelectorAll(`meta[property^="pco:"]`);
+  const meta = {};
+  elements.forEach(e => {
+    const property = e.getAttribute("property");
+    meta[property.substring("pco:".length)] = parseValue(e);
+  });
+  return meta;
+}
+const store = createStore(getAllPcoMeta());
+const observer = new MutationObserver(() => {
+  const prevState = store.getState();
+  const nextState = getAllPcoMeta();
+  if (!shallowCompare(prevState, nextState)) store.setState(nextState);
+});
+let hasTriggeredObserve = false;
+function observe() {
+  if (hasTriggeredObserve) return;
+  hasTriggeredObserve = true;
+  // The module-load snapshot above can predate meta tags that appear later
+  // in <head> (e.g. pco:resource, yielded right before </head>) if this
+  // module's own script tag isn't deferred and runs mid-parse. Those tags
+  // never mutate afterward, so the observer alone would never catch them.
+  // Re-read once now, since observe() is only called once a consumer is
+  // actually mounting, which is always after the document has fully parsed.
+  const freshState = getAllPcoMeta();
+  if (!shallowCompare(store.getState(), freshState)) {
+    store.setState(freshState);
+  }
+  observer.observe(document.head, {
+    attributes: true,
+    childList: true,
+    subtree: true
+  });
+}
+function usePcoMeta() {
+  observe();
+  return useSyncExternalStore(store.subscribe, () => store.getState());
+}
+
+var styles$4 = {"debug-pco-resource":"debug-pco-resource-sLteM","debug-pco-resource-header":"debug-pco-resource-header-5fEbe","debug-pco-resource-badge":"debug-pco-resource-badge-J9v1F","debug-pco-resource-title":"debug-pco-resource-title-volWV","debug-pco-resource-field":"debug-pco-resource-field-7Gitp","debug-pco-resource-field-label":"debug-pco-resource-field-label--f1xX","debug-pco-resource-field-value":"debug-pco-resource-field-value-YoX-C","debug-pco-resource-note":"debug-pco-resource-note-N5xyf","debug-pco-resource-json":"debug-pco-resource-json-Rx-JI"};
+
+function isPresent(value) {
+  return value !== undefined && value.trim() !== "";
+}
+function describeTag(tagName, value) {
+  if (value === undefined) return `No pco:${tagName} meta tag found on this page`;
+  if (value.trim() === "") return `pco:${tagName} meta tag is present but malformed (empty)`;
+  return value;
+}
+// A `pco:resource` value looks like `<product>/v2/<resource_type>/<id>`. The
+// product segment doubles as the API subdomain/path, so a lookup only needs it.
+function pcrlLookupUrl(resource, env) {
+  const [product] = resource.split("/");
+  if (!product) return null;
+  const apiRoot = pcoApiUrl(product, {
+    env,
+    squiggly: false
+  });
+  const params = new URLSearchParams({
+    "where[pcrl]": resource
+  });
+  return `${apiRoot}/pcrl_lookup?${params.toString()}`;
+}
+function Field({
+  label,
+  value
+}) {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: styles$4["debug-pco-resource-field"]
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: styles$4["debug-pco-resource-field-label"]
+  }, label), /*#__PURE__*/React__default.createElement("span", {
+    className: styles$4["debug-pco-resource-field-value"]
+  }, value));
+}
+function DebugPcoResource({
+  env
+}) {
+  const {
+    recently_visitable: recentlyVisitable,
+    resource
+  } = usePcoMeta();
+  const [lookup, setLookup] = useState({
+    status: "idle"
+  });
+  const hasResource = isPresent(resource);
+  const hasRecentlyVisitable = isPresent(recentlyVisitable);
+  useEffect(() => {
+    // pco:resource is the more specific signal, so it always wins when both
+    // tags are present.
+    const url = hasResource ? pcrlLookupUrl(resource, env) : null;
+    if (!url) {
+      setLookup({
+        status: "idle"
+      });
+      return undefined;
+    }
+    let cancelled = false;
+    setLookup({
+      status: "loading"
+    });
+    apiRequest(defaultFetch, url).then(({
+      json,
+      ok,
+      response
+    }) => {
+      if (cancelled) return;
+      if (ok) {
+        setLookup({
+          json,
+          status: "loaded"
+        });
+      } else {
+        setLookup({
+          message: `pcrl_lookup request failed${response ? ` (${response.status})` : ""}`,
+          status: "error"
+        });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [resource, env, hasResource]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: styles$4["debug-pco-resource"]
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: styles$4["debug-pco-resource-header"]
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: styles$4["debug-pco-resource-badge"]
+  }, "Staff"), /*#__PURE__*/React__default.createElement("span", {
+    className: styles$4["debug-pco-resource-title"]
+  }, "Recently Visited debug")), /*#__PURE__*/React__default.createElement(Field, {
+    label: "pco:resource",
+    value: describeTag("resource", resource)
+  }), /*#__PURE__*/React__default.createElement(Field, {
+    label: "pco:recently_visitable",
+    value: describeTag("recently_visitable", recentlyVisitable)
+  }), !hasResource && !hasRecentlyVisitable && (/*#__PURE__*/React__default.createElement("p", {
+    className: styles$4["debug-pco-resource-note"]
+  }, "This page is not eligible for Recently Visited")), hasResource && hasRecentlyVisitable && (/*#__PURE__*/React__default.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__default.createElement("p", {
+    className: styles$4["debug-pco-resource-note"]
+  }, "Looking up resource\u2026")), hasResource && lookup.status === "error" && (/*#__PURE__*/React__default.createElement("p", {
+    className: styles$4["debug-pco-resource-note"]
+  }, lookup.message)), hasResource && lookup.status === "loaded" && (/*#__PURE__*/React__default.createElement("pre", {
+    className: styles$4["debug-pco-resource-json"]
+  }, JSON.stringify(lookup.json, null, 2))), !hasResource && hasRecentlyVisitable && (/*#__PURE__*/React__default.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"};
 
 function Drawer({
@@ -4080,7 +4242,9 @@ function UserProfile({
   }, "Log out"), /*#__PURE__*/React__default.createElement(Icon, {
     name: "general.intoBox",
     fill: "var(--t-icon-color-secondary)"
-  })))), hasConnectedPeople && (/*#__PURE__*/React__default.createElement(StackView$2, {
+  })))), env !== "production" && /*#__PURE__*/React__default.createElement(DebugPcoResource, {
+    env: env
+  }), hasConnectedPeople && (/*#__PURE__*/React__default.createElement(StackView$2, {
     mediaQueries: {
       sm: {
         display: "none"
@@ -5300,45 +5464,6 @@ const Notifications = {
   name: "Notifications"
 };
 
-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;
-  observer.observe(document.head, {
-    attributes: true,
-    childList: true,
-    subtree: true
-  });
-}
-function usePcoMeta() {
-  observe();
-  return useSyncExternalStore(store.subscribe, () => store.getState());
-}
-
 const {
   LoadingIndicator,
   StackView