@burdenoff/website-sdk 2026.924.10 → 2026.924.12

package/dist/components/explore.mjs

@@ -2033,6 +2033,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,
@@ -2282,9 +2321,17 @@ function useExploreChat(options = {}) {
     ),
     [promptKey, welcomeKey]
   );
-  const [catalog, setCatalog] = useState(fallbackCatalog);
+  const [bakedRaw] = useState(
+    () => readBakedCatalog(productSlug)
+  );
+  const [catalog, setCatalog] = useState(
+    () => bakedRaw ? normalizeCatalog(bakedRaw, fallbackCatalog) : fallbackCatalog
+  );
+  const [serverCatalogRaw, setServerCatalogRaw] = useState(bakedRaw);
   const [messages, setMessages] = useState([]);
-  const [phase, setPhase] = useState("loading");
+  const [phase, setPhase] = useState(
+    () => bakedRaw ? bakedRaw.enabled === false ? "disabled" : "ready" : "loading"
+  );
   const [error, setError] = useState(null);
   const [remainingToday, setRemainingToday] = useState(null);
   const [focusProduct, setFocusProductState] = useState(null);
@@ -2302,7 +2349,7 @@ function useExploreChat(options = {}) {
     shareTokenRef.current = readShareToken();
   }
   const isSharedView = shareTokenRef.current !== null;
-  const catalogRef = useRef(fallbackCatalog);
+  const catalogRef = useRef(catalog);
   const turnCountRef = useRef(0);
   const focusProductRef = useRef(null);
   const lastSentTextRef = useRef(null);
@@ -2448,25 +2495,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 = useCallback(
     (conversationToken, messageId) => {
       pollGenerationRef.current += 1;
@@ -2934,6 +2985,7 @@ function useExploreChat(options = {}) {
   return {
     phase,
     catalog,
+    serverCatalogRaw,
     messages,
     activity,
     remainingToday,
@@ -3892,6 +3944,48 @@ 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));
+}
+
+/* The concept rail had the chip row's problem: the card at its edge was cut hard mid-word
+   ("Apparatus Rig", "CONCEPT ILLUST") on a dozen sites. It fades an edge only while there are
+   more cards beyond it \u2014 the same state that lights the arrow on that side \u2014 so a rail
+   scrolled to its end shows its last card whole. Physical edges, because that state is
+   physical: it is measured from the left in either reading direction. */
+.boff-explore-rail-fade-left {
+  -webkit-mask-image: linear-gradient(to right, hsl(var(--foreground) / 0), hsl(var(--foreground)) 3rem);
+  mask-image: linear-gradient(to right, hsl(var(--foreground) / 0), hsl(var(--foreground)) 3rem);
+}
+.boff-explore-rail-fade-right {
+  -webkit-mask-image: linear-gradient(to right, hsl(var(--foreground)) calc(100% - 3rem), hsl(var(--foreground) / 0));
+  mask-image: linear-gradient(to right, hsl(var(--foreground)) calc(100% - 3rem), hsl(var(--foreground) / 0));
+}
+.boff-explore-rail-fade-left.boff-explore-rail-fade-right {
+  -webkit-mask-image: linear-gradient(to right, hsl(var(--foreground) / 0), hsl(var(--foreground)) 3rem, hsl(var(--foreground)) calc(100% - 3rem), hsl(var(--foreground) / 0));
+  mask-image: linear-gradient(to right, hsl(var(--foreground) / 0), hsl(var(--foreground)) 3rem, hsl(var(--foreground)) calc(100% - 3rem), hsl(var(--foreground) / 0));
+}
+
 @keyframes boff-explore-fade-in {
   from { opacity: 0; transform: translateY(2px); }
   to   { opacity: 1; transform: none; }
@@ -3968,10 +4062,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. */
@@ -3981,8 +4075,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
@@ -4070,8 +4164,18 @@ var EXPLORE_CSS = `
   .boff-explore-scroll .boff-explore-capabilities { display: none; }
 }
 @container boff-explore-pane (min-width: ${toRem(WELCOME_FIT_MIN_WIDTH_PX)}) and (max-height: ${toRem(WELCOME_FIT_STEP_PX[1])}) {
-  /* Step 2. */
+  /* Step 2. At a 4:1 crop the picture is ~44px tall, and the full-size caveat badge covered
+     half of it \u2014 on ten sites, every card, whenever the consent banner was up. It stays (the
+     picture is still a mockup), just smaller and tucked into the corner. */
   .boff-explore-scroll .boff-explore-concept-media { aspect-ratio: 4 / 1; }
+  .boff-explore-scroll .boff-explore-concept-badge {
+    top: 0.25rem;
+    left: 0.25rem;
+    padding: 0 0.3125rem;
+    font-size: 0.5rem;
+    line-height: 0.75rem;
+    letter-spacing: 0.02em;
+  }
 }
 @container boff-explore-pane (min-width: ${toRem(WELCOME_FIT_MIN_WIDTH_PX)}) and (max-height: ${toRem(WELCOME_FIT_STEP_PX[2])}) {
   /* Step 3. Title-only cards. The "concept illustration" caveat lives on the picture, so it
@@ -5230,6 +5334,7 @@ function ErrorBanner({
 }
 function PromptCarousel({
   strings: T,
+  label,
   prompts,
   onPrompt,
   disabled
@@ -5261,7 +5366,7 @@ function PromptCarousel({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "flex min-w-0 touch-pan-y items-center gap-1.5",
+      className: "grid min-w-0 touch-pan-y grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-1.5 gap-y-1.5 sm:grid-cols-[auto_minmax(0,1fr)_auto]",
       role: "group",
       "aria-roledescription": "carousel",
       "aria-label": "Example questions",
@@ -5271,13 +5376,14 @@ function PromptCarousel({
       onBlurCapture: () => setPaused(false),
       ...swipe,
       children: [
+        /* @__PURE__ */ jsx("p", { className: "col-start-1 row-start-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground sm:col-span-3", children: label }),
         count > 1 ? /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             "aria-label": T.prevSuggestion,
             onClick: () => go(-1),
-            className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            className: "col-start-2 row-start-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring sm:col-start-1 sm:row-start-2",
             children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
           }
         ) : null,
@@ -5291,14 +5397,23 @@ 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: cn(
+              "group col-span-3 row-start-2 flex min-w-0 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",
+              count > 1 ? "sm:col-span-1 sm:col-start-2" : "sm:col-span-3"
+            ),
             children: [
               /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5 shrink-0 text-primary" }),
-              /* @__PURE__ */ jsx("span", { className: "truncate", children: current }),
-              /* @__PURE__ */ jsx(ArrowUp, { className: "ml-auto h-3.5 w-3.5 shrink-0 rotate-45 text-muted-foreground transition-colors group-hover:text-primary" })
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "boff-explore-fade min-w-0 max-sm:line-clamp-3 sm:truncate",
+                  children: current
+                },
+                current
+              ),
+              /* @__PURE__ */ jsx(ArrowUp, { className: "ml-auto h-3.5 w-3.5 shrink-0 rotate-45 text-muted-foreground transition-colors group-hover:text-primary max-sm:hidden" })
             ]
-          },
-          current
+          }
         ),
         count > 1 ? /* @__PURE__ */ jsx(
           "button",
@@ -5306,7 +5421,7 @@ function PromptCarousel({
             type: "button",
             "aria-label": T.nextSuggestion,
             onClick: () => go(1),
-            className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            className: "col-start-3 row-start-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring sm:row-start-2",
             children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
           }
         ) : null
@@ -5337,7 +5452,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__ */ jsx(
@@ -5405,8 +5520,11 @@ function ConceptStrip({
   const measureRail = useCallback(() => {
     const el = railRef.current;
     if (!el) return;
-    setCanLeft(el.scrollLeft > 1);
-    setCanRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+    const max = el.scrollWidth - el.clientWidth;
+    const rtl = typeof getComputedStyle === "function" && getComputedStyle(el).direction === "rtl";
+    const fromLeft = rtl ? max + el.scrollLeft : el.scrollLeft;
+    setCanLeft(fromLeft > 1);
+    setCanRight(fromLeft < max - 1);
   }, []);
   useEffect(() => {
     const el = railRef.current;
@@ -5475,11 +5593,15 @@ 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: cn(
+                "boff-explore-strip flex min-w-0 snap-x gap-3 overflow-x-auto pb-1 sm:mx-10",
+                canLeft && "boff-explore-rail-fade-left",
+                canRight && "boff-explore-rail-fade-right"
+              ),
               children: visible.map((highlight) => /* @__PURE__ */ jsx(
                 "li",
                 {
-                  className: "shrink-0 snap-start",
+                  className: "flex shrink-0 snap-start",
                   children: /* @__PURE__ */ jsxs(
                     "button",
                     {
@@ -5515,14 +5637,14 @@ function ConceptStrip({
                             "span",
                             {
                               "aria-hidden": "true",
-                              className: "pointer-events-none absolute left-1.5 top-1.5 rounded-full border border-border bg-background/90 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-foreground",
+                              className: "boff-explore-concept-badge pointer-events-none absolute left-1.5 top-1.5 rounded-full border border-border bg-background/90 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-foreground",
                               children: T.conceptIllustration
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5 p-2.5", children: [
+                        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 p-2.5", children: [
                           /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-xs font-semibold leading-snug text-card-foreground", children: highlight.title }),
-                          /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: highlight.productName })
+                          /* @__PURE__ */ jsx("span", { className: "mt-auto truncate text-[11px] text-muted-foreground", children: highlight.productName })
                         ] })
                       ]
                     }
@@ -5670,18 +5792,16 @@ function WelcomeState({
       },
       i
     )) }),
-    prompts.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "boff-explore-rise boff-explore-rise-2 mt-4", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: T.tryAsking }),
-      /* @__PURE__ */ jsx(
-        PromptCarousel,
-        {
-          strings: T,
-          prompts,
-          onPrompt,
-          disabled
-        }
-      )
-    ] }) : null,
+    prompts.length > 0 ? /* @__PURE__ */ jsx("div", { className: "boff-explore-rise boff-explore-rise-2 mt-4", children: /* @__PURE__ */ jsx(
+      PromptCarousel,
+      {
+        strings: T,
+        label: T.tryAsking,
+        prompts,
+        onPrompt,
+        disabled
+      }
+    ) }) : null,
     products.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "boff-explore-rise boff-explore-rise-3 mt-4", children: [
       /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: T.focusProduct }),
       /* @__PURE__ */ jsx(
@@ -5739,6 +5859,7 @@ function ExplorePage({
   const {
     phase,
     catalog,
+    serverCatalogRaw,
     messages,
     activity,
     remainingToday,
@@ -6170,6 +6291,10 @@ function ExplorePage({
   const captchaOn = Boolean(
     catalog.captchaRequired && catalog.recaptchaSiteKey
   );
+  const bakedCatalogJson = useMemo(
+    () => serverCatalogRaw && serverCatalogRaw.enabled !== false ? serializeBakedCatalog(serverCatalogRaw) : null,
+    [serverCatalogRaw]
+  );
   const rootStyle = {};
   if (heightMode === "viewport") {
     rootStyle["--boff-explore-offset"] = paneOffset === null ? normalizeOffset(viewportOffset) : `${paneOffset}px`;
@@ -6209,6 +6334,16 @@ function ExplorePage({
         ),
         /* @__PURE__ */ jsx(ProseStyles, {}),
         /* @__PURE__ */ jsx(ExploreStyles, {}),
+        bakedCatalogJson ? /* @__PURE__ */ jsx(
+          "script",
+          {
+            id: BAKED_CATALOG_ELEMENT_ID,
+            type: "application/json",
+            "data-product": productSlug ?? "",
+            "data-locale": bakedCatalogLocale(),
+            dangerouslySetInnerHTML: { __html: bakedCatalogJson }
+          }
+        ) : null,
         /* @__PURE__ */ jsx(ExploreAnswerStyles, {}),
         !showWelcome ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 border-b border-border px-4 py-2.5", children: [
           /* @__PURE__ */ jsx(
@@ -6683,7 +6818,7 @@ function ExplorePage({
                     )
                   ] }) : null,
                   /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [
-                    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: T.disclaimerShort }),
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 sm:truncate", children: T.disclaimerShort }),
                     /* @__PURE__ */ jsx(
                       "button",
                       {