@burdenoff/website-sdk 2026.924.8 → 2026.924.10

package/dist/components/explore.js

@@ -3857,6 +3857,9 @@ function toPayload(staged) {
   }));
 }
 var SHORT_VIEWPORT_PX = 420;
+var WELCOME_FIT_MIN_WIDTH_PX = 640;
+var WELCOME_FIT_STEP_PX = [700, 549, 505, 422];
+var toRem = (px) => `${px / 16}rem`;
 var EXPLORE_CSS = `
 @keyframes boff-explore-pulse {
   0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
@@ -4067,6 +4070,50 @@ var EXPLORE_CSS = `
   }
 }
 
+/* ---- Welcome fit ----------------------------------------------------------------------
+   The ladder is documented at WELCOME_FIT_STEP_PX. The pane becomes a query container only
+   in viewport mode and above the short-viewport threshold, because size containment sizes
+   an element as if it had no content. That is safe exactly while the pane's height comes
+   from its flex parent. In \`auto\` mode, and in the short-viewport fallback above, the pane
+   grows WITH its content \u2014 and containment there would collapse it to zero height.
+
+   Selectors are two classes deep on purpose. The host sites' Tailwind puts \`py-5\`, \`mt-4\`
+   and \`aspect-[2/1]\` on these same elements; unlayered SDK CSS already outranks a v4
+   \`@layer utilities\` rule, and the extra class makes it outrank a v3 one too, whichever
+   stylesheet happens to load last.
+
+   Nothing here hides the concept strip, and nothing here hides content the page does not
+   also say elsewhere. Below the last step the pane scrolls, so every control stays
+   reachable at every zoom level. */
+@media (min-height: ${SHORT_VIEWPORT_PX + 1}px) {
+  .boff-explore-viewport .boff-explore-scroll {
+    container: boff-explore-pane / size;
+  }
+}
+@container boff-explore-pane (min-width: ${toRem(WELCOME_FIT_MIN_WIDTH_PX)}) and (max-height: ${toRem(WELCOME_FIT_STEP_PX[0])}) {
+  /* Step 1. Each tile restates something the page already says in the badge, the intro or
+     the composer footer, so this is the one block whose absence loses nothing. */
+  .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. */
+  .boff-explore-scroll .boff-explore-concept-media { aspect-ratio: 4 / 1; }
+}
+@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
+     goes with it; the button's accessible name never depended on the image. Lazy images
+     inside a display:none box are not fetched until there is room to show them. */
+  .boff-explore-scroll .boff-explore-concept-media { display: none; }
+  .boff-explore-scroll .boff-explore-aura { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+  .boff-explore-scroll .boff-explore-aura > :not(:first-child) { margin-top: 0.5rem; }
+}
+@container boff-explore-pane (min-width: ${toRem(WELCOME_FIT_MIN_WIDTH_PX)}) and (max-height: ${toRem(WELCOME_FIT_STEP_PX[3])}) {
+  /* Step 4. The badge is the third statement on this screen that answers come from our
+     documentation. The heading beneath it loses its top margin so the hero starts flush. */
+  .boff-explore-scroll .boff-explore-hero-badge { display: none; }
+  .boff-explore-scroll .boff-explore-hero-badge + h1 { margin-top: 0; }
+}
+
 /* ---- Composer dock --------------------------------------------------------------------
    Three declarations, each the fallback for the one after it: a plain 1rem where \`max()\`
    is unknown, then the measured overlap of any FOREIGN fixed chrome sitting over the
@@ -5393,7 +5440,12 @@ function ConceptStrip({
     measureRail();
     const onResize = () => measureRail();
     window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(onResize) : null;
+    observer?.observe(el);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      observer?.disconnect();
+    };
   }, [measureRail, highlights.length, failed]);
   const scrollRail = React.useCallback((direction) => {
     const el = railRef.current;
@@ -5473,7 +5525,7 @@ function ConceptStrip({
                       ),
                       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-44",
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative block aspect-[2/1] w-full overflow-hidden bg-muted", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "boff-explore-concept-media relative block aspect-[2/1] w-full overflow-hidden bg-muted", children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
                             "img",
                             {
@@ -5625,14 +5677,14 @@ function WelcomeState({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "boff-explore-aura mx-auto my-auto w-full max-w-3xl px-4 py-4 sm:py-5", 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.jsxs("span", { className: "boff-explore-hero-badge 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-2 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", children: body })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "boff-explore-rise boff-explore-rise-1 mt-4 grid grid-cols-3 gap-2 sm:gap-2.5", children: CAPABILITIES.map(({ icon: Icon, body: capBody }, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "boff-explore-capabilities boff-explore-rise boff-explore-rise-1 mt-4 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-2.5 sm:text-left",