@planningcenter/topbar 12.2.5 → 12.2.6-rc.0

package/dist/topbar.umd.js

@@ -27,7 +27,7 @@
   var people__namespace = /*#__PURE__*/_interopNamespaceDefault(people);
   var toolbar__namespace = /*#__PURE__*/_interopNamespaceDefault(toolbar);
 
-  var styles$d = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
+  var styles$e = {"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$d["accessibility-toolbar"]
+      className: styles$e["accessibility-toolbar"]
     }, /*#__PURE__*/React.createElement(tapestry.Link, {
       href: "#main-content",
       kind: "primary",
@@ -356,11 +356,11 @@
     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.createElement("svg", {
-      className: styles$c["announcement-icon"],
+      className: styles$d["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$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,
@@ -494,7 +494,7 @@
           backgroundSize: "cover"
         } : undefined
       }, !isPromo && /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
-        className: styles$c["announcement-content"],
+        className: styles$d["announcement-content"],
         style: style,
         ...platformProps
       }));
@@ -543,7 +543,7 @@
     const isPromo = variant === "promo";
     return /*#__PURE__*/React.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.createElement(X, {
       fill: isPromo ? "currentColor" : "white",
@@ -623,9 +623,9 @@
         ...platformProps
       } = this.props;
       return /*#__PURE__*/React.createElement("div", {
-        className: styles$c["announcement"]
+        className: styles$d["announcement"]
       }, /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
-        className: styles$c["announcement-content"],
+        className: styles$d["announcement-content"],
         style: style,
         ...platformProps
       }));
@@ -636,7 +636,7 @@
   }) {
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: styles$c.dismiss,
+      className: styles$d.dismiss,
       ...props
     }, /*#__PURE__*/React.createElement(X, {
       fill: "white",
@@ -1883,7 +1883,7 @@
     })) : (/*#__PURE__*/React.createElement("div", null, "appName not supported"));
   }
 
-  var styles$b = {"unbutton":"unbutton-lEbTR"};
+  var styles$c = {"unbutton":"unbutton-lEbTR"};
 
   function Unbutton({
     className,
@@ -1892,7 +1892,7 @@
     ...nativeProps
   }) {
     return /*#__PURE__*/React.createElement("button", {
-      className: classnames(styles$b.unbutton, className),
+      className: classnames(styles$c.unbutton, className),
       style: {
         ...style
       },
@@ -1901,7 +1901,7 @@
     });
   }
 
-  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,
@@ -1916,8 +1916,8 @@
       "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,
@@ -1926,7 +1926,7 @@
       appName: "Accounts",
       colors: colors
     }), /*#__PURE__*/React.createElement("div", {
-      className: styles$a["button-accounts"]
+      className: styles$b["button-accounts"]
     }, "Account settings"))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorAppIcon, {
       appName: appName.replace(/[\s-]/, "")
     }), /*#__PURE__*/React.createElement(MonoAppName, {
@@ -1934,7 +1934,7 @@
       key: "mono-app-name",
       size: 24
     }))), /*#__PURE__*/React.createElement(DisclosureChevronIcon, {
-      className: styles$a.chevron,
+      className: styles$b.chevron,
       key: "disclosure-chevron-icon"
     }));
   };
@@ -2022,7 +2022,7 @@
     flex: "1 1 auto"
   };
 
-  var styles$9 = {"popup":"popup-sJ-Nv"};
+  var styles$a = {"popup":"popup-sJ-Nv"};
 
   const HoverableListItem = ({
     active = false,
@@ -2079,7 +2079,7 @@
     }
   }
 
-  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,
@@ -2087,8 +2087,8 @@
     isVisible,
     ...nativeProps
   }) => (/*#__PURE__*/React.createElement(C, {
-    className: classnames(styles$8.popup, {
-      [styles$8["is-visible"]]: isVisible
+    className: classnames(styles$9.popup, {
+      [styles$9["is-visible"]]: isVisible
     }, className),
     ...nativeProps
   }));
@@ -2096,7 +2096,7 @@
   const PopupRoot = ({
     ...nativeProps
   }) => (/*#__PURE__*/React.createElement("div", {
-    className: styles$8["popup-root"],
+    className: styles$9["popup-root"],
     ...nativeProps
   }));
 
@@ -2136,7 +2136,7 @@
       cleanup: !visible,
       component: Outsider,
       onOutsideClick: toggle,
-      className: styles$9.popup,
+      className: styles$a.popup,
       isVisible: visible
     }, /*#__PURE__*/React.createElement("menu", {
       ref: menuRef,
@@ -3032,9 +3032,9 @@ true;
     `), 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,
@@ -3053,7 +3053,7 @@ true;
       component: Outsider,
       onOutsideClick: () => setUserMenuVisible(false),
       cleanup: !userMenuVisible,
-      className: styles$6.popup,
+      className: styles$7.popup,
       isVisible: userMenuVisible
     }, /*#__PURE__*/React.createElement("div", null, hasConnectedPeople ? (/*#__PURE__*/React.createElement("div", {
       style: {
@@ -3197,11 +3197,11 @@ true;
     userMenuVisible
   }) => {
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$6["trigger-wrap"],
+      className: styles$7["trigger-wrap"],
       "data-pendo": "topbar-org-switcher"
     }, /*#__PURE__*/React.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",
@@ -3213,7 +3213,7 @@ true;
         requestConnectedPeopleFetch();
       }
     }, showOrgName && (/*#__PURE__*/React.createElement("span", {
-      className: styles$6["trigger-orgname"]
+      className: styles$7["trigger-orgname"]
     }, orgName)), /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)));
   };
 
@@ -3270,7 +3270,7 @@ true;
       },
       appName: props.appName
     }), /*#__PURE__*/React.createElement("div", {
-      className: styles$7["apps-routes-separator"]
+      className: styles$8["apps-routes-separator"]
     }), routesVisible && props.routes, /*#__PURE__*/React.createElement("div", {
       style: {
         margin: "auto"
@@ -3308,12 +3308,12 @@ true;
     ...nativeProps
   }) => {
     return /*#__PURE__*/React.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,
@@ -3323,7 +3323,7 @@ true;
   }) {
     const url = incomingUrl || `${pcoUrl$1(env)("people")}/static/no_photo_thumbnail_gray.svg`;
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$5.avatar,
+      className: styles$6.avatar,
       style: {
         backgroundImage: `url(${url})`,
         ...style
@@ -3345,14 +3345,14 @@ true;
     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.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)
@@ -3375,7 +3375,7 @@ true;
   }) => (/*#__PURE__*/React.createElement("button", {
     "aria-label": "Close menu",
     type: "button",
-    className: styles$4["appmenu-close-button"],
+    className: styles$5["appmenu-close-button"],
     style: style
   }, /*#__PURE__*/React.createElement(X, {
     fill: color,
@@ -3456,7 +3456,7 @@ true;
       "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();
@@ -3466,12 +3466,12 @@ true;
     }, /*#__PURE__*/React.createElement(ColorAppIcon, {
       appName: props.appName.replace(/[\s-]/, "")
     })), routesMenuVisible && (/*#__PURE__*/React.createElement("div", {
-      className: styles$4["routes"]
+      className: styles$5["routes"]
     }, props.routes)), /*#__PURE__*/React.createElement(ClientStorage, {
       item: "Topbar:Small:Menus:Products:visibility",
       render: () => (/*#__PURE__*/React.createElement("div", {
         ref: appMenuRef,
-        className: styles$4["appmenu-layer"],
+        className: styles$5["appmenu-layer"],
         style: {
           ...(productSwitcherVisible && {
             display: "block"
@@ -3490,44 +3490,44 @@ true;
             e.stopPropagation();
           }
         },
-        className: styles$4["appmenu-container"]
+        className: styles$5["appmenu-container"]
       }, /*#__PURE__*/React.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.createElement(UserMenuAppLockup, {
         appName: homeProduct ? homeProduct.name : props.appName
       })), /*#__PURE__*/React.createElement("div", {
-        className: styles$4["appmenu-scroll"]
+        className: styles$5["appmenu-scroll"]
       }, /*#__PURE__*/React.createElement("ul", {
         "data-pendo": "app-switcher",
-        className: styles$4["appmenu-list"]
+        className: styles$5["appmenu-list"]
       }, appsMenuFormatter(restProducts).map(({
         name
       }) => (/*#__PURE__*/React.createElement("li", {
         key: name,
-        className: styles$4["appmenu-list-li"]
+        className: styles$5["appmenu-list-li"]
       }, /*#__PURE__*/React.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.createElement(UserMenuAppLockup, {
         appName: name
       }))))), accountsProduct && (/*#__PURE__*/React.createElement("li", {
-        className: styles$4["appmenu-list-li"]
+        className: styles$5["appmenu-list-li"]
       }, /*#__PURE__*/React.createElement(AccountSettingsLink, {
         env: props.env
       }))))))))
     }), /*#__PURE__*/React.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);
@@ -3535,7 +3535,7 @@ true;
       } : null
     }, /*#__PURE__*/React.createElement(CurrentRouteComponent, null, capitalize(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: styles$4["profile-button"],
+      className: styles$5["profile-button"],
       onClick: () => {
         var _a, _b;
         props.requestConnectedPeopleFetch();
@@ -3551,7 +3551,7 @@ true;
     className,
     ...props
   }) => (/*#__PURE__*/React.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
   }));
 
@@ -3690,6 +3690,168 @@ 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) {
+    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 = pcoUrl$1.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.createElement("div", {
+      className: styles$4["debug-pco-resource-field"]
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles$4["debug-pco-resource-field-label"]
+    }, label), /*#__PURE__*/React.createElement("span", {
+      className: styles$4["debug-pco-resource-field-value"]
+    }, value));
+  }
+  function DebugPcoResource({
+    env
+  }) {
+    const {
+      recently_visitable: recentlyVisitable,
+      resource
+    } = usePcoMeta();
+    const [lookup, setLookup] = React.useState({
+      status: "idle"
+    });
+    const hasResource = isPresent(resource);
+    const hasRecentlyVisitable = isPresent(recentlyVisitable);
+    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;
+      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.createElement("div", {
+      className: styles$4["debug-pco-resource"]
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles$4["debug-pco-resource-header"]
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles$4["debug-pco-resource-badge"]
+    }, "Staff"), /*#__PURE__*/React.createElement("span", {
+      className: styles$4["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"};
 
   function Drawer({
@@ -4090,7 +4252,9 @@ true;
     }, "Log out"), /*#__PURE__*/React.createElement(tapestryReact.Icon, {
       name: "general.intoBox",
       fill: "var(--t-icon-color-secondary)"
-    })))), hasConnectedPeople && (/*#__PURE__*/React.createElement(tapestryReact.StackView, {
+    })))), env !== "production" && /*#__PURE__*/React.createElement(DebugPcoResource, {
+      env: env
+    }), hasConnectedPeople && (/*#__PURE__*/React.createElement(tapestryReact.StackView, {
       mediaQueries: {
         sm: {
           display: "none"
@@ -5310,45 +5474,6 @@ true;
     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 shim.useSyncExternalStore(store.subscribe, () => store.getState());
-  }
-
   const {
     LoadingIndicator,
     StackView