@burdenoff/website-sdk 2026.923.2 → 2026.923.3

package/dist/components/explore.js

@@ -582,6 +582,8 @@ var EN = {
   prevSuggestion: "Previous suggestion",
   nextSuggestion: "Next suggestion",
   conceptIllustration: "Concept illustration",
+  conceptScrollPrev: "Scroll concepts left",
+  conceptScrollNext: "Scroll concepts right",
   opensInNewTab: "opens in a new tab",
   conceptStripTitle: "Or start from a concept",
   conceptStripLabel: "Concepts you can ask about",
@@ -681,6 +683,8 @@ var ZH = {
   prevSuggestion: "\u4E0A\u4E00\u4E2A\u5EFA\u8BAE",
   nextSuggestion: "\u4E0B\u4E00\u4E2A\u5EFA\u8BAE",
   conceptIllustration: "\u6982\u5FF5\u793A\u610F\u56FE",
+  conceptScrollPrev: "\u5411\u5DE6\u6EDA\u52A8\u6982\u5FF5",
+  conceptScrollNext: "\u5411\u53F3\u6EDA\u52A8\u6982\u5FF5",
   opensInNewTab: "\u5728\u65B0\u6807\u7B7E\u9875\u4E2D\u6253\u5F00",
   conceptStripTitle: "\u6216\u8005\u4ECE\u4E00\u4E2A\u6982\u5FF5\u5F00\u59CB",
   conceptStripLabel: "\u4F60\u53EF\u4EE5\u8BE2\u95EE\u7684\u6982\u5FF5",
@@ -776,6 +780,8 @@ var HI = {
   prevSuggestion: "\u092A\u093F\u091B\u0932\u093E \u0938\u0941\u091D\u093E\u0935",
   nextSuggestion: "\u0905\u0917\u0932\u093E \u0938\u0941\u091D\u093E\u0935",
   conceptIllustration: "\u0905\u0935\u0927\u093E\u0930\u0923\u093E \u091A\u093F\u0924\u094D\u0930\u0923",
+  conceptScrollPrev: "\u0915\u0949\u0928\u094D\u0938\u0947\u092A\u094D\u091F \u092C\u093E\u090F\u0901 \u0938\u094D\u0915\u094D\u0930\u0949\u0932 \u0915\u0930\u0947\u0902",
+  conceptScrollNext: "\u0915\u0949\u0928\u094D\u0938\u0947\u092A\u094D\u091F \u0926\u093E\u090F\u0901 \u0938\u094D\u0915\u094D\u0930\u0949\u0932 \u0915\u0930\u0947\u0902",
   opensInNewTab: "\u0928\u090F \u091F\u0948\u092C \u092E\u0947\u0902 \u0916\u0941\u0932\u0924\u093E \u0939\u0948",
   conceptStripTitle: "\u092F\u093E \u0915\u093F\u0938\u0940 \u0905\u0935\u0927\u093E\u0930\u0923\u093E \u0938\u0947 \u0936\u0941\u0930\u0942 \u0915\u0930\u0947\u0902",
   conceptStripLabel: "\u091C\u093F\u0928 \u0905\u0935\u0927\u093E\u0930\u0923\u093E\u0913\u0902 \u0915\u0947 \u092C\u093E\u0930\u0947 \u092E\u0947\u0902 \u0906\u092A \u092A\u0942\u091B \u0938\u0915\u0924\u0947 \u0939\u0948\u0902",
@@ -875,6 +881,8 @@ var ES = {
   prevSuggestion: "Sugerencia anterior",
   nextSuggestion: "Sugerencia siguiente",
   conceptIllustration: "Ilustraci\xF3n del concepto",
+  conceptScrollPrev: "Desplazar conceptos a la izquierda",
+  conceptScrollNext: "Desplazar conceptos a la derecha",
   opensInNewTab: "se abre en una pesta\xF1a nueva",
   conceptStripTitle: "O empieza por un concepto",
   conceptStripLabel: "Conceptos sobre los que puedes preguntar",
@@ -974,6 +982,8 @@ var AR = {
   prevSuggestion: "\u0627\u0644\u0627\u0642\u062A\u0631\u0627\u062D \u0627\u0644\u0633\u0627\u0628\u0642",
   nextSuggestion: "\u0627\u0644\u0627\u0642\u062A\u0631\u0627\u062D \u0627\u0644\u062A\u0627\u0644\u064A",
   conceptIllustration: "\u0631\u0633\u0645 \u062A\u0648\u0636\u064A\u062D\u064A \u0644\u0644\u0645\u0641\u0647\u0648\u0645",
+  conceptScrollPrev: "\u062A\u0645\u0631\u064A\u0631 \u0627\u0644\u0645\u0641\u0627\u0647\u064A\u0645 \u0644\u0644\u064A\u0633\u0627\u0631",
+  conceptScrollNext: "\u062A\u0645\u0631\u064A\u0631 \u0627\u0644\u0645\u0641\u0627\u0647\u064A\u0645 \u0644\u0644\u064A\u0645\u064A\u0646",
   opensInNewTab: "\u064A\u064F\u0641\u062A\u062D \u0641\u064A \u0639\u0644\u0627\u0645\u0629 \u062A\u0628\u0648\u064A\u0628 \u062C\u062F\u064A\u062F\u0629",
   conceptStripTitle: "\u0623\u0648 \u0627\u0628\u062F\u0623 \u0645\u0646 \u0645\u0641\u0647\u0648\u0645",
   conceptStripLabel: "\u0645\u0641\u0627\u0647\u064A\u0645 \u064A\u0645\u0643\u0646\u0643 \u0627\u0644\u0633\u0624\u0627\u0644 \u0639\u0646\u0647\u0627",
@@ -1073,6 +1083,8 @@ var TA = {
   prevSuggestion: "\u0BAE\u0BC1\u0BA8\u0BCD\u0BA4\u0BC8\u0BAF \u0BAA\u0BB0\u0BBF\u0BA8\u0BCD\u0BA4\u0BC1\u0BB0\u0BC8",
   nextSuggestion: "\u0B85\u0B9F\u0BC1\u0BA4\u0BCD\u0BA4 \u0BAA\u0BB0\u0BBF\u0BA8\u0BCD\u0BA4\u0BC1\u0BB0\u0BC8",
   conceptIllustration: "\u0B95\u0BB0\u0BC1\u0BA4\u0BCD\u0BA4\u0BC1 \u0BB5\u0BBF\u0BB3\u0B95\u0BCD\u0B95\u0BAA\u0BCD\u0BAA\u0B9F\u0BAE\u0BCD",
+  conceptScrollPrev: "\u0B95\u0BB0\u0BC1\u0BA4\u0BCD\u0BA4\u0BC1\u0B95\u0BB3\u0BC8 \u0B87\u0B9F\u0BA4\u0BC1\u0BAA\u0BC1\u0BB1\u0BAE\u0BCD \u0BA8\u0B95\u0BB0\u0BCD\u0BA4\u0BCD\u0BA4\u0BC1",
+  conceptScrollNext: "\u0B95\u0BB0\u0BC1\u0BA4\u0BCD\u0BA4\u0BC1\u0B95\u0BB3\u0BC8 \u0BB5\u0BB2\u0BA4\u0BC1\u0BAA\u0BC1\u0BB1\u0BAE\u0BCD \u0BA8\u0B95\u0BB0\u0BCD\u0BA4\u0BCD\u0BA4\u0BC1",
   opensInNewTab: "\u0BAA\u0BC1\u0BA4\u0BBF\u0BAF \u0BA4\u0BBE\u0BB5\u0BB2\u0BBF\u0BB2\u0BCD \u0BA4\u0BBF\u0BB1\u0B95\u0BCD\u0B95\u0BC1\u0BAE\u0BCD",
   conceptStripTitle: "\u0B85\u0BB2\u0BCD\u0BB2\u0BA4\u0BC1 \u0B92\u0BB0\u0BC1 \u0B95\u0BB0\u0BC1\u0BA4\u0BCD\u0BA4\u0BBF\u0BB2\u0BBF\u0BB0\u0BC1\u0BA8\u0BCD\u0BA4\u0BC1 \u0BA4\u0BCA\u0B9F\u0B99\u0BCD\u0B95\u0BC1\u0B99\u0BCD\u0B95\u0BB3\u0BCD",
   conceptStripLabel: "\u0BA8\u0BC0\u0B99\u0BCD\u0B95\u0BB3\u0BCD \u0B95\u0BC7\u0B9F\u0BCD\u0B95\u0B95\u0BCD\u0B95\u0BC2\u0B9F\u0BBF\u0BAF \u0B95\u0BB0\u0BC1\u0BA4\u0BCD\u0BA4\u0BC1\u0B95\u0BB3\u0BCD",
@@ -5366,6 +5378,28 @@ function ConceptStrip({
       (current) => current.has(src) ? current : new Set(current).add(src)
     );
   }, []);
+  const railRef = React.useRef(null);
+  const [canLeft, setCanLeft] = React.useState(false);
+  const [canRight, setCanRight] = React.useState(false);
+  const measureRail = React.useCallback(() => {
+    const el = railRef.current;
+    if (!el) return;
+    setCanLeft(el.scrollLeft > 1);
+    setCanRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  }, []);
+  React.useEffect(() => {
+    const el = railRef.current;
+    if (!el) return;
+    measureRail();
+    const onResize = () => measureRail();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [measureRail, highlights.length, failed]);
+  const scrollRail = React.useCallback((direction) => {
+    const el = railRef.current;
+    if (!el) return;
+    el.scrollBy({ left: direction * el.clientWidth * 0.8, behavior: "smooth" });
+  }, []);
   const visible = highlights.filter(
     (highlight) => highlight.imageUrl !== "" && !failed.has(highlight.imageUrl)
   ).slice(0, MAX_CONCEPT_CARDS);
@@ -5374,71 +5408,105 @@ function ConceptStrip({
     "div",
     {
       "data-boff-explore": "concept-strip-block",
-      className: "boff-explore-rise boff-explore-rise-3 mt-6",
+      className: "boff-explore-rise boff-explore-rise-3 mt-5",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: T.conceptStripTitle }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "ul",
-          {
-            "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",
-            children: visible.map((highlight) => /* @__PURE__ */ jsxRuntime.jsx(
-              "li",
-              {
-                className: "shrink-0 snap-start",
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  "button",
-                  {
-                    "data-boff-explore": "concept-card",
-                    "data-product": highlight.product,
-                    type: "button",
-                    disabled,
-                    "aria-label": fill(T.conceptAsk, {
-                      title: highlight.title,
-                      product: highlight.productName
-                    }),
-                    onClick: () => onAsk(
-                      fill(T.conceptAskQuestion, {
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "data-boff-explore": "concept-prev",
+              "aria-label": T.conceptScrollPrev,
+              tabIndex: -1,
+              onClick: () => scrollRail(-1),
+              className: cn(
+                "absolute left-0 top-1/2 z-10 hidden h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-background/90 text-muted-foreground shadow-sm backdrop-blur transition-opacity hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring sm:flex",
+                canLeft ? "opacity-100" : "pointer-events-none opacity-0"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "data-boff-explore": "concept-next",
+              "aria-label": T.conceptScrollNext,
+              tabIndex: -1,
+              onClick: () => scrollRail(1),
+              className: cn(
+                "absolute right-0 top-1/2 z-10 hidden h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-background/90 text-muted-foreground shadow-sm backdrop-blur transition-opacity hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring sm:flex",
+                canRight ? "opacity-100" : "pointer-events-none opacity-0"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "ul",
+            {
+              ref: railRef,
+              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",
+              children: visible.map((highlight) => /* @__PURE__ */ jsxRuntime.jsx(
+                "li",
+                {
+                  className: "shrink-0 snap-start",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      "data-boff-explore": "concept-card",
+                      "data-product": highlight.product,
+                      type: "button",
+                      disabled,
+                      "aria-label": fill(T.conceptAsk, {
                         title: highlight.title,
                         product: highlight.productName
-                      })
-                    ),
-                    className: "group flex w-40 flex-col overflow-hidden rounded-xl border border-border bg-card text-left 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 sm:w-48",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative block aspect-[16/9] w-full overflow-hidden bg-muted", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "img",
-                          {
-                            src: highlight.imageUrl,
-                            alt: highlight.alt,
-                            loading: "lazy",
-                            decoding: "async",
-                            onError: () => markFailed(highlight.imageUrl),
-                            className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "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",
-                            children: T.conceptIllustration
-                          }
-                        )
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 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 })
-                      ] })
-                    ]
-                  }
-                )
-              },
-              `${highlight.product}:${highlight.url}`
-            ))
-          }
-        )
+                      }),
+                      onClick: () => onAsk(
+                        fill(T.conceptAskQuestion, {
+                          title: highlight.title,
+                          product: highlight.productName
+                        })
+                      ),
+                      className: "group flex w-40 flex-col overflow-hidden rounded-xl border border-border bg-card text-left 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 sm:w-48",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative block aspect-[16/9] w-full overflow-hidden bg-muted", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "img",
+                            {
+                              src: highlight.imageUrl,
+                              alt: highlight.alt,
+                              loading: "lazy",
+                              decoding: "async",
+                              onError: () => markFailed(highlight.imageUrl),
+                              className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "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",
+                              children: T.conceptIllustration
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 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 })
+                        ] })
+                      ]
+                    }
+                  )
+                },
+                `${highlight.product}:${highlight.url}`
+              ))
+            }
+          )
+        ] })
       ]
     }
   );
@@ -5555,28 +5623,28 @@ function WelcomeState({
   onFocus,
   disabled
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "boff-explore-aura mx-auto my-auto w-full max-w-3xl px-4 py-6 sm:py-8 lg:py-10", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "boff-explore-aura mx-auto my-auto w-full max-w-3xl px-4 py-5 sm:py-6", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "boff-explore-rise text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "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-4 text-balance break-words text-2xl font-bold tracking-tight sm:text-4xl", children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mt-2.5 max-w-2xl text-pretty text-sm leading-relaxed text-muted-foreground sm:text-lg", children: body })
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mt-3 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 sm:text-base", children: body })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "boff-explore-rise boff-explore-rise-1 mt-6 grid grid-cols-3 gap-2 sm:mt-7 sm:gap-2.5", children: CAPABILITIES.map(({ icon: Icon, body: capBody }, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "boff-explore-rise boff-explore-rise-1 mt-5 grid grid-cols-3 gap-2 sm:gap-2.5", children: CAPABILITIES.map(({ icon: Icon, body: capBody }, i) => /* @__PURE__ */ jsxRuntime.jsxs(
       "li",
       {
-        className: "rounded-xl border border-border/70 bg-card/60 p-2.5 text-center transition-colors hover:border-border sm:p-3.5 sm:text-left",
+        className: "rounded-xl border border-border/70 bg-card/60 p-2.5 text-center transition-colors hover:border-border sm:p-3 sm:text-left",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-auto mb-1.5 flex h-7 w-7 items-center justify-center rounded-lg bg-primary/10 text-primary sm:mx-0 sm:mb-2.5 sm:h-8 sm:w-8", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3.5 w-3.5 sm:h-4 sm:w-4" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-auto mb-1.5 flex h-7 w-7 items-center justify-center rounded-lg bg-primary/10 text-primary sm:mx-0 sm:mb-2 sm:h-8 sm:w-8", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3.5 w-3.5 sm:h-4 sm:w-4" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] font-semibold leading-tight text-card-foreground sm:text-sm sm:leading-normal", children: T.capabilities[i] ?? "" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 hidden text-xs leading-relaxed text-muted-foreground sm:block", children: capBody })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 hidden text-xs leading-snug text-muted-foreground lg:block", children: capBody })
         ]
       },
       i
     )) }),
-    prompts.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "boff-explore-rise boff-explore-rise-2 mt-8", children: [
+    prompts.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "boff-explore-rise boff-explore-rise-2 mt-5", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: T.tryAsking }),
       /* @__PURE__ */ jsxRuntime.jsx(
         PromptCarousel,
@@ -5588,7 +5656,7 @@ function WelcomeState({
         }
       )
     ] }) : null,
-    products.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "boff-explore-rise boff-explore-rise-3 mt-6", children: [
+    products.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "boff-explore-rise boff-explore-rise-3 mt-5", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: T.focusProduct }),
       /* @__PURE__ */ jsxRuntime.jsx(
         ProductStrip,