@planningcenter/topbar 12.1.2 → 12.2.0-rc.1

package/dist/topbar.umd.js

@@ -27,7 +27,7 @@
   var people__namespace = /*#__PURE__*/_interopNamespaceDefault(people);
   var toolbar__namespace = /*#__PURE__*/_interopNamespaceDefault(toolbar);
 
-  var styles$c = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
+  var styles$d = {"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$c["accessibility-toolbar"]
+      className: styles$d["accessibility-toolbar"]
     }, /*#__PURE__*/React.createElement(tapestry.Link, {
       href: "#main-content",
       kind: "primary",
@@ -356,11 +356,11 @@
     fill: fill
   })));
 
-  var styles$b = {"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$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"};
 
   function AnnouncementIcon() {
     return /*#__PURE__*/React.createElement("svg", {
-      className: styles$b["announcement-icon"],
+      className: styles$c["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$b["announcement"], styles$b[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
+        className: classnames(styles$c["announcement"], styles$c[`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$b["announcement-content"],
+        className: styles$c["announcement-content"],
         style: style,
         ...platformProps
       }));
@@ -543,7 +543,7 @@
     const isPromo = variant === "promo";
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: classnames(styles$b.dismiss, isPromo && styles$b["dismiss--promo"]),
+      className: classnames(styles$c.dismiss, isPromo && styles$c["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$b["announcement"]
+        className: styles$c["announcement"]
       }, /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
-        className: styles$b["announcement-content"],
+        className: styles$c["announcement-content"],
         style: style,
         ...platformProps
       }));
@@ -636,7 +636,7 @@
   }) {
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: styles$b.dismiss,
+      className: styles$c.dismiss,
       ...props
     }, /*#__PURE__*/React.createElement(X, {
       fill: "white",
@@ -1883,7 +1883,7 @@
     })) : (/*#__PURE__*/React.createElement("div", null, "appName not supported"));
   }
 
-  var styles$a = {"unbutton":"unbutton-lEbTR"};
+  var styles$b = {"unbutton":"unbutton-lEbTR"};
 
   function Unbutton({
     className,
@@ -1892,7 +1892,7 @@
     ...nativeProps
   }) {
     return /*#__PURE__*/React.createElement("button", {
-      className: classnames(styles$a.unbutton, className),
+      className: classnames(styles$b.unbutton, className),
       style: {
         ...style
       },
@@ -1901,7 +1901,7 @@
     });
   }
 
-  var styles$9 = {"button":"button-XMbeQ","button-accounts":"button-accounts-nNh-z","chevron":"chevron-RRg9k","is-expanded":"is-expanded-zD0A0"};
+  var styles$a = {"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$9.button, {
-        [styles$9["is-expanded"]]: expanded
+      className: classnames(styles$a.button, {
+        [styles$a["is-expanded"]]: expanded
       }),
       type: "button",
       style: style,
@@ -1926,7 +1926,7 @@
       appName: "Accounts",
       colors: colors
     }), /*#__PURE__*/React.createElement("div", {
-      className: styles$9["button-accounts"]
+      className: styles$a["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$9.chevron,
+      className: styles$a.chevron,
       key: "disclosure-chevron-icon"
     }));
   };
@@ -2022,7 +2022,7 @@
     flex: "1 1 auto"
   };
 
-  var styles$8 = {"popup":"popup-sJ-Nv"};
+  var styles$9 = {"popup":"popup-sJ-Nv"};
 
   const HoverableListItem = ({
     active = false,
@@ -2079,7 +2079,7 @@
     }
   }
 
-  var styles$7 = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
+  var styles$8 = {"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$7.popup, {
-      [styles$7["is-visible"]]: isVisible
+    className: classnames(styles$8.popup, {
+      [styles$8["is-visible"]]: isVisible
     }, className),
     ...nativeProps
   }));
@@ -2096,7 +2096,7 @@
   const PopupRoot = ({
     ...nativeProps
   }) => (/*#__PURE__*/React.createElement("div", {
-    className: styles$7["popup-root"],
+    className: styles$8["popup-root"],
     ...nativeProps
   }));
 
@@ -2136,7 +2136,7 @@
       cleanup: !visible,
       component: Outsider,
       onOutsideClick: toggle,
-      className: styles$8.popup,
+      className: styles$9.popup,
       isVisible: visible
     }, /*#__PURE__*/React.createElement("menu", {
       ref: menuRef,
@@ -3032,9 +3032,9 @@ true;
     `), children);
   }
 
-  var styles$6 = {"route":"route--8BWe","is-active":"is-active-FsU9Y","apps-routes-separator":"apps-routes-separator-Nlm-N"};
+  var styles$7 = {"route":"route--8BWe","is-active":"is-active-FsU9Y","apps-routes-separator":"apps-routes-separator-Nlm-N"};
 
-  var styles$5 = {"popup":"popup-mDNKn","trigger-wrap":"trigger-wrap-Jd-KR","trigger":"trigger-WgRT5","is-visible":"is-visible-GZC0-","trigger-orgname":"trigger-orgname-TDHCc"};
+  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"};
 
   const UserMenu = ({
     appName,
@@ -3053,7 +3053,7 @@ true;
       component: Outsider,
       onOutsideClick: () => setUserMenuVisible(false),
       cleanup: !userMenuVisible,
-      className: styles$5.popup,
+      className: styles$6.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$5["trigger-wrap"],
+      className: styles$6["trigger-wrap"],
       "data-pendo": "topbar-org-switcher"
     }, /*#__PURE__*/React.createElement(Hoverable, {
-      className: classnames(styles$5["trigger"], {
-        [styles$5["is-visible"]]: userMenuVisible
+      className: classnames(styles$6["trigger"], {
+        [styles$6["is-visible"]]: userMenuVisible
       }),
       component: "button",
       type: "button",
@@ -3213,7 +3213,7 @@ true;
         requestConnectedPeopleFetch();
       }
     }, showOrgName && (/*#__PURE__*/React.createElement("span", {
-      className: styles$5["trigger-orgname"]
+      className: styles$6["trigger-orgname"]
     }, orgName)), /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)));
   };
 
@@ -3270,7 +3270,7 @@ true;
       },
       appName: props.appName
     }), /*#__PURE__*/React.createElement("div", {
-      className: styles$6["apps-routes-separator"]
+      className: styles$7["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$6["route"], className, active && styles$6["is-active"]),
+      className: classnames(styles$7["route"], className, active && styles$7["is-active"]),
       ...nativeProps
     });
   };
 
-  var styles$4 = {"avatar":"avatar-tW-wn"};
+  var styles$5 = {"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$4.avatar,
+      className: styles$5.avatar,
       style: {
         backgroundImage: `url(${url})`,
         ...style
@@ -3345,14 +3345,14 @@ true;
     method: "localStorage"
   };
 
-  var styles$3 = {"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$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"};
 
   function AccountSettingsLink({
     env
   }) {
     const accountsName = "accounts";
     return /*#__PURE__*/React.createElement("a", {
-      className: classnames(styles$3["appmenu-list-a"], styles$3["appmenu-list-a--bottom"]),
+      className: classnames(styles$4["appmenu-list-a"], styles$4["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$3["appmenu-close-button"],
+    className: styles$4["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$3["appmenu-button"],
+      className: styles$4["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$3["routes"]
+      className: styles$4["routes"]
     }, props.routes)), /*#__PURE__*/React.createElement(ClientStorage, {
       item: "Topbar:Small:Menus:Products:visibility",
       render: () => (/*#__PURE__*/React.createElement("div", {
         ref: appMenuRef,
-        className: styles$3["appmenu-layer"],
+        className: styles$4["appmenu-layer"],
         style: {
           ...(productSwitcherVisible && {
             display: "block"
@@ -3490,44 +3490,44 @@ true;
             e.stopPropagation();
           }
         },
-        className: styles$3["appmenu-container"]
+        className: styles$4["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$3["appmenu-list-a"], styles$3["appmenu-list-a--top"]),
+        className: classnames(styles$4["appmenu-list-a"], styles$4["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$3["appmenu-scroll"]
+        className: styles$4["appmenu-scroll"]
       }, /*#__PURE__*/React.createElement("ul", {
         "data-pendo": "app-switcher",
-        className: styles$3["appmenu-list"]
+        className: styles$4["appmenu-list"]
       }, appsMenuFormatter(restProducts).map(({
         name
       }) => (/*#__PURE__*/React.createElement("li", {
         key: name,
-        className: styles$3["appmenu-list-li"]
+        className: styles$4["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$3["appmenu-list-a"],
+        className: styles$4["appmenu-list-a"],
         href: pcoUrl$1(props.env)("accounts") + getAppsSwitchProductPath(name)
       }, /*#__PURE__*/React.createElement(UserMenuAppLockup, {
         appName: name
       }))))), accountsProduct && (/*#__PURE__*/React.createElement("li", {
-        className: styles$3["appmenu-list-li"]
+        className: styles$4["appmenu-list-li"]
       }, /*#__PURE__*/React.createElement(AccountSettingsLink, {
         env: props.env
       }))))))))
     }), /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: classnames(styles$3["current-route"], {
-        [styles$3["is-active"]]: routesMenuVisible
+      className: classnames(styles$4["current-route"], {
+        [styles$4["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$3["profile-button"],
+      className: styles$4["profile-button"],
       onClick: () => {
         var _a, _b;
         props.requestConnectedPeopleFetch();
@@ -3551,7 +3551,7 @@ true;
     className,
     ...props
   }) => (/*#__PURE__*/React.createElement("a", {
-    className: classnames(styles$3["route"], className, active && styles$3["is-active"]),
+    className: classnames(styles$4["route"], className, active && styles$4["is-active"]),
     ...props
   }));
 
@@ -3690,7 +3690,7 @@ true;
     id: "topbar"
   };
 
-  var styles$2 = {"drawer-wrap":"drawer-wrap-J0rSL","is-visible":"is-visible-KTME8","drawer":"drawer-j7f4l"};
+  var styles$3 = {"drawer-wrap":"drawer-wrap-J0rSL","is-visible":"is-visible-KTME8","drawer":"drawer-j7f4l"};
 
   function Drawer({
     children,
@@ -3698,7 +3698,7 @@ true;
   }) {
     return /*#__PURE__*/React.createElement("div", {
       id: id,
-      className: styles$2["drawer"]
+      className: styles$3["drawer"]
     }, children);
   }
   function DrawerWrap({
@@ -3708,7 +3708,7 @@ true;
     ...props
   }) {
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames(styles$2["drawer-wrap"], className, isVisible && styles$2["is-visible"]),
+      className: classnames(styles$3["drawer-wrap"], className, isVisible && styles$3["is-visible"]),
       ...props
     }, children);
   }
@@ -3892,7 +3892,7 @@ true;
     }));
   };
 
-  var styles$1 = {"color-mode-switcher":"color-mode-switcher-JpczO","color-mode-switcher-label":"color-mode-switcher-label-3jPM2","color-mode-switcher-modes":"color-mode-switcher-modes-u-bic"};
+  var styles$2 = {"color-mode-switcher":"color-mode-switcher-JpczO","color-mode-switcher-label":"color-mode-switcher-label-3jPM2","color-mode-switcher-modes":"color-mode-switcher-modes-u-bic"};
 
   const COLOR_MODES = [{
     label: "Light",
@@ -3912,11 +3912,11 @@ true;
     const updateStore = useUpdateStore();
     const [counter] = React.useState(() => COLOR_MODE_INSTANCE_COUNTER++);
     return /*#__PURE__*/React.createElement("fieldset", {
-      className: styles$1["color-mode-switcher"]
+      className: styles$2["color-mode-switcher"]
     }, /*#__PURE__*/React.createElement("legend", {
-      className: styles$1["color-mode-switcher-label"]
+      className: styles$2["color-mode-switcher-label"]
     }, "Appearance", " "), /*#__PURE__*/React.createElement("div", {
-      className: styles$1["color-mode-switcher-modes"]
+      className: styles$2["color-mode-switcher-modes"]
     }, COLOR_MODES.map(({
       value,
       label
@@ -4187,20 +4187,225 @@ true;
     ...overrides
   });
 
-  var styles = {"toolbar":"toolbar-KHJR5","toolbar-button":"toolbar-button-Ye4h5","is-current":"is-current-DZK47","toolbar-button--avatar":"toolbar-button--avatar-5FUik","toolbar-button--home":"toolbar-button--home-Pthd0"};
+  var styles$1 = {"toolbar":"toolbar-KHJR5","toolbar-button":"toolbar-button-Ye4h5","is-current":"is-current-DZK47","toolbar-button--avatar":"toolbar-button--avatar-5FUik","toolbar-button--home":"toolbar-button--home-Pthd0"};
 
   const pcoUrl = pcoUrl$1;
 
-  // The route rides in the iframe URL fragment (`…/topbar#conversations/abc`),
-  // not the path, so updating it is a same-document navigation that doesn't
-  // reload the iframe, but also lets the route survive a forced reload (e.g.
-  // Turbo re-parenting the topbar).
-  function buildPicobotSrc(origin, path) {
-    const [rawPath, queryPart] = path.replace(/^\/+/, "").split("?", 2);
-    const safePath = rawPath.split("/").filter(segment => segment && segment !== "." && segment !== "..").join("/");
-    const fragment = queryPart !== undefined ? `${safePath}?${queryPart}` : safePath;
-    const base = new URL("topbar", origin).toString();
-    return fragment ? `${base}#${fragment}` : base;
+  var styles = {"banner":"banner-YfQ37","content":"content-lNjWf","icon":"icon-abz7q","iconShape":"iconShape-6uyot","iconSparkle":"iconSparkle-t0OzK","text":"text--Vlhl","title":"title-zOEOR","subtitle":"subtitle-ufLnk","chevron":"chevron-oOUA-"};
+
+  function AskAIBanner({
+    onClick
+  }) {
+    return /*#__PURE__*/React.createElement("button", {
+      className: styles.banner,
+      onClick: () => onClick(),
+      type: "button"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.content
+    }, /*#__PURE__*/React.createElement(AskAIIcon, null), /*#__PURE__*/React.createElement("span", {
+      className: styles.text
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.title
+    }, "Ask AI"), /*#__PURE__*/React.createElement("span", {
+      className: styles.subtitle
+    }, "Support answers tailored to you"))), /*#__PURE__*/React.createElement(tapestryReact.Icon, {
+      className: styles.chevron,
+      name: "general.rightChevron",
+      size: "16px"
+    }));
+  }
+  const SQUIRCLE_PATH = "M15.9994 0C3.19766 0 0 3.20025 0 16C0 28.7998 3.19766 32 15.9994 32C28.8011 32 32 28.8022 32 16C32 3.19779 28.7999 0 15.9994 0Z";
+  const SQUIRCLE_BORDER_PATH = "M15.999 0.222656C22.4009 0.222656 26.3132 1.0274 28.6426 3.35645C30.972 5.68549 31.7773 9.59729 31.7773 16C31.7773 22.4025 30.9726 26.3145 28.6436 28.6436C26.3143 30.9726 22.4015 31.7773 15.999 31.7773C9.5968 31.7773 5.68536 30.9719 3.35645 28.6426C1.02748 26.3132 0.222656 22.4015 0.222656 16C0.222656 9.59851 1.02748 5.68678 3.35645 3.35742C5.68536 1.02814 9.5968 0.222687 15.999 0.222656Z";
+  // Monotonic counter for per-instance SVG ids. useId would be tidier but isn't
+  // available on React 17, which our peer range still supports.
+  let iconInstanceCount = 0;
+  function AskAIIcon() {
+    const [uid] = React.useState(() => `ask-ai-icon-${iconInstanceCount++}`);
+    const maskId = `${uid}-mask`;
+    const blur = n => `${uid}-blur-${n}`;
+    const borderA = `${uid}-border-a`;
+    const borderB = `${uid}-border-b`;
+    return /*#__PURE__*/React.createElement("span", {
+      className: styles.icon
+    }, /*#__PURE__*/React.createElement("svg", {
+      className: styles.iconShape,
+      viewBox: "0 0 32 32",
+      fill: "none",
+      "aria-hidden": "true"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: SQUIRCLE_PATH,
+      fill: "white"
+    }), /*#__PURE__*/React.createElement("mask", {
+      id: maskId,
+      style: {
+        maskType: "alpha"
+      },
+      maskUnits: "userSpaceOnUse",
+      x: "0",
+      y: "0",
+      width: "32",
+      height: "32"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: SQUIRCLE_PATH,
+      fill: "#939393"
+    })), /*#__PURE__*/React.createElement("g", {
+      mask: `url(#${maskId})`
+    }, /*#__PURE__*/React.createElement("g", {
+      filter: `url(#${blur(0)})`
+    }, /*#__PURE__*/React.createElement("ellipse", {
+      cx: "24.2268",
+      cy: "23.7824",
+      rx: "17.9331",
+      ry: "31.1883",
+      transform: "rotate(-135 24.2268 23.7824)",
+      fill: "#B883E2"
+    })), /*#__PURE__*/React.createElement("g", {
+      filter: `url(#${blur(1)})`
+    }, /*#__PURE__*/React.createElement("ellipse", {
+      cx: "7.05187",
+      cy: "9.27409",
+      rx: "14.9017",
+      ry: "29.437",
+      transform: "rotate(45 7.05187 9.27409)",
+      fill: "#74A3FF"
+    })), /*#__PURE__*/React.createElement("g", {
+      filter: `url(#${blur(2)})`
+    }, /*#__PURE__*/React.createElement("ellipse", {
+      cx: "29.7552",
+      cy: "31.0886",
+      rx: "11.2869",
+      ry: "15.1567",
+      transform: "rotate(-135 29.7552 31.0886)",
+      fill: "#F28B54"
+    })), /*#__PURE__*/React.createElement("g", {
+      filter: `url(#${blur(3)})`
+    }, /*#__PURE__*/React.createElement("ellipse", {
+      cx: "3.58734",
+      cy: "4.03178",
+      rx: "11.2869",
+      ry: "15.1567",
+      transform: "rotate(45 3.58734 4.03178)",
+      fill: "#24D7B7"
+    })), /*#__PURE__*/React.createElement("g", {
+      filter: `url(#${blur(4)})`
+    }, /*#__PURE__*/React.createElement("ellipse", {
+      cx: "32.0363",
+      cy: "32.0363",
+      rx: "5.65576",
+      ry: "7.59487",
+      transform: "rotate(-135 32.0363 32.0363)",
+      fill: "#FFBC40"
+    })), /*#__PURE__*/React.createElement("g", {
+      filter: `url(#${blur(5)})`
+    }, /*#__PURE__*/React.createElement("ellipse", {
+      cx: "1.00513",
+      cy: "-0.772657",
+      rx: "5.1403",
+      ry: "6.82216",
+      transform: "rotate(-135 1.00513 -0.772657)",
+      fill: "#70FFD4"
+    })), /*#__PURE__*/React.createElement("path", {
+      d: SQUIRCLE_BORDER_PATH,
+      stroke: `url(#${borderA})`,
+      strokeWidth: "0.444444"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: SQUIRCLE_BORDER_PATH,
+      stroke: `url(#${borderB})`,
+      strokeWidth: "0.444444"
+    })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+      id: blur(0),
+      x: "-20.7722",
+      y: "-21.2166",
+      width: "89.9981",
+      height: "89.9981",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/React.createElement("feGaussianBlur", {
+      stdDeviation: "9.77778"
+    })), /*#__PURE__*/React.createElement("filter", {
+      id: blur(1),
+      x: "-35.839",
+      y: "-33.6167",
+      width: "85.7816",
+      height: "85.7816",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/React.createElement("feGaussianBlur", {
+      stdDeviation: "9.77778"
+    })), /*#__PURE__*/React.createElement("filter", {
+      id: blur(2),
+      x: "-3.16378",
+      y: "-1.83045",
+      width: "65.838",
+      height: "65.838",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/React.createElement("feGaussianBlur", {
+      stdDeviation: "9.77778"
+    })), /*#__PURE__*/React.createElement("filter", {
+      id: blur(3),
+      x: "-29.3317",
+      y: "-28.8872",
+      width: "65.838",
+      height: "65.838",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/React.createElement("feGaussianBlur", {
+      stdDeviation: "9.77778"
+    })), /*#__PURE__*/React.createElement("filter", {
+      id: blur(4),
+      x: "16.4511",
+      y: "16.4511",
+      width: "31.1704",
+      height: "31.1704",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/React.createElement("feGaussianBlur", {
+      stdDeviation: "4.44444"
+    })), /*#__PURE__*/React.createElement("filter", {
+      id: blur(5),
+      x: "-13.9242",
+      y: "-15.7019",
+      width: "29.8586",
+      height: "29.8586",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/React.createElement("feGaussianBlur", {
+      stdDeviation: "4.44444"
+    })), /*#__PURE__*/React.createElement("linearGradient", {
+      id: borderA,
+      x1: "4.22222",
+      y1: "2.44444",
+      x2: "16",
+      y2: "14.4444",
+      gradientUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("stop", {
+      stopColor: "#62FAFF"
+    }), /*#__PURE__*/React.createElement("stop", {
+      offset: "1",
+      stopColor: "#55AFD6",
+      stopOpacity: "0"
+    })), /*#__PURE__*/React.createElement("linearGradient", {
+      id: borderB,
+      x1: "28.4444",
+      y1: "29.3333",
+      x2: "22.8889",
+      y2: "22.4444",
+      gradientUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("stop", {
+      stopColor: "#FFA961"
+    }), /*#__PURE__*/React.createElement("stop", {
+      offset: "1",
+      stopColor: "#D48B91",
+      stopOpacity: "0"
+    })))), /*#__PURE__*/React.createElement("svg", {
+      className: styles.iconSparkle,
+      viewBox: "0 0 19.4995 17.9999",
+      "aria-hidden": "true"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M2.71191 12.2002C2.81068 11.9333 3.18834 11.9333 3.2871 12.2002L3.84375 13.7031C3.92138 13.9129 4.08707 14.0786 4.29687 14.1562L5.7998 14.7119C6.06662 14.8107 6.06648 15.1882 5.7998 15.2871L4.29687 15.8437C4.08707 15.9214 3.92138 16.0871 3.84375 16.2969L3.2871 17.7998C3.18821 18.0665 2.81066 18.0666 2.71191 17.7998L2.15625 16.2969C2.07861 16.0871 1.91292 15.9214 1.70312 15.8437L0.200191 15.2871C-0.0667302 15.1883 -0.0667302 14.8107 0.200191 14.7119L1.70312 14.1562C1.91292 14.0786 2.07861 13.9129 2.15625 13.7031L2.71191 12.2002ZM11.2812 2C11.5283 1.33313 12.4717 1.33305 12.7187 2L14.1094 5.75878C14.3035 6.28304 14.7169 6.69659 15.2412 6.89062L18.999 8.28125C19.6663 8.52817 19.6663 9.47182 18.999 9.71875L15.2412 11.1094C14.7168 11.3035 14.3035 11.7168 14.1094 12.2412L12.7187 15.999C12.4718 16.6663 11.5282 16.6663 11.2812 15.999L9.89062 12.2412C9.69659 11.7169 9.28304 11.3035 8.75878 11.1094L5 9.71875C4.33305 9.47173 4.33312 8.52834 5 8.28125L8.75878 6.89062C9.28299 6.69653 9.69653 6.28299 9.89062 5.75878L11.2812 2ZM2.71191 0.200191C2.81068 -0.0667302 3.18834 -0.0667302 3.2871 0.200191L3.84375 1.70312C3.92138 1.91292 4.08707 2.07861 4.29687 2.15625L5.7998 2.71191C6.06662 2.81066 6.06648 3.18821 5.7998 3.2871L4.29687 3.84375C4.08707 3.92138 3.92138 4.08707 3.84375 4.29687L3.2871 5.7998C3.18821 6.06648 2.81066 6.06662 2.71191 5.7998L2.15625 4.29687C2.07861 4.08707 1.91292 3.92138 1.70312 3.84375L0.200191 3.2871C-0.0667302 3.18834 -0.0667302 2.81068 0.200191 2.71191L1.70312 2.15625C1.91292 2.07861 2.07861 1.91292 2.15625 1.70312L2.71191 0.200191Z",
+      fill: "currentColor"
+    })));
   }
 
   // The article heading lives in the deepest populated hierarchy level (lvl0 is
@@ -4354,6 +4559,89 @@ true;
     }));
   };
 
+  // The route rides in the iframe URL fragment (`…/topbar#conversations/abc`),
+  // not the path, so updating it is a same-document navigation that doesn't
+  // reload the iframe, but also lets the route survive a forced reload (e.g.
+  // Turbo re-parenting the topbar).
+  function buildPicobotSrc(origin, path) {
+    const [rawPath, queryPart] = path.replace(/^\/+/, "").split("?", 2);
+    const safePath = rawPath.split("/").filter(segment => segment && segment !== "." && segment !== "..").join("/");
+    const fragment = queryPart !== undefined ? `${safePath}?${queryPart}` : safePath;
+    const base = new URL("topbar", origin).toString();
+    return fragment ? `${base}#${fragment}` : base;
+  }
+
+  const LOAD_TIMEOUT_MS = 3000;
+  function createPicobotIframe(picobotOrigin) {
+    return /*#__PURE__*/React.forwardRef(function PicobotIframe({
+      currentPath: iframePath,
+      onChangePath: onIframeChangePath,
+      onMessage
+    }, ref) {
+      const iframeRef = React.useRef(null);
+      // Keep the fragment in sync in both directions—external opens (deeplink /
+      // Contact support) and picobot's own NEW_ROUTE_RENDERED reports—so it
+      // always reflects the live conversation. See buildPicobotSrc.
+      const [loadedPath, setLoadedPath] = React.useState(iframePath || "");
+      const hasReportedErrorRef = React.useRef(false);
+      const loadTimeoutRef = React.useRef();
+      const reportLoadError = React.useCallback(() => {
+        if (hasReportedErrorRef.current) return;
+        hasReportedErrorRef.current = true;
+        onMessage === null || onMessage === void 0 ? void 0 : onMessage({
+          type: "IFRAME_LOAD_ERROR"
+        });
+      }, [onMessage]);
+      React.useEffect(function armLoadTimeoutOnMount() {
+        const timeout = setTimeout(reportLoadError, LOAD_TIMEOUT_MS);
+        loadTimeoutRef.current = timeout;
+        return () => clearTimeout(timeout);
+      }, []);
+      React.useEffect(function subscribeToGuestMessages() {
+        function handleGuestMessage(e) {
+          var _a, _b, _c;
+          if (e.origin !== picobotOrigin) return;
+          if (!e.source || !iframeRef.current) return;
+          if (e.source !== iframeRef.current.contentWindow) return;
+          if (((_a = e.data) === null || _a === void 0 ? void 0 : _a.type) === "NEW_ROUTE_RENDERED" && onIframeChangePath) {
+            const reportedPath = String((_b = e.data.payload) !== null && _b !== void 0 ? _b : "");
+            setLoadedPath(reportedPath);
+            onIframeChangePath(reportedPath);
+          }
+          if (((_c = e.data) === null || _c === void 0 ? void 0 : _c.type) === "READY") clearTimeout(loadTimeoutRef.current);
+          if (onMessage) onMessage(e.data);
+        }
+        window.addEventListener("message", handleGuestMessage);
+        return () => window.removeEventListener("message", handleGuestMessage);
+      }, [onIframeChangePath, onMessage]);
+      React.useEffect(function syncLoadedPathFromProp() {
+        setLoadedPath(iframePath || "");
+      }, [iframePath]);
+      // A one-way channel for sending messages to picobot. Topbar just
+      // forwards the envelope to the iframe and holds no message semantics of
+      // its own—the consumer decides what to send and when.
+      React.useImperativeHandle(ref, () => ({
+        postMessage(message) {
+          var _a, _b;
+          (_b = (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage(message, picobotOrigin);
+        }
+      }), []);
+      const iframeSrc = buildPicobotSrc(picobotOrigin, loadedPath);
+      return /*#__PURE__*/React.createElement("iframe", {
+        ref: iframeRef,
+        src: iframeSrc,
+        allow: "clipboard-write",
+        style: {
+          border: 0,
+          flex: 1,
+          height: "100%",
+          width: "100%"
+        },
+        title: "Picobot"
+      });
+    });
+  }
+
   const {
     LoadingIndicator: LoadingIndicator$1,
     StackView: StackView$1
@@ -4379,52 +4667,7 @@ true;
     helpdeskConfig,
     onChangePath
   }) {
-    const PicobotIframe = React.useMemo(() => {
-      const picobotOrigin = pcoUrl(env)("picobot");
-      return function PicobotIframe({
-        currentPath: iframePath,
-        onChangePath: onIframeChangePath,
-        onMessage
-      }) {
-        const ref = React.useRef(null);
-        // Keep the fragment in sync in both directions—external opens (deeplink /
-        // Contact support) and picobot's own NEW_ROUTE_RENDERED reports—so it
-        // always reflects the live conversation. See buildPicobotSrc.
-        const [loadedPath, setLoadedPath] = React.useState(iframePath || "");
-        React.useEffect(() => {
-          if (!onIframeChangePath && !onMessage) return undefined;
-          const handler = e => {
-            var _a, _b;
-            if (e.origin !== picobotOrigin) return;
-            if (!e.source || !ref.current) return;
-            if (e.source !== ref.current.contentWindow) return;
-            if (((_a = e.data) === null || _a === void 0 ? void 0 : _a.type) === "NEW_ROUTE_RENDERED" && onIframeChangePath) {
-              const reportedPath = String((_b = e.data.payload) !== null && _b !== void 0 ? _b : "");
-              setLoadedPath(reportedPath);
-              onIframeChangePath(reportedPath);
-            }
-            if (onMessage) onMessage(e.data);
-          };
-          window.addEventListener("message", handler);
-          return () => window.removeEventListener("message", handler);
-        }, [onIframeChangePath, onMessage]);
-        React.useEffect(() => {
-          setLoadedPath(iframePath || "");
-        }, [iframePath]);
-        const iframeSrc = buildPicobotSrc(picobotOrigin, loadedPath);
-        return /*#__PURE__*/React.createElement("iframe", {
-          ref: ref,
-          src: iframeSrc,
-          style: {
-            border: 0,
-            flex: 1,
-            height: "100%",
-            width: "100%"
-          },
-          title: "Picobot"
-        });
-      };
-    }, [env]);
+    const PicobotIframe = React.useMemo(() => createPicobotIframe(pcoUrl(env)("picobot")), [env]);
     return /*#__PURE__*/React.createElement(addOns.UiExtensionFirstPartyComponent, {
       grow: 1,
       display: "flex",
@@ -4439,6 +4682,15 @@ true;
         spacing: 1
       }, /*#__PURE__*/React.createElement(DrawerHeading, null, "Help and support"), /*#__PURE__*/React.createElement(LoadingIndicator$1, null)))),
       additionalComponents: {
+        AskAIBanner: {
+          component: AskAIBanner,
+          properties: {
+            onClick: {
+              event: false,
+              type: Function
+            }
+          }
+        },
         CalendlyWidget: {
           component: CalendlyWidget,
           properties: {
@@ -4475,6 +4727,7 @@ true;
         DrawerHeading,
         PicobotIframe: {
           component: PicobotIframe,
+          methods: ["postMessage"],
           properties: {
             currentPath: {
               attribute: false
@@ -5719,18 +5972,18 @@ true;
     return /*#__PURE__*/React.createElement(tapestryReact.ThemeProvider, {
       theme: topbarTheme
     }, /*#__PURE__*/React.createElement(addOns.UiExtensionDataContext, null, /*#__PURE__*/React.createElement("div", {
-      className: styles["toolbar"],
+      className: styles$1["toolbar"],
       "data-pendo": "toolbar-profile-support-wrapper"
     }, /*#__PURE__*/React.createElement(ToolbarButton, {
       "aria-label": `Open ${userName}’s profile drawer`,
       onClick: () => toggleDrawer(Profile),
       "data-pendo": "toolbar-profile",
-      className: styles["toolbar-button--avatar"]
+      className: styles$1["toolbar-button--avatar"]
     }, /*#__PURE__*/React.createElement(Avatar, {
       env: env,
       url: userAvatarPath
     })), /*#__PURE__*/React.createElement(ToolbarButton, {
-      className: styles["toolbar-button--home"],
+      className: styles$1["toolbar-button--home"],
       onClick: () => closeDrawer()
     }, /*#__PURE__*/React.createElement(tapestryReact.Icon, {
       name: "toolbar.planningCenter",
@@ -5768,7 +6021,7 @@ true;
   }) => {
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: classnames(styles["toolbar-button"], className, current && styles["is-current"]),
+      className: classnames(styles$1["toolbar-button"], className, current && styles$1["is-current"]),
       onClick: onClick,
       "data-toolbar-link": "true",
       ...restProps