@burdenoff/website-sdk 2026.924.11 → 2026.924.12

package/dist/components/explore.mjs

@@ -3968,6 +3968,24 @@ var EXPLORE_CSS = `
   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; }
@@ -4146,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
@@ -5306,6 +5334,7 @@ function ErrorBanner({
 }
 function PromptCarousel({
   strings: T,
+  label,
   prompts,
   onPrompt,
   disabled
@@ -5337,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",
@@ -5347,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,
@@ -5367,18 +5397,21 @@ function PromptCarousel({
             "aria-label": `Ask: ${current}`,
             "aria-live": paused ? "polite" : "off",
             onClick: () => onPrompt(current),
-            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",
+            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: "boff-explore-fade min-w-0 max-sm:line-clamp-2 sm:truncate",
+                  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" })
+              /* @__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" })
             ]
           }
         ),
@@ -5388,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
@@ -5487,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;
@@ -5557,7 +5593,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 sm:mx-10",
+              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",
                 {
@@ -5597,7 +5637,7 @@ 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
                             }
                           )
@@ -5752,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(