@burdenoff/website-sdk 2026.1024.1 → 2026.1026.1

package/dist/index.js

@@ -6561,6 +6561,14 @@ var EN = {
   closeVideo: "Close video",
   enterFullScreen: "Full screen",
   exitFullScreen: "Exit full screen",
+  panelTitle: "AI assistant",
+  panelViews: "Assistant views",
+  tabChat: "Chat",
+  tabAvatar: "Avatar",
+  closePanel: "Close",
+  liveAvatar: "Live avatar",
+  avatarComingSoon: "Live avatar coming soon",
+  continueInChat: "Continue in Chat",
   videoUnavailable: "This video can't be played right now.",
   groundedIn: "What this answer is based on",
   sourceCountOne: "1 source",
@@ -6669,6 +6677,14 @@ var ZH = {
   closeVideo: "\u5173\u95ED\u89C6\u9891",
   enterFullScreen: "\u5168\u5C4F",
   exitFullScreen: "\u9000\u51FA\u5168\u5C4F",
+  panelTitle: "AI \u52A9\u624B",
+  panelViews: "\u52A9\u624B\u89C6\u56FE",
+  tabChat: "\u804A\u5929",
+  tabAvatar: "\u865A\u62DF\u5F62\u8C61",
+  closePanel: "\u5173\u95ED",
+  liveAvatar: "\u5B9E\u65F6\u865A\u62DF\u5F62\u8C61",
+  avatarComingSoon: "\u5B9E\u65F6\u865A\u62DF\u5F62\u8C61\u5373\u5C06\u63A8\u51FA",
+  continueInChat: "\u5728\u804A\u5929\u4E2D\u7EE7\u7EED",
   videoUnavailable: "\u6682\u65F6\u65E0\u6CD5\u64AD\u653E\u6B64\u89C6\u9891\u3002",
   groundedIn: "\u8FD9\u4E2A\u56DE\u7B54\u7684\u4F9D\u636E",
   sourceCountOne: "1 \u4E2A\u6765\u6E90",
@@ -6773,6 +6789,14 @@ var HI = {
   closeVideo: "\u0935\u0940\u0921\u093F\u092F\u094B \u092C\u0902\u0926 \u0915\u0930\u0947\u0902",
   enterFullScreen: "\u092A\u0942\u0930\u094D\u0923 \u0938\u094D\u0915\u094D\u0930\u0940\u0928",
   exitFullScreen: "\u092A\u0942\u0930\u094D\u0923 \u0938\u094D\u0915\u094D\u0930\u0940\u0928 \u0938\u0947 \u092C\u093E\u0939\u0930 \u0928\u093F\u0915\u0932\u0947\u0902",
+  panelTitle: "AI \u0938\u0939\u093E\u092F\u0915",
+  panelViews: "\u0938\u0939\u093E\u092F\u0915 \u0926\u0943\u0936\u094D\u092F",
+  tabChat: "\u091A\u0948\u091F",
+  tabAvatar: "\u0905\u0935\u0924\u093E\u0930",
+  closePanel: "\u092C\u0902\u0926 \u0915\u0930\u0947\u0902",
+  liveAvatar: "\u0932\u093E\u0907\u0935 \u0905\u0935\u0924\u093E\u0930",
+  avatarComingSoon: "\u0932\u093E\u0907\u0935 \u0905\u0935\u0924\u093E\u0930 \u091C\u0932\u094D\u0926 \u0906 \u0930\u0939\u093E \u0939\u0948",
+  continueInChat: "\u091A\u0948\u091F \u092E\u0947\u0902 \u091C\u093E\u0930\u0940 \u0930\u0916\u0947\u0902",
   videoUnavailable: "\u092F\u0939 \u0935\u0940\u0921\u093F\u092F\u094B \u0905\u092D\u0940 \u0928\u0939\u0940\u0902 \u091A\u0932 \u0938\u0915\u0924\u093E\u0964",
   groundedIn: "\u092F\u0939 \u0909\u0924\u094D\u0924\u0930 \u0915\u093F\u0938 \u092A\u0930 \u0906\u0927\u093E\u0930\u093F\u0924 \u0939\u0948",
   sourceCountOne: "1 \u0938\u094D\u0930\u094B\u0924",
@@ -6881,6 +6905,14 @@ var ES = {
   closeVideo: "Cerrar v\xEDdeo",
   enterFullScreen: "Pantalla completa",
   exitFullScreen: "Salir de pantalla completa",
+  panelTitle: "Asistente de IA",
+  panelViews: "Vistas del asistente",
+  tabChat: "Chat",
+  tabAvatar: "Avatar",
+  closePanel: "Cerrar",
+  liveAvatar: "Avatar en vivo",
+  avatarComingSoon: "Avatar en vivo: pr\xF3ximamente",
+  continueInChat: "Continuar en el chat",
   videoUnavailable: "Ahora mismo no se puede reproducir este v\xEDdeo.",
   groundedIn: "En qu\xE9 se basa esta respuesta",
   sourceCountOne: "1 fuente",
@@ -6989,6 +7021,14 @@ var AR = {
   closeVideo: "\u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u0641\u064A\u062F\u064A\u0648",
   enterFullScreen: "\u0645\u0644\u0621 \u0627\u0644\u0634\u0627\u0634\u0629",
   exitFullScreen: "\u0627\u0644\u062E\u0631\u0648\u062C \u0645\u0646 \u0645\u0644\u0621 \u0627\u0644\u0634\u0627\u0634\u0629",
+  panelTitle: "\u0645\u0633\u0627\u0639\u062F \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064A",
+  panelViews: "\u0637\u0631\u0642 \u0639\u0631\u0636 \u0627\u0644\u0645\u0633\u0627\u0639\u062F",
+  tabChat: "\u062F\u0631\u062F\u0634\u0629",
+  tabAvatar: "\u0627\u0644\u0623\u0641\u0627\u062A\u0627\u0631",
+  closePanel: "\u0625\u063A\u0644\u0627\u0642",
+  liveAvatar: "\u0627\u0644\u0623\u0641\u0627\u062A\u0627\u0631 \u0627\u0644\u0645\u0628\u0627\u0634\u0631",
+  avatarComingSoon: "\u0627\u0644\u0623\u0641\u0627\u062A\u0627\u0631 \u0627\u0644\u0645\u0628\u0627\u0634\u0631 \u0642\u0631\u064A\u0628\u064B\u0627",
+  continueInChat: "\u0627\u0644\u0645\u062A\u0627\u0628\u0639\u0629 \u0641\u064A \u0627\u0644\u062F\u0631\u062F\u0634\u0629",
   videoUnavailable: "\u062A\u0639\u0630\u0651\u0631 \u062A\u0634\u063A\u064A\u0644 \u0647\u0630\u0627 \u0627\u0644\u0641\u064A\u062F\u064A\u0648 \u0627\u0644\u0622\u0646.",
   groundedIn: "\u0639\u0644\u0649 \u0645\u0627\u0630\u0627 \u062A\u0633\u062A\u0646\u062F \u0647\u0630\u0647 \u0627\u0644\u0625\u062C\u0627\u0628\u0629",
   sourceCountOne: "\u0645\u0635\u062F\u0631 \u0648\u0627\u062D\u062F",
@@ -7097,6 +7137,14 @@ var TA = {
   closeVideo: "\u0BB5\u0BC0\u0B9F\u0BBF\u0BAF\u0BCB\u0BB5\u0BC8 \u0BAE\u0BC2\u0B9F\u0BC1",
   enterFullScreen: "\u0BAE\u0BC1\u0BB4\u0BC1\u0BA4\u0BCD \u0BA4\u0BBF\u0BB0\u0BC8",
   exitFullScreen: "\u0BAE\u0BC1\u0BB4\u0BC1\u0BA4\u0BCD \u0BA4\u0BBF\u0BB0\u0BC8\u0BAF\u0BBF\u0BB2\u0BBF\u0BB0\u0BC1\u0BA8\u0BCD\u0BA4\u0BC1 \u0BB5\u0BC6\u0BB3\u0BBF\u0BAF\u0BC7\u0BB1\u0BC1",
+  panelTitle: "AI \u0B89\u0BA4\u0BB5\u0BBF\u0BAF\u0BBE\u0BB3\u0BB0\u0BCD",
+  panelViews: "\u0B89\u0BA4\u0BB5\u0BBF\u0BAF\u0BBE\u0BB3\u0BB0\u0BCD \u0B95\u0BBE\u0B9F\u0BCD\u0B9A\u0BBF\u0B95\u0BB3\u0BCD",
+  tabChat: "\u0B85\u0BB0\u0B9F\u0BCD\u0B9F\u0BC8",
+  tabAvatar: "\u0B85\u0BB5\u0BA4\u0BBE\u0BB0\u0BCD",
+  closePanel: "\u0BAE\u0BC2\u0B9F\u0BC1",
+  liveAvatar: "\u0BA8\u0BC7\u0BB0\u0BB2\u0BC8 \u0B85\u0BB5\u0BA4\u0BBE\u0BB0\u0BCD",
+  avatarComingSoon: "\u0BA8\u0BC7\u0BB0\u0BB2\u0BC8 \u0B85\u0BB5\u0BA4\u0BBE\u0BB0\u0BCD \u0BB5\u0BBF\u0BB0\u0BC8\u0BB5\u0BBF\u0BB2\u0BCD",
+  continueInChat: "\u0B85\u0BB0\u0B9F\u0BCD\u0B9F\u0BC8\u0BAF\u0BBF\u0BB2\u0BCD \u0BA4\u0BCA\u0B9F\u0BB0\u0BB5\u0BC1\u0BAE\u0BCD",
   videoUnavailable: "\u0B87\u0BA8\u0BCD\u0BA4 \u0BB5\u0BC0\u0B9F\u0BBF\u0BAF\u0BCB\u0BB5\u0BC8 \u0B87\u0BAA\u0BCD\u0BAA\u0BCB\u0BA4\u0BC1 \u0B87\u0BAF\u0B95\u0BCD\u0B95 \u0BAE\u0BC1\u0B9F\u0BBF\u0BAF\u0BB5\u0BBF\u0BB2\u0BCD\u0BB2\u0BC8.",
   groundedIn: "\u0B87\u0BA8\u0BCD\u0BA4\u0BAA\u0BCD \u0BAA\u0BA4\u0BBF\u0BB2\u0BCD \u0B8E\u0BA4\u0BC8 \u0B85\u0B9F\u0BBF\u0BAA\u0BCD\u0BAA\u0B9F\u0BC8\u0BAF\u0BBE\u0B95\u0B95\u0BCD \u0B95\u0BCA\u0BA3\u0BCD\u0B9F\u0BA4\u0BC1",
   sourceCountOne: "1 \u0BAE\u0BC2\u0BB2\u0BAE\u0BCD",
@@ -10253,7 +10301,9 @@ function useExploreChat(options = {}) {
     pollTimeoutMs = DEFAULT_POLL_TIMEOUT_MS,
     storageKey = DEFAULT_STORAGE_KEY,
     persist = true,
-    onSend
+    onSend,
+    enabled = true,
+    shareToken: shareTokenOption
   } = options;
   const client = useWebSDK();
   const { productId } = useWebSDKConfig();
@@ -10291,7 +10341,7 @@ function useExploreChat(options = {}) {
   const [hasConversation, setHasConversation] = React.useState(false);
   const shareTokenRef = React.useRef(void 0);
   if (shareTokenRef.current === void 0) {
-    shareTokenRef.current = readShareToken();
+    shareTokenRef.current = shareTokenOption === void 0 ? readShareToken() : shareTokenOption;
   }
   const isSharedView = shareTokenRef.current !== null;
   const catalogRef = React.useRef(catalog);
@@ -10329,6 +10379,7 @@ function useExploreChat(options = {}) {
     };
   }, []);
   React.useEffect(() => {
+    if (!enabled) return;
     const shareToken = shareTokenRef.current;
     if (!shareToken) return;
     let cancelled = false;
@@ -10363,8 +10414,9 @@ function useExploreChat(options = {}) {
     return () => {
       cancelled = true;
     };
-  }, [client]);
+  }, [client, enabled]);
   React.useEffect(() => {
+    if (!enabled) return;
     if (shareTokenRef.current !== null) return;
     if (!persist) {
       setHydrated(true);
@@ -10389,9 +10441,10 @@ function useExploreChat(options = {}) {
       setTurnCount(turns);
     }
     setHydrated(true);
-  }, [persist, rememberConversationToken, storageKey]);
+  }, [persist, rememberConversationToken, storageKey, enabled]);
   React.useEffect(() => {
-    if (!persist || !hydrated || typeof window === "undefined") return;
+    if (!persist || !hydrated || isSharedView || typeof window === "undefined")
+      return;
     try {
       const payload = {
         conversationToken: conversationTokenRef.current,
@@ -10405,10 +10458,10 @@ function useExploreChat(options = {}) {
       window.localStorage.setItem(storageKey, JSON.stringify(payload));
     } catch {
     }
-  }, [persist, hydrated, storageKey, messages, focusProduct]);
+  }, [persist, hydrated, isSharedView, storageKey, messages, focusProduct]);
   React.useEffect(() => {
     messagesRef.current = messages;
-    if (!persist || !hydrated) return;
+    if (!persist || !hydrated || isSharedView) return;
     const settled = messages.some(
       (m) => m.role === "ASSISTANT" && (m.status === "COMPLETED" || m.status === "FAILED")
     );
@@ -10420,8 +10473,9 @@ function useExploreChat(options = {}) {
         focusProduct: focusProductRef.current
       })
     );
-  }, [messages, persist, hydrated, storageKey]);
+  }, [messages, persist, hydrated, isSharedView, storageKey]);
   React.useEffect(() => {
+    if (!enabled) return;
     let cancelled = false;
     const load = async () => {
       const variables = { productSlug: productSlug ?? null };
@@ -10462,7 +10516,7 @@ function useExploreChat(options = {}) {
     return () => {
       cancelled = true;
     };
-  }, [client, productSlug, fallbackCatalog, bakedRaw]);
+  }, [client, productSlug, fallbackCatalog, bakedRaw, enabled]);
   const startPolling = React.useCallback(
     (conversationToken, messageId) => {
       pollGenerationRef.current += 1;
@@ -10959,6 +11013,56 @@ function makeOptimisticId() {
   optimisticCounter += 1;
   return `boff-explore-local-${Date.now()}-${optimisticCounter}`;
 }
+var ExploreConversationContext = React.createContext(null);
+function useExploreConversation(options = {}) {
+  const {
+    productSlug,
+    locale,
+    examplePrompts,
+    onSend,
+    pageUrl,
+    enabled,
+    shareToken
+  } = options;
+  const urlAtMount = React.useMemo(
+    () => typeof window === "undefined" ? void 0 : window.location.href,
+    []
+  );
+  const T = React.useMemo(
+    () => exploreStrings(resolveExploreLocale(locale)),
+    [locale]
+  );
+  const chat = useExploreChat({
+    productSlug,
+    pageUrl: pageUrl ?? urlAtMount,
+    onSend,
+    // Locale-aware, so a catalog outage degrades to a translated welcome rather than an English one.
+    examplePrompts: examplePrompts ?? T.prompts,
+    fallbackWelcome: { title: T.welcomeTitle, body: T.welcomeBody },
+    ...enabled === void 0 ? {} : { enabled },
+    ...shareToken === void 0 ? {} : { shareToken }
+  });
+  const [draft, setDraft] = React.useState("");
+  const [staged, setStaged] = React.useState([]);
+  return React.useMemo(
+    () => ({ ...chat, draft, setDraft, staged, setStaged }),
+    [chat, draft, staged]
+  );
+}
+function ExploreChatProvider({
+  enabled,
+  children,
+  ...options
+}) {
+  const [started, setStarted] = React.useState(enabled);
+  if (enabled && !started) setStarted(true);
+  const conversation = useExploreConversation({
+    ...options,
+    // `enabled` as well as `started`: on the render that first sees `enabled`, the latch above has only been queued.
+    enabled: enabled || started
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ExploreConversationContext.Provider, { value: conversation, children });
+}
 var DRAIN_TARGET_MS = 1200;
 var MIN_CHARS_PER_SECOND = 90;
 var MAX_CHARS_PER_SECOND = 2200;
@@ -13603,15 +13707,17 @@ function WelcomeState({
   focusProduct,
   onPrompt,
   onFocus,
-  disabled
+  disabled,
+  heading = "h1"
 }) {
+  const Heading = heading;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "boff-explore-aura mx-auto my-auto w-full max-w-3xl px-4 py-4 sm:py-5", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "boff-explore-rise text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "boff-explore-hero-badge inline-flex items-center gap-1.5 rounded-full border border-border bg-muted px-3 py-1 text-xs font-medium text-muted-foreground", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "h-3.5 w-3.5" }),
         T.badge
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mt-2 text-balance break-words text-2xl font-bold tracking-tight sm:text-3xl", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(Heading, { className: "mt-2 text-balance break-words text-2xl font-bold tracking-tight sm:text-3xl", children: title }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mt-2 max-w-2xl text-pretty text-sm leading-relaxed text-muted-foreground", children: body })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "boff-explore-capabilities boff-explore-rise boff-explore-rise-1 mt-4 grid grid-cols-3 gap-2 sm:gap-2.5", children: CAPABILITIES.map(({ icon: Icon, body: capBody }, i) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -13666,19 +13772,36 @@ function exploreQuestionHref(question, base = "/explore") {
   const joiner = base.includes("?") ? "&" : "?";
   return `${base}${joiner}q=${encodeURIComponent(trimmed)}`;
 }
-function ExplorePage({
+function ExplorePage(props) {
+  const shared = React.useContext(ExploreConversationContext);
+  return shared ? /* @__PURE__ */ jsxRuntime.jsx(ExploreView, { ...props, conversation: shared }) : /* @__PURE__ */ jsxRuntime.jsx(StandaloneExplorePage, { ...props });
+}
+function StandaloneExplorePage(props) {
+  const conversation = useExploreConversation({
+    productSlug: props.productSlug,
+    locale: props.locale,
+    examplePrompts: props.examplePrompts,
+    onSend: props.onSend
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ExploreView, { ...props, conversation });
+}
+function ExploreView({
   seo,
   productSlug,
-  examplePrompts,
   className,
   heightMode = "viewport",
   viewportOffset,
   onNavigate,
-  onSend,
   welcomeTitle,
   welcomeBody,
-  locale
+  locale,
+  presentation = "page",
+  active = true,
+  explorePath = "/explore",
+  conversation
 }) {
+  const panel = presentation === "panel";
+  const viewportPage = !panel && heightMode === "viewport";
   const pageUrl = React.useMemo(
     () => typeof window === "undefined" ? void 0 : window.location.href,
     []
@@ -13714,26 +13837,21 @@ function ExplorePage({
     escalate,
     canEscalate,
     createShareLink,
-    isSharedView
-  } = useExploreChat({
-    productSlug,
-    pageUrl,
-    onSend,
-    // Locale-aware, so a catalog outage degrades to a translated welcome rather than an
-    // English one. `T.prompts` seeds the chips the same way.
-    examplePrompts: examplePrompts ?? T.prompts,
-    fallbackWelcome: { title: T.welcomeTitle, body: T.welcomeBody }
-  });
-  const [draft, setDraft] = React.useState("");
+    isSharedView,
+    draft,
+    setDraft,
+    staged,
+    setStaged
+  } = conversation;
   const textareaRef = React.useRef(null);
   React.useEffect(() => {
-    if (typeof window === "undefined") return;
+    if (typeof window === "undefined" || panel) return;
     const params = new URLSearchParams(window.location.search);
     if (params.has("c")) return;
     const question = params.get("q")?.trim();
     if (!question) return;
     setDraft(question.slice(0, EXPLORE_PREFILL_MAX_LENGTH));
-  }, []);
+  }, [panel, setDraft]);
   const [historyOpen, setHistoryOpen] = React.useState(false);
   const speechStopRef = React.useRef(() => void 0);
   const stopDictation = React.useCallback(() => {
@@ -13749,8 +13867,12 @@ function ExplorePage({
     }
   });
   speechStopRef.current = speech.stop;
+  React.useEffect(() => {
+    if (active) return;
+    stopDictation();
+    stopSpeaking();
+  }, [active, stopDictation]);
   const [disclaimerOpen, setDisclaimerOpen] = React.useState(false);
-  const [staged, setStaged] = React.useState([]);
   const [attachmentNotice, setAttachmentNotice] = React.useState(null);
   const fileInputRef = React.useRef(null);
   const stagedRef = React.useRef([]);
@@ -13803,7 +13925,7 @@ function ExplorePage({
   const [bottomInset, setBottomInset] = React.useState(0);
   const paneOffsetRef = React.useRef(0);
   const measurePane = React.useCallback(() => {
-    if (heightMode !== "viewport") return;
+    if (!viewportPage) return;
     const el = rootRef.current;
     if (!el) return;
     const layoutHeight = window.innerHeight;
@@ -13822,7 +13944,7 @@ function ExplorePage({
     paneOffsetRef.current = top;
     setPaneOffset((current) => current === top ? current : top);
     setBottomInset((current) => current === inset ? current : inset);
-  }, [heightMode]);
+  }, [viewportPage]);
   const [chromeOverlap, setChromeOverlap] = React.useState(0);
   const measureChrome = React.useCallback(() => {
     const root = rootRef.current;
@@ -13847,7 +13969,7 @@ function ExplorePage({
     measureChrome();
   }, [measurePane, measureChrome]);
   React.useEffect(() => {
-    if (typeof window === "undefined") return;
+    if (typeof window === "undefined" || panel) return;
     let frame = 0;
     const run = () => {
       frame = 0;
@@ -13885,12 +14007,12 @@ function ExplorePage({
       setBottomInset(0);
       setChromeOverlap(0);
     };
-  }, [remeasure]);
+  }, [remeasure, panel]);
   React.useEffect(() => {
     measureChrome();
   }, [measureChrome, paneOffset, bottomInset]);
   React.useEffect(() => {
-    if (heightMode !== "viewport" || typeof window === "undefined") return;
+    if (!viewportPage || typeof window === "undefined") return;
     const { history: browserHistory } = window;
     const previousRestoration = "scrollRestoration" in browserHistory ? browserHistory.scrollRestoration : null;
     if (previousRestoration !== null)
@@ -13958,14 +14080,14 @@ function ExplorePage({
       if (previousRestoration !== null)
         browserHistory.scrollRestoration = previousRestoration;
     };
-  }, [heightMode, remeasure]);
+  }, [viewportPage, remeasure]);
   const handleScroll = React.useCallback(() => {
     const el = scrollRef.current;
     if (!el) return;
     stickToBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
   }, []);
   React.useEffect(() => {
-    if (typeof window === "undefined") return;
+    if (typeof window === "undefined" || panel) return;
     let frame = 0;
     const run = () => {
       frame = 0;
@@ -13988,7 +14110,7 @@ function ExplorePage({
       if (frame) window.cancelAnimationFrame(frame);
       window.removeEventListener("scroll", schedule);
     };
-  }, []);
+  }, [panel]);
   const latestAssistantId = React.useMemo(() => {
     for (let i = messages.length - 1; i >= 0; i -= 1) {
       const message = messages[i];
@@ -14004,7 +14126,7 @@ function ExplorePage({
     if (!stickToBottomRef.current) return;
     if (anchor.offsetHeight === 0) return;
     alignedForRef.current = latestAssistantId;
-    if (!pageOwnsScrolling(el)) {
+    if (panel || !pageOwnsScrolling(el)) {
       const delta2 = anchor.getBoundingClientRect().top - el.getBoundingClientRect().top;
       el.scrollTop = Math.max(0, el.scrollTop + delta2 - 12);
       return;
@@ -14013,7 +14135,7 @@ function ExplorePage({
       anchor.getBoundingClientRect().top - paneOffsetRef.current - 12
     );
     if (delta !== 0) window.scrollBy({ top: delta, left: 0, behavior: "auto" });
-  }, [latestAssistantId, messages]);
+  }, [latestAssistantId, messages, panel]);
   React.useEffect(() => {
     if (messages.length === 0) return;
     if (!stickToBottomRef.current) return;
@@ -14021,7 +14143,7 @@ function ExplorePage({
       return;
     const el = scrollRef.current;
     if (!el) return;
-    if (!pageOwnsScrolling(el)) {
+    if (panel || !pageOwnsScrolling(el)) {
       el.scrollTop = el.scrollHeight;
       return;
     }
@@ -14030,7 +14152,7 @@ function ExplorePage({
       dock.getBoundingClientRect().bottom - visualViewportHeight()
     );
     if (delta > 0) window.scrollBy({ top: delta, left: 0, behavior: "auto" });
-  }, [activity, latestAssistantId, messages]);
+  }, [activity, latestAssistantId, messages, panel]);
   const handleShare = React.useCallback(async () => {
     setShareLabel(T.copying);
     setShareUrl(null);
@@ -14040,7 +14162,7 @@ function ExplorePage({
       setTimeout(() => setShareLabel(T.share), 2500);
       return;
     }
-    const url = new URL(pageUrl ?? window.location.href);
+    const url = panel ? new URL(explorePath, window.location.href) : new URL(pageUrl ?? window.location.href);
     url.search = "";
     url.hash = "";
     url.searchParams.set("c", token);
@@ -14056,6 +14178,8 @@ function ExplorePage({
   }, [
     createShareLink,
     pageUrl,
+    panel,
+    explorePath,
     T.copied,
     T.copying,
     T.share,
@@ -14084,12 +14208,15 @@ function ExplorePage({
       });
       return pickQueueRef.current;
     },
-    [T]
+    [T, setStaged]
+  );
+  const removeAttachment = React.useCallback(
+    (id) => {
+      setStaged((prev) => prev.filter((entry) => entry.id !== id));
+      setAttachmentNotice(null);
+    },
+    [setStaged]
   );
-  const removeAttachment = React.useCallback((id) => {
-    setStaged((prev) => prev.filter((entry) => entry.id !== id));
-    setAttachmentNotice(null);
-  }, []);
   const submitDraft = React.useCallback(() => {
     const text = draft.trim();
     if (!text || overLimit || busy || !canSend) return;
@@ -14101,7 +14228,16 @@ function ExplorePage({
     setStaged([]);
     setAttachmentNotice(null);
     textareaRef.current?.focus();
-  }, [busy, canSend, draft, overLimit, send, stopDictation]);
+  }, [
+    busy,
+    canSend,
+    draft,
+    overLimit,
+    send,
+    setDraft,
+    setStaged,
+    stopDictation
+  ]);
   const sendPrompt = React.useCallback(
     (prompt) => {
       if (!canSend || busy) return;
@@ -14112,7 +14248,7 @@ function ExplorePage({
       setStaged([]);
       setAttachmentNotice(null);
     },
-    [busy, canSend, send]
+    [busy, canSend, send, setDraft, setStaged]
   );
   const handleKeyDown = React.useCallback(
     (event) => {
@@ -14134,7 +14270,7 @@ function ExplorePage({
     [serverCatalogRaw]
   );
   const rootStyle = {};
-  if (heightMode === "viewport") {
+  if (viewportPage) {
     rootStyle["--boff-explore-offset"] = paneOffset === null ? normalizeOffset(viewportOffset) : `${paneOffset}px`;
     if (bottomInset > 0) {
       rootStyle["--boff-explore-inset"] = `${bottomInset}px`;
@@ -14147,19 +14283,19 @@ function ExplorePage({
     "div",
     {
       ref: rootRef,
-      "data-boff-explore": "page",
+      "data-boff-explore": panel ? "panel" : "page",
       "data-phase": phase,
       "data-locale": activeLocale,
       dir: rtl ? "rtl" : void 0,
       className: cn(
-        "flex w-full min-w-0 flex-col overflow-x-hidden bg-background text-foreground",
-        heightMode === "viewport" && "boff-explore-viewport",
-        heightMode === "auto" && "min-h-[70vh]",
+        panel ? "boff-explore-panel flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden bg-background text-foreground" : "flex w-full min-w-0 flex-col overflow-x-hidden bg-background text-foreground",
+        viewportPage && "boff-explore-viewport",
+        !panel && heightMode === "auto" && "min-h-[70vh]",
         className
       ),
-      style: rootStyle,
+      style: panel ? void 0 : rootStyle,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        panel ? null : /* @__PURE__ */ jsxRuntime.jsx(
           PageHead,
           {
             title: seo?.title ?? T.seoTitle,
@@ -14172,7 +14308,11 @@ function ExplorePage({
         ),
         /* @__PURE__ */ jsxRuntime.jsx(ProseStyles, {}),
         /* @__PURE__ */ jsxRuntime.jsx(ExploreStyles, {}),
-        bakedCatalogJson ? /* @__PURE__ */ jsxRuntime.jsx(
+        panel ? /* @__PURE__ */ jsxRuntime.jsx("style", { children: `.boff-explore-panel .boff-explore-scroll { container: boff-explore-pane / size; }
+@container boff-explore-pane (width < ${toRem(WELCOME_FIT_MIN_WIDTH_PX)}) {
+  .boff-explore-panel .boff-explore-scroll .boff-explore-capabilities { display: none; }
+}` }) : null,
+        !panel && bakedCatalogJson ? /* @__PURE__ */ jsxRuntime.jsx(
           "script",
           {
             id: BAKED_CATALOG_ELEMENT_ID,
@@ -14192,7 +14332,7 @@ function ExplorePage({
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "truncate text-sm font-semibold", children: resolvedTitle }),
+          panel ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "truncate text-sm font-semibold", children: resolvedTitle }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "truncate text-sm font-semibold", children: resolvedTitle }),
           focusedProductName ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden shrink-0 rounded-full bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground sm:inline", children: focusedProductName }) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
             Button,
@@ -14336,6 +14476,7 @@ function ExplorePage({
             children: showWelcome ? /* @__PURE__ */ jsxRuntime.jsx(
               WelcomeState,
               {
+                heading: panel ? "h2" : "h1",
                 strings: T,
                 title: resolvedTitle,
                 body: resolvedBody,
@@ -14698,77 +14839,738 @@ function samePath(a, b) {
   const norm = (v) => v.length > 1 ? v.replace(/\/+$/, "") : v;
   return norm(a) === norm(b);
 }
-function ExploreCta({
-  variant,
-  href = "/explore",
-  label = "Ask AI",
-  className,
+var ExploreCta = React.forwardRef(
+  function ExploreCta2({
+    variant,
+    href = "/explore",
+    label = "Ask AI",
+    className,
+    onNavigate,
+    onClick,
+    currentPath,
+    expanded,
+    controls
+  }, ref) {
+    const path = useCurrentPath(currentPath);
+    const isActive = samePath(path, href);
+    if (variant === "floating" && isActive) return null;
+    const handleClick = (event) => {
+      onClick?.();
+      if (!onNavigate) return;
+      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {
+        return;
+      }
+      event.preventDefault();
+      onNavigate(href);
+    };
+    const classes = {
+      // A quiet icon control, deliberately NOT a second gradient pill: a header should carry one
+      // primary CTA ("Get started"), and a competing coloured button next to it reads as clutter.
+      // This matches the theme toggle's visual weight, so the row scans as [utilities] [CTA].
+      // The prominent, labelled entry point to /explore is the floating bubble, which is visible
+      // on every page without scrolling. `shrink-0` keeps it from squeezing the nav.
+      header: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+      mobile: "inline-flex w-full items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium text-card-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+      floating: "fixed bottom-5 right-5 z-40 inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-primary to-primary/70 px-4 py-3 text-sm font-medium text-primary-foreground shadow-lg transition-opacity hover:opacity-90"
+    };
+    const hooks = {
+      header: "cta-header",
+      mobile: "cta-mobile",
+      floating: "cta-floating"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        ref,
+        "data-boff-explore": hooks[variant],
+        href,
+        onClick: handleClick,
+        "aria-label": label,
+        "aria-current": isActive ? "page" : void 0,
+        "aria-expanded": expanded,
+        "aria-haspopup": expanded === void 0 ? void 0 : "dialog",
+        "aria-controls": expanded === void 0 ? void 0 : controls,
+        className: cn(
+          classes[variant],
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.Sparkles,
+            {
+              className: cn(
+                "shrink-0",
+                variant === "floating" ? "h-4 w-4" : variant === "header" ? "h-5 w-5" : "h-3.5 w-3.5"
+              ),
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                variant === "floating" && "hidden sm:inline",
+                // Never labelled in the header — see the class comment above.
+                variant === "header" && "hidden"
+              ),
+              children: label
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var MARK_KEY = "boffExplorePanel";
+var POS_KEY = "boffExplorePanelPos";
+var DOC_KEY = "boffExplorePanelDoc";
+var DOC_ID = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+var lastPos = 0;
+var hostMode = null;
+var NARROW_QUERY = "(max-width: 639px)";
+var TOUCH_FIRST_QUERY = "(hover: none) and (pointer: coarse)";
+var COMPOSER_FOCUS_TRIES = 15;
+var PANEL_CSS = `
+.boff-explore-shell {
+  --boff-explore-shell-lift-at: max(var(--boff-explore-shell-lift, 0px), var(--boff-explore-shell-bottom, 0px));
+  --boff-explore-shell-room-at: var(--boff-explore-shell-room, calc(100vh - var(--boff-explore-shell-bottom, 0px)));
+  position: fixed;
+  z-index: var(--boff-explore-shell-z, 50);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  overscroll-behavior: contain;
+  inset-inline-end: 1rem;
+  bottom: calc(1rem + var(--boff-explore-shell-lift-at));
+  width: min(26rem, calc(100vw - 2rem));
+  height: min(40rem, calc(var(--boff-explore-shell-room-at) - 6rem));
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 1rem;
+}
+@supports (height: 100dvh) {
+  .boff-explore-shell {
+    --boff-explore-shell-room-at: var(--boff-explore-shell-room, calc(100dvh - var(--boff-explore-shell-bottom, 0px)));
+  }
+}
+@media (max-width: 639px) {
+  .boff-explore-shell[data-size="compact"] {
+    inset-inline: 0;
+    bottom: var(--boff-explore-shell-lift-at);
+    width: auto;
+    height: min(75vh, calc(var(--boff-explore-shell-room-at) - 4rem));
+    border-width: 1px 0 0;
+    border-radius: 1rem 1rem 0 0;
+  }
+  @supports (height: 100dvh) {
+    .boff-explore-shell[data-size="compact"] {
+      height: min(75dvh, calc(var(--boff-explore-shell-room-at) - 4rem));
+    }
+  }
+}
+.boff-explore-shell[data-size="expanded"] {
+  inset: var(--boff-explore-shell-top, 0px) 0 var(--boff-explore-shell-lift-at) 0;
+  width: auto;
+  height: auto;
+  border-width: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.boff-explore-shell[data-open="false"] {
+  visibility: hidden;
+  content-visibility: hidden;
+}
+.boff-explore-shell:focus { outline: none; }
+`;
+function stateRecord() {
+  const state = window.history.state;
+  return state !== null && typeof state === "object" ? state : {};
+}
+function stampedHere() {
+  return stateRecord()[DOC_KEY] === DOC_ID;
+}
+function readMark() {
+  if (typeof window === "undefined" || !stampedHere()) return null;
+  const mark = stateRecord()[MARK_KEY];
+  return mark === "open" || mark === "expanded" ? mark : null;
+}
+function readPos() {
+  if (typeof window === "undefined" || !stampedHere()) return null;
+  const pos = stateRecord()[POS_KEY];
+  return typeof pos === "number" ? pos : null;
+}
+function stamp() {
+  if (typeof window === "undefined" || readPos() !== null) return;
+  const rest = { ...stateRecord() };
+  delete rest[MARK_KEY];
+  delete rest[POS_KEY];
+  delete rest[DOC_KEY];
+  lastPos += 1;
+  try {
+    window.history.replaceState(
+      { ...rest, [POS_KEY]: lastPos, [DOC_KEY]: DOC_ID },
+      ""
+    );
+  } catch {
+  }
+}
+function pushMark(mark) {
+  const { history } = window;
+  const mode = "scrollRestoration" in history ? history.scrollRestoration : null;
+  try {
+    if (mode !== null) history.scrollRestoration = "manual";
+    lastPos += 1;
+    history.pushState(
+      {
+        ...stateRecord(),
+        [MARK_KEY]: mark,
+        [POS_KEY]: lastPos,
+        [DOC_KEY]: DOC_ID
+      },
+      ""
+    );
+    return true;
+  } catch {
+    return false;
+  } finally {
+    if (mode !== null) history.scrollRestoration = mode;
+  }
+}
+function restoreScrollMode(mode, then) {
+  const { history } = window;
+  const put = () => {
+    if (history.scrollRestoration === "manual")
+      history.scrollRestoration = mode;
+    then?.();
+  };
+  if (typeof window.requestAnimationFrame !== "function") {
+    window.setTimeout(put, 50);
+    return;
+  }
+  window.requestAnimationFrame(() => window.requestAnimationFrame(put));
+}
+function closeInnerDialogs(shell) {
+  let closed = false;
+  document.querySelectorAll(
+    'dialog[data-boff-explore="video-dialog"]'
+  ).forEach((dialog) => {
+    if (!dialog.open) return;
+    dialog.close();
+    closed = true;
+  });
+  const disclaimer = shell?.querySelector(
+    '[data-boff-explore="disclaimer-dialog"]'
+  );
+  if (disclaimer) {
+    disclaimer.click();
+    closed = true;
+  }
+  return closed;
+}
+function marksOnTop(mark) {
+  if (mark === "expanded") return 2;
+  return mark === "open" ? 1 : 0;
+}
+function matches(query) {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(query).matches;
+}
+function ExplorePanel({
+  open,
+  onOpenChange,
+  id = "boff-explore-panel",
+  productSlug,
+  locale,
   onNavigate,
-  onClick,
-  currentPath
+  welcomeTitle,
+  welcomeBody,
+  explorePath,
+  avatar,
+  bottomOffset,
+  zIndex,
+  returnFocusRef,
+  className
 }) {
-  const path = useCurrentPath(currentPath);
-  const isActive = samePath(path, href);
-  if (variant === "floating" && isActive) return null;
-  const handleClick = (event) => {
-    onClick?.();
-    if (!onNavigate) return;
-    if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {
+  const resolvedLocale = resolveExploreLocale(locale);
+  const T = React.useMemo(() => exploreStrings(resolvedLocale), [resolvedLocale]);
+  const rtl = isRtlLocale(resolvedLocale);
+  const uid = React.useId();
+  const titleId = `${uid}-title`;
+  const chatTabId = `${uid}-chat-tab`;
+  const avatarTabId = `${uid}-avatar-tab`;
+  const chatPaneId = `${uid}-chat`;
+  const avatarPaneId = `${uid}-avatar`;
+  const [mounted, setMounted] = React.useState(open);
+  const [size, setSize] = React.useState("compact");
+  const [view, setView] = React.useState("chat");
+  const [focusRequest, setFocusRequest] = React.useState(
+    open ? "in" : null
+  );
+  const [wasOpen, setWasOpen] = React.useState(open);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (open) {
+      setMounted(true);
+      setFocusRequest("in");
+    } else {
+      setSize("compact");
+      setFocusRequest("back");
+    }
+  }
+  const shellRef = React.useRef(null);
+  const chatPaneRef = React.useRef(null);
+  const chatTabRef = React.useRef(null);
+  const avatarTabRef = React.useRef(null);
+  const ownPopsRef = React.useRef(0);
+  const settlingRef = React.useRef(false);
+  const afterPopRef = React.useRef([]);
+  const markRef = React.useRef(null);
+  const posRef = React.useRef(null);
+  const hrefRef = React.useRef(null);
+  const openRef = React.useRef(open);
+  const onOpenChangeRef = React.useRef(onOpenChange);
+  const lookedRef = React.useRef(false);
+  const traverse = React.useCallback((delta) => {
+    ownPopsRef.current += 1;
+    window.history.go(delta);
+  }, []);
+  const push = React.useCallback((mark) => {
+    const { history } = window;
+    if ("scrollRestoration" in history && history.scrollRestoration !== "manual") {
+      hostMode = history.scrollRestoration;
+    }
+    stamp();
+    if (!pushMark(mark)) return false;
+    markRef.current = mark;
+    posRef.current = readPos();
+    hrefRef.current = window.location.href;
+    return true;
+  }, []);
+  const whenSettled = React.useCallback((work) => {
+    if (ownPopsRef.current > 0 || settlingRef.current) {
+      afterPopRef.current.push(work);
+    } else {
+      work();
+    }
+  }, []);
+  const flush = React.useCallback(() => {
+    settlingRef.current = false;
+    while (afterPopRef.current.length > 0 && ownPopsRef.current === 0 && !settlingRef.current) {
+      afterPopRef.current.shift()?.();
+    }
+  }, []);
+  React.useEffect(() => {
+    openRef.current = open;
+    onOpenChangeRef.current = onOpenChange;
+  });
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (ownPopsRef.current > 0 || settlingRef.current) return;
+    const pos = readPos();
+    if (lookedRef.current && pos !== null && pos !== posRef.current) return;
+    lookedRef.current = true;
+    stamp();
+    markRef.current = readMark();
+    posRef.current = readPos();
+    hrefRef.current = window.location.href;
+  });
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    whenSettled(() => {
+      if (openRef.current) {
+        if (readMark() === null) push("open");
+        return;
+      }
+      closeInnerDialogs(shellRef.current);
+      const count = marksOnTop(readMark());
+      if (count > 0) traverse(-count);
+    });
+  }, [open, push, traverse, whenSettled]);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onPopState = () => {
+      const open2 = openRef.current;
+      const onOpenChange2 = onOpenChangeRef.current;
+      const leftMark = markRef.current;
+      const leftPos = posRef.current;
+      const leftHref = hrefRef.current;
+      const mark = readMark();
+      const pos = readPos();
+      markRef.current = mark;
+      posRef.current = pos;
+      hrefRef.current = window.location.href;
+      const forward = pos !== null && leftPos !== null && pos > leftPos;
+      const mode = hostMode;
+      const restoring = leftMark !== null && mode !== null;
+      if (ownPopsRef.current > 0) {
+        ownPopsRef.current -= 1;
+        if (ownPopsRef.current > 0) return;
+        if (restoring) {
+          settlingRef.current = true;
+          restoreScrollMode(mode, flush);
+        } else {
+          flush();
+        }
+        return;
+      }
+      if (restoring) restoreScrollMode(mode);
+      if (leftMark !== null && !forward) {
+        if (open2 && closeInnerDialogs(shellRef.current)) {
+          if (readMark() === null) push("open");
+          if (leftMark === "expanded" && readMark() === "open") {
+            push("expanded");
+          }
+          return;
+        }
+        setSize("compact");
+        if (mark === null && open2) onOpenChange2(false);
+        return;
+      }
+      if (leftHref !== null && window.location.href !== leftHref) {
+        closeInnerDialogs(shellRef.current);
+      }
+      if (mark === null) return;
+      if (forward) {
+        setSize(mark === "expanded" ? "expanded" : "compact");
+        if (!open2) onOpenChange2(true);
+        return;
+      }
+      if (!open2) {
+        traverse(-marksOnTop(mark));
+        return;
+      }
+      setSize(mark === "expanded" ? "expanded" : "compact");
+    };
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, [flush, push, traverse]);
+  React.useEffect(() => {
+    if (!open || typeof window === "undefined") return;
+    const viewport = window.visualViewport;
+    const shell = shellRef.current;
+    if (!viewport || !shell) return;
+    const clear = () => {
+      shell.style.removeProperty("--boff-explore-shell-lift");
+      shell.style.removeProperty("--boff-explore-shell-room");
+      shell.style.removeProperty("--boff-explore-shell-top");
+    };
+    const apply = () => {
+      const covered = Math.max(
+        0,
+        Math.round(window.innerHeight - viewport.height - viewport.offsetTop)
+      );
+      const panned = viewport.offsetTop > 1;
+      if (covered <= 1 && !panned) {
+        clear();
+        return;
+      }
+      shell.style.setProperty("--boff-explore-shell-lift", `${covered}px`);
+      shell.style.setProperty(
+        "--boff-explore-shell-room",
+        `calc(${Math.round(viewport.height)}px - max(0px, var(--boff-explore-shell-bottom, 0px) - ${covered}px))`
+      );
+      shell.style.setProperty(
+        "--boff-explore-shell-top",
+        `${Math.max(0, Math.round(viewport.offsetTop))}px`
+      );
+    };
+    apply();
+    viewport.addEventListener("resize", apply);
+    viewport.addEventListener("scroll", apply);
+    return () => {
+      viewport.removeEventListener("resize", apply);
+      viewport.removeEventListener("scroll", apply);
+      clear();
+    };
+  }, [open]);
+  const focusComposerSoon = React.useCallback((from) => {
+    let tries = 0;
+    const next = (attempt2) => {
+      if (typeof window.requestAnimationFrame === "function") {
+        window.requestAnimationFrame(attempt2);
+      } else {
+        window.setTimeout(attempt2, 16);
+      }
+    };
+    const attempt = () => {
+      if (document.activeElement !== from) return;
+      const composer = chatPaneRef.current?.querySelector(
+        "textarea:not(:disabled)"
+      );
+      if (!composer) return;
+      composer.focus();
+      tries += 1;
+      if (document.activeElement !== composer && tries < COMPOSER_FOCUS_TRIES) {
+        next(attempt);
+      }
+    };
+    next(attempt);
+  }, []);
+  React.useEffect(() => {
+    if (focusRequest === null) return;
+    setFocusRequest(null);
+    const shell = shellRef.current;
+    if (focusRequest === "back") {
+      const active = document.activeElement;
+      if (active === null || active === document.body || shell?.contains(active)) {
+        returnFocusRef?.current?.focus();
+      }
       return;
     }
-    event.preventDefault();
-    onNavigate(href);
-  };
-  const classes = {
-    // A quiet icon control, deliberately NOT a second gradient pill: a header should carry one
-    // primary CTA ("Get started"), and a competing coloured button next to it reads as clutter.
-    // This matches the theme toggle's visual weight, so the row scans as [utilities] [CTA].
-    // The prominent, labelled entry point to /explore is the floating bubble, which is visible
-    // on every page without scrolling. `shrink-0` keeps it from squeezing the nav.
-    header: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
-    mobile: "inline-flex w-full items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium text-card-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
-    floating: "fixed bottom-5 right-5 z-40 inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-primary to-primary/70 px-4 py-3 text-sm font-medium text-primary-foreground shadow-lg transition-opacity hover:opacity-90"
-  };
-  const hooks = {
-    header: "cta-header",
-    mobile: "cta-mobile",
-    floating: "cta-floating"
+    if (!shell) return;
+    shell.focus();
+    if (view === "chat" && !matches(TOUCH_FIRST_QUERY)) {
+      focusComposerSoon(shell);
+    }
+  }, [focusComposerSoon, focusRequest, returnFocusRef, view]);
+  const close = React.useCallback(() => onOpenChange(false), [onOpenChange]);
+  const expand = React.useCallback(() => {
+    setSize("expanded");
+    whenSettled(() => {
+      if (!openRef.current) return;
+      if (readMark() === null) push("open");
+      if (readMark() === "open") push("expanded");
+    });
+  }, [push, whenSettled]);
+  const restore = React.useCallback(() => {
+    setSize("compact");
+    whenSettled(() => {
+      if (readMark() === "expanded") traverse(-1);
+    });
+  }, [traverse, whenSettled]);
+  const onKeyDown = React.useCallback(
+    (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+      const shell = shellRef.current;
+      if (!shell || !(event.target instanceof Node) || !shell.contains(event.target)) {
+        return;
+      }
+      if (shell.querySelector('dialog[open], [role="dialog"][aria-modal="true"]')) {
+        return;
+      }
+      event.preventDefault();
+      if (size === "expanded") restore();
+      else close();
+    },
+    [close, restore, size]
+  );
+  const navigate = React.useCallback(
+    (path) => {
+      if (!onNavigate) return;
+      setSize("compact");
+      const stayOpen = !matches(NARROW_QUERY);
+      if (!stayOpen) onOpenChange(false);
+      whenSettled(() => {
+        const go = () => {
+          onNavigate(path);
+          if (stayOpen && openRef.current && readMark() === null) {
+            push("open");
+          }
+        };
+        const count = marksOnTop(readMark());
+        if (count === 0) {
+          go();
+          return;
+        }
+        afterPopRef.current.push(go);
+        traverse(-count);
+      });
+    },
+    [onNavigate, onOpenChange, push, traverse, whenSettled]
+  );
+  const selectView = React.useCallback((next) => {
+    setView(next);
+    (next === "chat" ? chatTabRef : avatarTabRef).current?.focus();
+  }, []);
+  const continueInChat = React.useCallback(() => {
+    setView("chat");
+    const tab = chatTabRef.current;
+    tab?.focus();
+    focusComposerSoon(tab);
+  }, [focusComposerSoon]);
+  const onTabKeyDown = React.useCallback(
+    (event) => {
+      const other = view === "chat" ? "avatar" : "chat";
+      const next = {
+        ArrowLeft: other,
+        ArrowRight: other,
+        Home: "chat",
+        End: "avatar"
+      };
+      const target = next[event.key];
+      if (!target) return;
+      event.preventDefault();
+      selectView(target);
+    },
+    [selectView, view]
+  );
+  if (!mounted) return null;
+  const style = {
+    "--boff-explore-shell-bottom": bottomOffset ?? "0px",
+    ...zIndex === void 0 ? {} : { "--boff-explore-shell-z": String(zIndex) }
   };
+  const iconButton = "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+  const tabButton = "rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+  const expanded = size === "expanded";
+  const sizeLabel = expanded ? T.exitFullScreen : T.enterFullScreen;
+  const tabs = [
+    { key: "chat", id: chatTabId, pane: chatPaneId, label: T.tabChat },
+    { key: "avatar", id: avatarTabId, pane: avatarPaneId, label: T.tabAvatar }
+  ];
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "a",
+    "div",
     {
-      "data-boff-explore": hooks[variant],
-      href,
-      onClick: handleClick,
-      "aria-label": label,
-      "aria-current": isActive ? "page" : void 0,
+      ref: shellRef,
+      id,
+      role: "dialog",
+      "aria-modal": "false",
+      "aria-labelledby": titleId,
+      tabIndex: -1,
+      "data-boff-explore": "panel-shell",
+      "data-open": open ? "true" : "false",
+      "data-size": size,
+      dir: rtl ? "rtl" : void 0,
       className: cn(
-        classes[variant],
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "boff-explore-shell border-border bg-background text-foreground shadow-2xl",
         className
       ),
+      style,
+      onKeyDown,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          lucideReact.Sparkles,
-          {
-            className: cn(
-              "shrink-0",
-              variant === "floating" ? "h-4 w-4" : variant === "header" ? "h-5 w-5" : "h-3.5 w-3.5"
-            ),
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: cn(
-              variant === "floating" && "hidden sm:inline",
-              // Never labelled in the header — see the class comment above.
-              variant === "header" && "hidden"
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: PANEL_CSS }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-border px-3 py-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              id: titleId,
+              className: "min-w-0 flex-1 truncate text-sm font-semibold",
+              children: T.panelTitle
+            }
+          ),
+          avatar ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "tablist",
+              "aria-label": T.panelViews,
+              className: "inline-flex shrink-0 rounded-lg bg-muted p-0.5",
+              children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  ref: tab.key === "chat" ? chatTabRef : avatarTabRef,
+                  type: "button",
+                  role: "tab",
+                  id: tab.id,
+                  "aria-selected": view === tab.key,
+                  "aria-controls": tab.pane,
+                  tabIndex: view === tab.key ? 0 : -1,
+                  "data-boff-explore": `panel-tab-${tab.key}`,
+                  className: cn(
+                    tabButton,
+                    view === tab.key ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                  ),
+                  onClick: () => selectView(tab.key),
+                  onKeyDown: onTabKeyDown,
+                  children: tab.label
+                },
+                tab.key
+              ))
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "data-boff-explore": expanded ? "panel-restore" : "panel-expand",
+                "aria-label": sizeLabel,
+                title: sizeLabel,
+                className: iconButton,
+                onClick: expanded ? restore : expand,
+                children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-4 w-4", "aria-hidden": "true" })
+              }
             ),
-            children: label
-          }
-        )
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "data-boff-explore": "panel-close",
+                "aria-label": T.closePanel,
+                title: T.closePanel,
+                className: iconButton,
+                onClick: close,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4", "aria-hidden": "true" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: chatPaneRef,
+              id: chatPaneId,
+              role: avatar ? "tabpanel" : void 0,
+              "aria-labelledby": avatar ? chatTabId : void 0,
+              "data-boff-explore": "panel-chat",
+              className: cn(
+                "flex min-h-0 flex-1 flex-col",
+                view === "avatar" && "invisible"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                ExplorePage,
+                {
+                  presentation: "panel",
+                  active: open && view === "chat",
+                  productSlug,
+                  locale,
+                  onNavigate: onNavigate ? navigate : void 0,
+                  welcomeTitle,
+                  welcomeBody,
+                  explorePath
+                }
+              )
+            }
+          ),
+          avatar ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              id: avatarPaneId,
+              role: "tabpanel",
+              "aria-labelledby": avatarTabId,
+              "data-boff-explore": "panel-avatar",
+              className: cn(
+                "absolute inset-0 flex-col items-center justify-center gap-4 overflow-y-auto bg-background p-6 text-center",
+                view === "avatar" ? "flex" : "hidden"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: avatar.src,
+                    alt: avatar.name ? `${avatar.name}, ${T.liveAvatar}` : T.liveAvatar,
+                    loading: "lazy",
+                    decoding: "async",
+                    width: 128,
+                    height: 128,
+                    className: "h-32 w-32 rounded-full border border-border object-cover shadow-sm"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-semibold", children: T.avatarComingSoon }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-boff-explore": "panel-continue-chat",
+                    className: "inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                    onClick: continueInChat,
+                    children: T.continueInChat
+                  }
+                )
+              ]
+            }
+          ) : null
+        ] })
       ]
     }
   );
@@ -19593,8 +20395,10 @@ exports.EXPLORE_RECAPTCHA_ACTION = EXPLORE_RECAPTCHA_ACTION;
 exports.ElectronDownloadLink = ElectronDownloadLink;
 exports.ExploreAnswerBody = ExploreAnswerBody;
 exports.ExploreAnswerStyles = ExploreAnswerStyles;
+exports.ExploreChatProvider = ExploreChatProvider;
 exports.ExploreCta = ExploreCta;
 exports.ExplorePage = ExplorePage;
+exports.ExplorePanel = ExplorePanel;
 exports.FALLBACK_EXPLORE_LIMITS = FALLBACK_EXPLORE_LIMITS;
 exports.FOOTERLESS_ROUTES = FOOTERLESS_ROUTES;
 exports.Input = Input;
@@ -19688,6 +20492,7 @@ exports.stopSpeaking = stopSpeaking;
 exports.useContentPage = useContentPage;
 exports.useContentPages = useContentPages;
 exports.useExploreChat = useExploreChat;
+exports.useExploreConversation = useExploreConversation;
 exports.useProduct = useProduct;
 exports.useProductConfig = useProductConfig;
 exports.useProgressiveReveal = useProgressiveReveal;