@burdenoff/website-sdk 2026.924.9 → 2026.924.11

package/dist/components/explore.js

@@ -2059,6 +2059,45 @@ function buildFallbackCatalog(examplePrompts, welcome) {
     conceptHighlights: []
   };
 }
+var BAKED_CATALOG_ELEMENT_ID = "boff-explore-catalog";
+function bakedCatalogLocale() {
+  if (typeof navigator === "undefined") return "";
+  return (navigator.language || "").toLowerCase().split("-")[0] ?? "";
+}
+function snapshotBakedElement() {
+  if (typeof document === "undefined") return null;
+  const el = document.getElementById(BAKED_CATALOG_ELEMENT_ID);
+  if (!el || el.tagName !== "SCRIPT" || el.getAttribute("type") !== "application/json")
+    return null;
+  return {
+    product: el.getAttribute("data-product") ?? "",
+    locale: el.getAttribute("data-locale") ?? "",
+    text: el.textContent ?? ""
+  };
+}
+var BAKED_AT_LOAD = snapshotBakedElement();
+function isCatalogShape(value) {
+  if (!value || typeof value !== "object") return false;
+  const c = value;
+  const listOrAbsent = (v) => v === void 0 || v === null || Array.isArray(v);
+  const textOrAbsent = (v) => v === void 0 || v === null || typeof v === "string";
+  return (c["enabled"] === void 0 || typeof c["enabled"] === "boolean") && listOrAbsent(c["products"]) && listOrAbsent(c["examplePrompts"]) && listOrAbsent(c["conceptHighlights"]) && textOrAbsent(c["welcomeTitle"]) && textOrAbsent(c["welcomeBody"]);
+}
+function readBakedCatalog(productSlug) {
+  const baked = snapshotBakedElement() ?? BAKED_AT_LOAD;
+  if (!baked) return null;
+  if (baked.product !== (productSlug ?? "")) return null;
+  if (baked.locale && baked.locale !== bakedCatalogLocale()) return null;
+  try {
+    const parsed = JSON.parse(baked.text);
+    return isCatalogShape(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function serializeBakedCatalog(raw) {
+  return JSON.stringify(raw).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
 function normalizeCatalog(raw, fallback) {
   return {
     enabled: raw.enabled !== false,
@@ -2308,9 +2347,17 @@ function useExploreChat(options = {}) {
     ),
     [promptKey, welcomeKey]
   );
-  const [catalog, setCatalog] = React.useState(fallbackCatalog);
+  const [bakedRaw] = React.useState(
+    () => readBakedCatalog(productSlug)
+  );
+  const [catalog, setCatalog] = React.useState(
+    () => bakedRaw ? normalizeCatalog(bakedRaw, fallbackCatalog) : fallbackCatalog
+  );
+  const [serverCatalogRaw, setServerCatalogRaw] = React.useState(bakedRaw);
   const [messages, setMessages] = React.useState([]);
-  const [phase, setPhase] = React.useState("loading");
+  const [phase, setPhase] = React.useState(
+    () => bakedRaw ? bakedRaw.enabled === false ? "disabled" : "ready" : "loading"
+  );
   const [error, setError] = React.useState(null);
   const [remainingToday, setRemainingToday] = React.useState(null);
   const [focusProduct, setFocusProductState] = React.useState(null);
@@ -2328,7 +2375,7 @@ function useExploreChat(options = {}) {
     shareTokenRef.current = readShareToken();
   }
   const isSharedView = shareTokenRef.current !== null;
-  const catalogRef = React.useRef(fallbackCatalog);
+  const catalogRef = React.useRef(catalog);
   const turnCountRef = React.useRef(0);
   const focusProductRef = React.useRef(null);
   const lastSentTextRef = React.useRef(null);
@@ -2474,25 +2521,29 @@ function useExploreChat(options = {}) {
       const raw = res.data?.exploreCatalog;
       if (res.errors?.length || !raw) {
         console.warn(
-          "[WebSDK] exploreCatalog unavailable \u2014 using the built-in fallback catalog",
+          "[WebSDK] exploreCatalog unavailable \u2014 keeping the catalog the page started with",
           res.errors?.[0]?.message
         );
         setPhase((prev) => prev === "loading" ? "ready" : prev);
         return;
       }
-      const next = normalizeCatalog(raw, fallbackCatalog);
+      const next = normalizeCatalog(
+        raw,
+        bakedRaw ? normalizeCatalog(bakedRaw, fallbackCatalog) : fallbackCatalog
+      );
       setCatalog(next);
+      setServerCatalogRaw(raw);
       catalogRef.current = next;
       setPhase((prev) => {
         if (!next.enabled) return "disabled";
-        return prev === "loading" ? "ready" : prev;
+        return prev === "loading" || prev === "disabled" ? "ready" : prev;
       });
     };
     void load();
     return () => {
       cancelled = true;
     };
-  }, [client, productSlug, fallbackCatalog]);
+  }, [client, productSlug, fallbackCatalog, bakedRaw]);
   const startPolling = React.useCallback(
     (conversationToken, messageId) => {
       pollGenerationRef.current += 1;
@@ -2960,6 +3011,7 @@ function useExploreChat(options = {}) {
   return {
     phase,
     catalog,
+    serverCatalogRaw,
     messages,
     activity,
     remainingToday,
@@ -3918,6 +3970,30 @@ var EXPLORE_CSS = `
 }
 .boff-explore-strip::-webkit-scrollbar { display: none; }
 
+/* The product chips run past the edge of their row (there are 38). A hard edge sliced the
+   last visible chip mid-word ("Bi", "BigC") right beside "All 38"; a short fade says "there
+   is more this way" instead. A mask carries only alpha, so the gradient's colour is a token
+   that never shows. Mirrored for right-to-left locales, whose row runs the other way. */
+.boff-explore-chips-fade {
+  /* Focus scrolling honours scroll-padding, so a tabbed-to chip is brought clear of the fade
+     rather than left half-hidden under it. */
+  scroll-padding-inline-end: 2rem;
+  -webkit-mask-image: linear-gradient(to right, hsl(var(--foreground)) calc(100% - 2rem), hsl(var(--foreground) / 0));
+  mask-image: linear-gradient(to right, hsl(var(--foreground)) calc(100% - 2rem), hsl(var(--foreground) / 0));
+}
+/* A fade over a fixed edge would leave the LAST chip under it once the row is scrolled to
+   the end \u2014 the visitor could never read it. A trailing spacer the width of the fade lets
+   the final chip scroll clear of it. A pseudo-element rather than padding: trailing padding
+   on a flex scroll container is not reliably part of its scrollable overflow. */
+.boff-explore-chips-fade::after {
+  content: "";
+  flex: 0 0 2rem;
+}
+[dir="rtl"] .boff-explore-chips-fade {
+  -webkit-mask-image: linear-gradient(to left, hsl(var(--foreground)) calc(100% - 2rem), hsl(var(--foreground) / 0));
+  mask-image: linear-gradient(to left, hsl(var(--foreground)) calc(100% - 2rem), hsl(var(--foreground) / 0));
+}
+
 @keyframes boff-explore-fade-in {
   from { opacity: 0; transform: translateY(2px); }
   to   { opacity: 1; transform: none; }
@@ -3994,10 +4070,10 @@ var EXPLORE_CSS = `
    Colour comes from the product's --primary token, so it is whatever that site's palette
    already is, never a colour chosen here. */
 .boff-explore-invite {
-  border-color: hsl(var(--primary) / 0.45);
+  border-color: hsl(var(--primary) / 0.6);
   box-shadow:
-    0 0 0 4px hsl(var(--primary) / 0.08),
-    0 8px 24px -12px hsl(var(--primary) / 0.45);
+    0 0 0 4px hsl(var(--primary) / 0.12),
+    0 8px 24px -12px hsl(var(--primary) / 0.55);
   animation: boff-explore-breathe 3.2s ease-in-out infinite;
 }
 /* Focus and typing both mean "I have found it", and the hint has done its job. */
@@ -4007,8 +4083,8 @@ var EXPLORE_CSS = `
   box-shadow: 0 0 0 4px hsl(var(--primary) / 0.10);
 }
 @keyframes boff-explore-breathe {
-  0%, 100% { box-shadow: 0 0 0 4px hsl(var(--primary) / 0.07), 0 8px 24px -12px hsl(var(--primary) / 0.40); }
-  50%      { box-shadow: 0 0 0 7px hsl(var(--primary) / 0.13), 0 8px 28px -12px hsl(var(--primary) / 0.55); }
+  0%, 100% { box-shadow: 0 0 0 4px hsl(var(--primary) / 0.10), 0 8px 24px -12px hsl(var(--primary) / 0.50); }
+  50%      { box-shadow: 0 0 0 7px hsl(var(--primary) / 0.18), 0 8px 28px -12px hsl(var(--primary) / 0.65); }
 }
 
 /* Every one of the above is decoration. Reduced motion removes the movement and keeps the
@@ -5317,14 +5393,20 @@ function PromptCarousel({
             "aria-label": `Ask: ${current}`,
             "aria-live": paused ? "polite" : "off",
             onClick: () => onPrompt(current),
-            className: "boff-explore-fade group flex min-w-0 flex-1 items-center gap-2 rounded-full border border-border bg-card px-4 py-2 text-left text-sm text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            className: "group flex min-w-0 flex-1 items-center gap-2 rounded-full border border-border bg-card px-4 py-2 max-sm:min-h-[3.625rem] max-sm:rounded-2xl text-left text-sm text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "h-3.5 w-3.5 shrink-0 text-primary" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: current }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "boff-explore-fade min-w-0 max-sm:line-clamp-2 sm:truncate",
+                  children: current
+                },
+                current
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "ml-auto h-3.5 w-3.5 shrink-0 rotate-45 text-muted-foreground transition-colors group-hover:text-primary" })
             ]
-          },
-          current
+          }
         ),
         count > 1 ? /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -5363,7 +5445,7 @@ function ProductStrip({
           {
             className: cn(
               "boff-explore-strip flex min-w-0 flex-1 gap-2",
-              expanded ? "flex-wrap" : "flex-nowrap overflow-x-auto"
+              expanded ? "flex-wrap" : "boff-explore-chips-fade flex-nowrap overflow-x-auto"
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -5501,11 +5583,11 @@ function ConceptStrip({
               onScroll: measureRail,
               "data-boff-explore": "concept-strip",
               "aria-label": T.conceptStripLabel,
-              className: "boff-explore-strip flex min-w-0 snap-x gap-3 overflow-x-auto pb-1",
+              className: "boff-explore-strip flex min-w-0 snap-x gap-3 overflow-x-auto pb-1 sm:mx-10",
               children: visible.map((highlight) => /* @__PURE__ */ jsxRuntime.jsx(
                 "li",
                 {
-                  className: "shrink-0 snap-start",
+                  className: "flex shrink-0 snap-start",
                   children: /* @__PURE__ */ jsxRuntime.jsxs(
                     "button",
                     {
@@ -5546,9 +5628,9 @@ function ConceptStrip({
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col gap-0.5 p-2.5", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 p-2.5", children: [
                           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-2 text-xs font-semibold leading-snug text-card-foreground", children: highlight.title }),
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: highlight.productName })
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-auto truncate text-[11px] text-muted-foreground", children: highlight.productName })
                         ] })
                       ]
                     }
@@ -5765,6 +5847,7 @@ function ExplorePage({
   const {
     phase,
     catalog,
+    serverCatalogRaw,
     messages,
     activity,
     remainingToday,
@@ -6196,6 +6279,10 @@ function ExplorePage({
   const captchaOn = Boolean(
     catalog.captchaRequired && catalog.recaptchaSiteKey
   );
+  const bakedCatalogJson = React.useMemo(
+    () => serverCatalogRaw && serverCatalogRaw.enabled !== false ? serializeBakedCatalog(serverCatalogRaw) : null,
+    [serverCatalogRaw]
+  );
   const rootStyle = {};
   if (heightMode === "viewport") {
     rootStyle["--boff-explore-offset"] = paneOffset === null ? normalizeOffset(viewportOffset) : `${paneOffset}px`;
@@ -6235,6 +6322,16 @@ function ExplorePage({
         ),
         /* @__PURE__ */ jsxRuntime.jsx(ProseStyles, {}),
         /* @__PURE__ */ jsxRuntime.jsx(ExploreStyles, {}),
+        bakedCatalogJson ? /* @__PURE__ */ jsxRuntime.jsx(
+          "script",
+          {
+            id: BAKED_CATALOG_ELEMENT_ID,
+            type: "application/json",
+            "data-product": productSlug ?? "",
+            "data-locale": bakedCatalogLocale(),
+            dangerouslySetInnerHTML: { __html: bakedCatalogJson }
+          }
+        ) : null,
         /* @__PURE__ */ jsxRuntime.jsx(ExploreAnswerStyles, {}),
         !showWelcome ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 border-b border-border px-4 py-2.5", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -6709,7 +6806,7 @@ function ExplorePage({
                     )
                   ] }) : 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: "min-w-0 truncate", children: T.disclaimerShort }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 sm:truncate", children: T.disclaimerShort }),
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "button",
                       {