@burdenoff/website-sdk 2026.828.4 → 2026.828.5

package/dist/index.js

@@ -5276,6 +5276,8 @@ async function getRecaptchaV3Token(siteKey, action = EXPLORE_RECAPTCHA_ACTION) {
 
 // src/hooks/use-explore-chat.ts
 var DEFAULT_STORAGE_KEY = "boff.explore.v1";
+var HISTORY_SUFFIX = ".history";
+var MAX_ARCHIVED_CONVERSATIONS = 15;
 var DEFAULT_POLL_INTERVAL_MS = 1500;
 var DEFAULT_POLL_TIMEOUT_MS = 9e4;
 var POLL_REQUEST_TIMEOUT_MS = 1e4;
@@ -5414,10 +5416,58 @@ function classifyExploreError(code, serverMessage) {
     retryable: true
   };
 }
+function historyKey(key) {
+  return `${key}${HISTORY_SUFFIX}`;
+}
+function readArchive(key) {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = window.localStorage.getItem(historyKey(key));
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(
+      (entry) => typeof entry === "object" && entry !== null && typeof entry.token === "string" && Array.isArray(entry.messages)
+    );
+  } catch {
+    return [];
+  }
+}
+function writeArchive(key, entries) {
+  if (typeof window === "undefined") return;
+  try {
+    if (entries.length === 0) {
+      window.localStorage.removeItem(historyKey(key));
+      return;
+    }
+    window.localStorage.setItem(historyKey(key), JSON.stringify(entries));
+  } catch {
+  }
+}
+function upsertArchive(key, thread) {
+  if (!thread.token) return readArchive(key);
+  const real = thread.messages.filter(
+    (m) => m.content.trim() !== "" || m.role === "USER"
+  );
+  if (real.length === 0) return readArchive(key);
+  const firstUser = real.find((m) => m.role === "USER");
+  const entry = {
+    token: thread.token,
+    title: (firstUser?.content ?? "Conversation").trim().slice(0, 80),
+    updatedAt: real[real.length - 1]?.createdAt ?? (/* @__PURE__ */ new Date()).toISOString(),
+    messageCount: real.length,
+    focusProduct: thread.focusProduct,
+    messages: real.slice(-20)
+  };
+  const rest = readArchive(key).filter((e) => e.token !== entry.token);
+  const next = [entry, ...rest].slice(0, MAX_ARCHIVED_CONVERSATIONS);
+  writeArchive(key, next);
+  return next;
+}
 function readPersisted(key) {
   if (typeof window === "undefined") return null;
   try {
-    const raw = window.sessionStorage.getItem(key);
+    const raw = window.localStorage.getItem(key);
     if (!raw) return null;
     const parsed = JSON.parse(raw);
     if (!parsed || typeof parsed !== "object") return null;
@@ -5462,6 +5512,8 @@ function useExploreChat(options = {}) {
   const [remainingToday, setRemainingToday] = React.useState(null);
   const [focusProduct, setFocusProductState] = React.useState(null);
   const [turnCount, setTurnCount] = React.useState(0);
+  const messagesRef = React.useRef([]);
+  const [archive, setArchive] = React.useState([]);
   const [hydrated, setHydrated] = React.useState(false);
   const mountedRef = React.useRef(true);
   const pollGenerationRef = React.useRef(0);
@@ -5499,6 +5551,7 @@ function useExploreChat(options = {}) {
       setHydrated(true);
       return;
     }
+    setArchive(readArchive(storageKey));
     const stored = readPersisted(storageKey);
     if (stored) {
       conversationTokenRef.current = stored.conversationToken;
@@ -5527,13 +5580,28 @@ function useExploreChat(options = {}) {
         focusProduct
       };
       if (!payload.conversationToken && payload.messages.length === 0 && !payload.focusProduct) {
-        window.sessionStorage.removeItem(storageKey);
+        window.localStorage.removeItem(storageKey);
         return;
       }
-      window.sessionStorage.setItem(storageKey, JSON.stringify(payload));
+      window.localStorage.setItem(storageKey, JSON.stringify(payload));
     } catch {
     }
   }, [persist, hydrated, storageKey, messages, focusProduct]);
+  React.useEffect(() => {
+    messagesRef.current = messages;
+    if (!persist || !hydrated) return;
+    const settled = messages.some(
+      (m) => m.role === "ASSISTANT" && (m.status === "COMPLETED" || m.status === "FAILED")
+    );
+    if (!settled) return;
+    setArchive(
+      upsertArchive(storageKey, {
+        token: conversationTokenRef.current,
+        messages,
+        focusProduct: focusProductRef.current
+      })
+    );
+  }, [messages, persist, hydrated, storageKey]);
   React.useEffect(() => {
     let cancelled = false;
     const load = async () => {
@@ -5819,6 +5887,13 @@ function useExploreChat(options = {}) {
     void send(text);
   }, [cancelPolling, send]);
   const reset = React.useCallback(() => {
+    setArchive(
+      upsertArchive(storageKey, {
+        token: conversationTokenRef.current,
+        messages: messagesRef.current,
+        focusProduct: focusProductRef.current
+      })
+    );
     cancelPolling();
     inFlightRef.current = false;
     conversationTokenRef.current = null;
@@ -5831,11 +5906,48 @@ function useExploreChat(options = {}) {
     setPhase(catalogRef.current.enabled ? "ready" : "disabled");
     if (typeof window !== "undefined") {
       try {
-        window.sessionStorage.removeItem(storageKey);
+        window.localStorage.removeItem(storageKey);
       } catch {
       }
     }
   }, [cancelPolling, storageKey]);
+  const openConversation = React.useCallback(
+    (token) => {
+      const entry = readArchive(storageKey).find((e) => e.token === token);
+      if (!entry) return;
+      upsertArchive(storageKey, {
+        token: conversationTokenRef.current,
+        messages: messagesRef.current,
+        focusProduct: focusProductRef.current
+      });
+      cancelPolling();
+      inFlightRef.current = false;
+      conversationTokenRef.current = entry.token;
+      turnCountRef.current = entry.messages.filter(
+        (m) => m.role === "USER"
+      ).length;
+      setTurnCount(turnCountRef.current);
+      setMessages(entry.messages);
+      focusProductRef.current = entry.focusProduct;
+      setFocusProductState(entry.focusProduct);
+      setError(null);
+      setPhase(catalogRef.current.enabled ? "ready" : "disabled");
+      setArchive(readArchive(storageKey));
+    },
+    [cancelPolling, storageKey]
+  );
+  const deleteConversation = React.useCallback(
+    (token) => {
+      const next = readArchive(storageKey).filter((e) => e.token !== token);
+      writeArchive(storageKey, next);
+      setArchive(next);
+    },
+    [storageKey]
+  );
+  const clearHistory = React.useCallback(() => {
+    writeArchive(storageKey, []);
+    setArchive([]);
+  }, [storageKey]);
   const setFocusProduct = React.useCallback((slug) => {
     focusProductRef.current = slug;
     setFocusProductState(slug);
@@ -5864,7 +5976,11 @@ function useExploreChat(options = {}) {
     stop,
     retry,
     reset,
-    canSend
+    canSend,
+    history: archive,
+    openConversation,
+    deleteConversation,
+    clearHistory
   };
 }
 var optimisticCounter = 0;
@@ -5872,6 +5988,119 @@ function makeOptimisticId() {
   optimisticCounter += 1;
   return `boff-explore-local-${Date.now()}-${optimisticCounter}`;
 }
+function getRecognitionCtor() {
+  if (typeof window === "undefined") return null;
+  const w = window;
+  return w.SpeechRecognition ?? w.webkitSpeechRecognition ?? null;
+}
+function describeError(code) {
+  switch (code) {
+    case "not-allowed":
+    case "service-not-allowed":
+      return "Microphone access was blocked. Allow it in your browser's site settings to dictate.";
+    case "no-speech":
+      return "I didn't catch anything \u2014 try again a little closer to the mic.";
+    case "audio-capture":
+      return "No microphone was found.";
+    case "network":
+      return "Speech recognition needs a network connection.";
+    case "aborted":
+      return "";
+    default:
+      return "Dictation stopped unexpectedly. You can type instead.";
+  }
+}
+function useSpeechInput({
+  onFinalTranscript,
+  lang,
+  onError
+}) {
+  const [supported] = React.useState(() => getRecognitionCtor() !== null);
+  const [listening, setListening] = React.useState(false);
+  const [interim, setInterim] = React.useState("");
+  const [error, setError] = React.useState(null);
+  const recognitionRef = React.useRef(null);
+  const finalRef = React.useRef(onFinalTranscript);
+  const errorRef = React.useRef(onError);
+  finalRef.current = onFinalTranscript;
+  errorRef.current = onError;
+  const stop = React.useCallback(() => {
+    const recognition = recognitionRef.current;
+    if (!recognition) return;
+    try {
+      recognition.stop();
+    } catch {
+    }
+    setListening(false);
+    setInterim("");
+  }, []);
+  const start = React.useCallback(() => {
+    const Ctor = getRecognitionCtor();
+    if (!Ctor) return;
+    if (recognitionRef.current) stop();
+    const recognition = new Ctor();
+    recognition.lang = lang ?? (typeof navigator === "undefined" ? "en-US" : navigator.language || "en-US");
+    recognition.continuous = true;
+    recognition.interimResults = true;
+    recognition.maxAlternatives = 1;
+    recognition.onstart = () => {
+      setError(null);
+      setListening(true);
+    };
+    recognition.onresult = (event) => {
+      let settled = "";
+      let pending = "";
+      for (let i = event.resultIndex; i < event.results.length; i += 1) {
+        const result = event.results[i];
+        if (!result) continue;
+        const text = result[0]?.transcript ?? "";
+        if (result.isFinal) settled += text;
+        else pending += text;
+      }
+      setInterim(pending);
+      if (settled.trim() !== "") finalRef.current(settled);
+    };
+    recognition.onerror = (event) => {
+      const message = describeError(event.error);
+      setListening(false);
+      setInterim("");
+      if (message !== "") {
+        setError(message);
+        errorRef.current?.(message);
+      }
+    };
+    recognition.onend = () => {
+      setListening(false);
+      setInterim("");
+    };
+    recognitionRef.current = recognition;
+    try {
+      recognition.start();
+    } catch {
+      setListening(false);
+    }
+  }, [lang, stop]);
+  const toggle = React.useCallback(() => {
+    if (listening) stop();
+    else start();
+  }, [listening, start, stop]);
+  React.useEffect(
+    () => () => {
+      const recognition = recognitionRef.current;
+      if (!recognition) return;
+      recognition.onresult = null;
+      recognition.onerror = null;
+      recognition.onend = null;
+      recognition.onstart = null;
+      try {
+        recognition.abort();
+      } catch {
+      }
+    },
+    []
+  );
+  return { supported, listening, interim, error, start, stop, toggle };
+}
 var EXPLORE_CSS = `
 @keyframes boff-explore-pulse {
   0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
@@ -6299,10 +6528,29 @@ function ExplorePage({
     stop,
     retry,
     reset,
-    canSend
+    canSend,
+    history,
+    openConversation,
+    deleteConversation,
+    clearHistory
   } = useExploreChat({ productSlug, pageUrl, onSend, examplePrompts });
   const [draft, setDraft] = React.useState("");
   const textareaRef = React.useRef(null);
+  const [historyOpen, setHistoryOpen] = React.useState(false);
+  const speechStopRef = React.useRef(() => void 0);
+  const stopDictation = React.useCallback(() => {
+    speechStopRef.current();
+  }, []);
+  const speech = useSpeechInput({
+    onFinalTranscript: (text) => {
+      setDraft((current) => {
+        const joined = current.trim() === "" ? text.trimStart() : `${current.trimEnd()} ${text.trim()}`;
+        return joined;
+      });
+      textareaRef.current?.focus();
+    }
+  });
+  speechStopRef.current = speech.stop;
   const scrollRef = React.useRef(null);
   const stickToBottomRef = React.useRef(true);
   const composingRef = React.useRef(false);
@@ -6338,11 +6586,12 @@ function ExplorePage({
   const submitDraft = React.useCallback(() => {
     const text = draft.trim();
     if (!text || overLimit || busy || !canSend) return;
+    stopDictation();
     setDraft("");
     stickToBottomRef.current = true;
     void send(text);
     textareaRef.current?.focus();
-  }, [busy, canSend, draft, overLimit, send]);
+  }, [busy, canSend, draft, overLimit, send, stopDictation]);
   const sendPrompt = React.useCallback(
     (prompt) => {
       if (!canSend || busy) return;
@@ -6415,8 +6664,96 @@ function ExplorePage({
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "New chat" })
               ]
             }
-          )
+          ),
+          history.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              "data-boff-explore": "history-toggle",
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              className: "shrink-0 text-muted-foreground",
+              "aria-expanded": historyOpen,
+              onClick: () => {
+                setHistoryOpen((open) => !open);
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.History, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "hidden sm:inline", children: [
+                  "History (",
+                  history.length,
+                  ")"
+                ] })
+              ]
+            }
+          ) : null
         ] }) : null,
+        historyOpen && history.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-boff-explore": "history-panel",
+            className: "border-b border-border bg-muted/30 px-4 py-3",
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto w-full max-w-3xl", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Your recent conversations" }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  Button,
+                  {
+                    "data-boff-explore": "history-clear",
+                    type: "button",
+                    size: "sm",
+                    variant: "ghost",
+                    className: "h-7 shrink-0 text-xs text-muted-foreground hover:text-destructive",
+                    onClick: () => {
+                      clearHistory();
+                      setHistoryOpen(false);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" }),
+                      "Clear history"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1", children: history.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    "data-boff-explore": "history-item",
+                    type: "button",
+                    className: "flex-1 truncate rounded-md px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+                    onClick: () => {
+                      openConversation(entry.token);
+                      setHistoryOpen(false);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: entry.title }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: [
+                        entry.messageCount,
+                        " message",
+                        entry.messageCount === 1 ? "" : "s"
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    type: "button",
+                    size: "icon",
+                    variant: "ghost",
+                    className: "h-7 w-7 shrink-0 text-muted-foreground hover:text-destructive",
+                    "aria-label": `Delete conversation: ${entry.title}`,
+                    onClick: () => {
+                      deleteConversation(entry.token);
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" })
+                  }
+                )
+              ] }, entry.token)) })
+            ] })
+          }
+        ) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -6491,6 +6828,23 @@ function ExplorePage({
                         className: "max-h-[200px] min-h-[44px] flex-1 resize-none border-0 bg-transparent px-2 py-2.5 text-sm shadow-none focus-visible:ring-0 md:text-sm"
                       }
                     ),
+                    speech.supported ? /* @__PURE__ */ jsxRuntime.jsx(
+                      Button,
+                      {
+                        "data-boff-explore": "mic",
+                        "data-listening": speech.listening ? "true" : "false",
+                        type: "button",
+                        size: "icon",
+                        variant: speech.listening ? "default" : "ghost",
+                        disabled: composerDisabled,
+                        "aria-label": speech.listening ? "Stop dictating" : "Dictate your question",
+                        "aria-pressed": speech.listening,
+                        title: speech.listening ? "Stop dictating" : "Dictate your question",
+                        onClick: speech.toggle,
+                        className: cn(speech.listening && "animate-pulse"),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-4 w-4" })
+                      }
+                    ) : null,
                     busy ? /* @__PURE__ */ jsxRuntime.jsx(
                       Button,
                       {
@@ -6516,6 +6870,29 @@ function ExplorePage({
                   ]
                 }
               ),
+              speech.listening || speech.interim !== "" ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "p",
+                {
+                  "data-boff-explore": "dictation",
+                  className: "mt-2 flex items-center gap-2 text-xs text-muted-foreground",
+                  "aria-live": "polite",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-2 w-2 shrink-0", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-primary" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "italic", children: speech.interim !== "" ? speech.interim : "Listening\u2026" })
+                  ]
+                }
+              ) : null,
+              speech.error !== null ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  "data-boff-explore": "dictation-error",
+                  className: "mt-2 text-xs text-destructive",
+                  children: speech.error
+                }
+              ) : null,
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Enter to send \xB7 Shift + Enter for a new line" }),
                 remainingToday !== null ? /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-boff-explore": "remaining", children: [
@@ -6539,39 +6916,48 @@ function ExplorePage({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-2 text-xs leading-relaxed text-muted-foreground", children: [
-                "Answers are generated from our public documentation and can be imperfect \u2014 check anything important against the linked sources.",
-                captchaOn ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  " ",
-                  "This site is protected by reCAPTCHA; the Google",
-                  " ",
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "a",
-                    {
-                      href: "https://policies.google.com/privacy",
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      className: "underline underline-offset-2 hover:text-foreground",
-                      children: "Privacy Policy"
-                    }
-                  ),
-                  " ",
-                  "and",
-                  " ",
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "a",
-                    {
-                      href: "https://policies.google.com/terms",
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      className: "underline underline-offset-2 hover:text-foreground",
-                      children: "Terms of Service"
-                    }
-                  ),
-                  " ",
-                  "apply."
-                ] }) : null
-              ] })
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "p",
+                {
+                  "data-boff-explore": "disclaimer",
+                  className: "mt-2 text-xs leading-relaxed text-muted-foreground",
+                  children: [
+                    "Answers are generated from our public documentation and can be imperfect \u2014 check anything important against the linked sources.",
+                    " ",
+                    "Conversations are saved in this browser so you can come back to them, and are also stored on our servers to help us improve these answers. Please don't share personal or confidential information.",
+                    captchaOn ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      " ",
+                      "This site is protected by reCAPTCHA; the Google",
+                      " ",
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "a",
+                        {
+                          href: "https://policies.google.com/privacy",
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          className: "underline underline-offset-2 hover:text-foreground",
+                          children: "Privacy Policy"
+                        }
+                      ),
+                      " ",
+                      "and",
+                      " ",
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "a",
+                        {
+                          href: "https://policies.google.com/terms",
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          className: "underline underline-offset-2 hover:text-foreground",
+                          children: "Terms of Service"
+                        }
+                      ),
+                      " ",
+                      "apply."
+                    ] }) : null
+                  ]
+                }
+              )
             ]
           }
         ) })
@@ -6621,11 +7007,12 @@ function ExploreCta({
     onNavigate(href);
   };
   const classes = {
-    // `shrink-0` matters: this sits in a host header's flex row, and without it the
-    // surrounding nav gets squeezed and its links wrap onto two lines. The label is hidden
-    // below 2xl for the same reason — most product headers are already close to full at
-    // 1440px, and a 90px pill there pushes them over.
-    header: "inline-flex shrink-0 items-center gap-1.5 rounded-full bg-gradient-to-r from-primary to-primary/70 px-2.5 py-1.5 text-sm font-medium text-primary-foreground shadow-sm transition-opacity hover:opacity-90 2xl:px-3.5",
+    // 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"
   };
@@ -6653,7 +7040,7 @@ function ExploreCta({
           {
             className: cn(
               "shrink-0",
-              variant === "floating" ? "h-4 w-4" : "h-3.5 w-3.5"
+              variant === "floating" ? "h-4 w-4" : variant === "header" ? "h-5 w-5" : "h-3.5 w-3.5"
             ),
             "aria-hidden": "true"
           }
@@ -6663,7 +7050,8 @@ function ExploreCta({
           {
             className: cn(
               variant === "floating" && "hidden sm:inline",
-              variant === "header" && "hidden 2xl:inline"
+              // Never labelled in the header — see the class comment above.
+              variant === "header" && "hidden"
             ),
             children: label
           }