@burdenoff/website-sdk 2026.1024.1 → 2026.1027.1

package/README.md

@@ -159,7 +159,9 @@ function Header() {
 |---|---|---|
 | `seo` | – | Renders `PageHead` with these overrides. Omit to manage `<head>` yourself. |
 | `productSlug` | – | The site this page is on. A soft hint to the assistant, not a hard filter. |
-| `examplePrompts` | – | Prompt chips used only when the backend catalog supplies none. |
+| `examplePrompts` | – | Prompt chips used only when the backend catalog supplies none. With `scope="product"` they are the only prompts shown, whatever the catalog has. |
+| `scope` | `'portfolio'` | `'product'` (with `productSlug`) makes the assistant one product's own. See [One product's own assistant](#one-products-own-assistant). |
+| `productName` | catalog name | The product's display name in the `product` scope. Default: the catalog's name for `productSlug`. |
 | `className` | – | Extra classes on the page root. |
 | `heightMode` | `'viewport'` | `viewport` pins the chat to the screen with an internally scrolling transcript, and is the only mode in which the component manages the host page's scroll position; `auto` lets the page grow and never touches its host's scrolling (for embedding). |
 | `viewportOffset` | `0` | Chrome to subtract in `viewport` mode, **before the first measurement only**. A number is pixels; a string is any CSS length (`'4rem'`). Once mounted the pane measures its own top and this value stops being used — so an approximate header height is fine, and the on-screen keyboard is handled for you. |
@@ -167,6 +169,80 @@ function Header() {
 | `onSend` | – | Fired with the message text each time a send is accepted (analytics). |
 | `welcomeTitle` / `welcomeBody` | catalog values | Override the welcome copy. `welcomeTitle` **is** the page `<h1>`. |
 
+#### One product's own assistant
+
+By default the assistant speaks for the whole portfolio: a "Focus on a product"
+picker lists every product, concept cards come from every product, and the
+catalog's copy invites comparing products. A product site that wants its
+assistant to be about that product alone passes `scope="product"` with its
+`productSlug`, on `ExplorePage`, on the site-wide `ExplorePanel`, or on both.
+`ExplorePanel` takes the same `scope`, `productName` and `examplePrompts` props
+and passes them to its chat.
+
+```tsx
+<ExplorePanel
+  open={open}
+  onOpenChange={setOpen}
+  productSlug="healthybowl"
+  scope="product"
+  productName="Healthy Bowl" // the panel is titled "Healthy Bowl assistant"
+  examplePrompts={[
+    "Our herd's health records are spread across three notebooks.",
+    'We only find out a field needs water once the crop is stressed.',
+  ]}
+/>
+```
+
+In that scope:
+
+- The panel's title is "{product} assistant", in the visitor's language and its
+  word order, named from `productName`, else from the catalog. Where a phone
+  leaves it too little room beside the tabs, it wraps to two lines, and the
+  header keeps its height. In English and most locales two lines hold the whole
+  title at 320px and wider; a narrower title box, such as Tamil's at 320px (its
+  tabs are wider), can still end the second line with an ellipsis.
+- There is no product picker. Every question is asked about this product, also
+  in a conversation that was stored, reopened or shared with another focus; the
+  request carries `productSlug` as it always has.
+- Only this product's concept cards show, and none at all when it has none.
+- The example prompts are your `examplePrompts` and nothing else (each once,
+  blank ones dropped), whatever the catalog has. Only when you pass none does it
+  fall back to the catalog's, without any that name another product and without
+  the built-in "Which of your products fits a problem like mine?". Pass your
+  own: the catalog's are written for every site at once, and even the ones that
+  name no product describe other sites' problems. Pass them to the
+  product-scoped view itself (`ExplorePanel` or `ExplorePage`): an
+  `ExploreChatProvider`'s own `examplePrompts` only stand in until the catalog
+  loads.
+- Unless you pass `welcomeBody`, the welcome invites the visitor to describe a
+  problem or ask what the product does, instead of the catalog's invitation to
+  compare products. A catalog title that names another product is replaced by
+  the built-in one. The welcome's "Compare across the ecosystem" tile is left
+  out.
+- The composer is the published one, unchanged: the same layout, the same size
+  and the same fit to its draft. Only its placeholder's text is shorter, "Ask
+  about {product}…" instead of "Describe a problem, or ask about {product}…",
+  because on a phone the field stays one line tall and cuts off a placeholder
+  that wraps. The English one fits that line at 320px and wider. Some longer
+  locales, such as Spanish and Tamil, may still wrap at 320px and narrower; that
+  is left for a follow-up, and HealthyBowl, the site this was made for, is
+  English-only.
+- The page's meta description (and its `og:` and `twitter:` copies) is the
+  product's own, "Answers about {product}, drawn from {product}'s
+  documentation…", never "and every other product we build". The title and
+  `og:site_name` name the product already.
+- A question that needs more searches than one answer can make (`TOOL_BUDGET`)
+  is asked to be narrowed to one part of it, in the visitor's language, instead
+  of to "two or three specific products".
+
+Answers still come from the backend unchanged: when a visitor asks about
+another product, the answer and its sources can mention it. Each view applies
+its own scope, so under an `ExploreChatProvider` a portfolio `/explore` page and
+a product-scoped panel still share one conversation. Without a `productSlug`,
+`scope="product"` has no product to pin to and behaves like the default (a
+development build logs a warning). The default, `scope="portfolio"`, renders
+exactly what it always has.
+
 **`ExploreCta` props**: `variant` (`'header' \| 'mobile' \| 'floating'`, required),
 `href` (default `/explore`), `label` (default `Ask AI`), `className`,
 `onNavigate`, `onClick`, `currentPath`. The `floating` variant hides itself on

package/dist/components/explore-cta.d.mts

@@ -20,7 +20,16 @@ interface ExploreCtaProps {
      * which cannot observe SPA `pushState` navigations on its own.
      */
     currentPath?: string;
+    /**
+     * BOFF-9697. For a host whose floating button opens the site-wide assistant panel (`ExplorePanel`) instead of
+     * navigating: whether that panel is open. When set, the link also says it opens a dialog (`aria-haspopup`) and
+     * which one (`controls`). Unset (every other site): the link renders exactly as before.
+     */
+    expanded?: boolean;
+    /** BOFF-9697. The id of the panel the button opens; used only together with `expanded`. */
+    controls?: string;
 }
-declare function ExploreCta({ variant, href, label, className, onNavigate, onClick, currentPath, }: ExploreCtaProps): react.JSX.Element | null;
+/** The rendered `<a>` is forwarded, so a panel can return focus to the button that opened it (BOFF-9697). */
+declare const ExploreCta: react.ForwardRefExoticComponent<ExploreCtaProps & react.RefAttributes<HTMLAnchorElement>>;
 
 export { ExploreCta, type ExploreCtaProps };

package/dist/components/explore-cta.d.ts

@@ -20,7 +20,16 @@ interface ExploreCtaProps {
      * which cannot observe SPA `pushState` navigations on its own.
      */
     currentPath?: string;
+    /**
+     * BOFF-9697. For a host whose floating button opens the site-wide assistant panel (`ExplorePanel`) instead of
+     * navigating: whether that panel is open. When set, the link also says it opens a dialog (`aria-haspopup`) and
+     * which one (`controls`). Unset (every other site): the link renders exactly as before.
+     */
+    expanded?: boolean;
+    /** BOFF-9697. The id of the panel the button opens; used only together with `expanded`. */
+    controls?: string;
 }
-declare function ExploreCta({ variant, href, label, className, onNavigate, onClick, currentPath, }: ExploreCtaProps): react.JSX.Element | null;
+/** The rendered `<a>` is forwarded, so a panel can return focus to the button that opened it (BOFF-9697). */
+declare const ExploreCta: react.ForwardRefExoticComponent<ExploreCtaProps & react.RefAttributes<HTMLAnchorElement>>;
 
 export { ExploreCta, type ExploreCtaProps };

package/dist/components/explore-cta.js

@@ -29,81 +29,89 @@ function samePath(a, b) {
   const norm = (v) => v.length > 1 ? v.replace(/\/+$/, "") : v;
   return norm(a) === norm(b);
 }
-function ExploreCta({
-  variant,
-  href = "/explore",
-  label = "Ask AI",
-  className,
-  onNavigate,
-  onClick,
-  currentPath
-}) {
-  const path = useCurrentPath(currentPath);
-  const isActive = samePath(path, href);
-  if (variant === "floating" && isActive) return null;
-  const handleClick = (event) => {
-    onClick?.();
-    if (!onNavigate) return;
-    if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {
-      return;
-    }
-    event.preventDefault();
-    onNavigate(href);
-  };
-  const classes = {
-    // A quiet icon control, deliberately NOT a second gradient pill: a header should carry one
-    // primary CTA ("Get started"), and a competing coloured button next to it reads as clutter.
-    // This matches the theme toggle's visual weight, so the row scans as [utilities] [CTA].
-    // The prominent, labelled entry point to /explore is the floating bubble, which is visible
-    // on every page without scrolling. `shrink-0` keeps it from squeezing the nav.
-    header: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
-    mobile: "inline-flex w-full items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium text-card-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
-    floating: "fixed bottom-5 right-5 z-40 inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-primary to-primary/70 px-4 py-3 text-sm font-medium text-primary-foreground shadow-lg transition-opacity hover:opacity-90"
-  };
-  const hooks = {
-    header: "cta-header",
-    mobile: "cta-mobile",
-    floating: "cta-floating"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "a",
-    {
-      "data-boff-explore": hooks[variant],
-      href,
-      onClick: handleClick,
-      "aria-label": label,
-      "aria-current": isActive ? "page" : void 0,
-      className: cn(
-        classes[variant],
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          lucideReact.Sparkles,
-          {
-            className: cn(
-              "shrink-0",
-              variant === "floating" ? "h-4 w-4" : variant === "header" ? "h-5 w-5" : "h-3.5 w-3.5"
-            ),
-            "aria-hidden": "true"
-          }
+var ExploreCta = react.forwardRef(
+  function ExploreCta2({
+    variant,
+    href = "/explore",
+    label = "Ask AI",
+    className,
+    onNavigate,
+    onClick,
+    currentPath,
+    expanded,
+    controls
+  }, ref) {
+    const path = useCurrentPath(currentPath);
+    const isActive = samePath(path, href);
+    if (variant === "floating" && isActive) return null;
+    const handleClick = (event) => {
+      onClick?.();
+      if (!onNavigate) return;
+      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {
+        return;
+      }
+      event.preventDefault();
+      onNavigate(href);
+    };
+    const classes = {
+      // A quiet icon control, deliberately NOT a second gradient pill: a header should carry one
+      // primary CTA ("Get started"), and a competing coloured button next to it reads as clutter.
+      // This matches the theme toggle's visual weight, so the row scans as [utilities] [CTA].
+      // The prominent, labelled entry point to /explore is the floating bubble, which is visible
+      // on every page without scrolling. `shrink-0` keeps it from squeezing the nav.
+      header: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+      mobile: "inline-flex w-full items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium text-card-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+      floating: "fixed bottom-5 right-5 z-40 inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-primary to-primary/70 px-4 py-3 text-sm font-medium text-primary-foreground shadow-lg transition-opacity hover:opacity-90"
+    };
+    const hooks = {
+      header: "cta-header",
+      mobile: "cta-mobile",
+      floating: "cta-floating"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        ref,
+        "data-boff-explore": hooks[variant],
+        href,
+        onClick: handleClick,
+        "aria-label": label,
+        "aria-current": isActive ? "page" : void 0,
+        "aria-expanded": expanded,
+        "aria-haspopup": expanded === void 0 ? void 0 : "dialog",
+        "aria-controls": expanded === void 0 ? void 0 : controls,
+        className: cn(
+          classes[variant],
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          className
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: cn(
-              variant === "floating" && "hidden sm:inline",
-              // Never labelled in the header — see the class comment above.
-              variant === "header" && "hidden"
-            ),
-            children: label
-          }
-        )
-      ]
-    }
-  );
-}
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.Sparkles,
+            {
+              className: cn(
+                "shrink-0",
+                variant === "floating" ? "h-4 w-4" : variant === "header" ? "h-5 w-5" : "h-3.5 w-3.5"
+              ),
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                variant === "floating" && "hidden sm:inline",
+                // Never labelled in the header — see the class comment above.
+                variant === "header" && "hidden"
+              ),
+              children: label
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 
 exports.ExploreCta = ExploreCta;
 //# sourceMappingURL=explore-cta.js.map

package/dist/components/explore-cta.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/explore-cta.tsx"],"names":["twMerge","clsx","useState","useEffect","jsxs","jsx","Sparkles"],"mappings":"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","file":"explore-cta.js","sourcesContent":["/**\n * Utility function to merge Tailwind CSS classes\n * Combines clsx and tailwind-merge for optimal class handling\n */\n\nimport { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge multiple class names intelligently\n * - Handles conditional classes via clsx\n * - Deduplicates and resolves Tailwind conflicts via tailwind-merge\n *\n * @example\n * ```ts\n * cn('px-4 py-2', 'bg-blue-500', { 'text-white': isActive })\n * // => 'px-4 py-2 bg-blue-500 text-white' (if isActive is true)\n * ```\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * ExploreCta — the entry point to `/explore` from a site's navigation.\n *\n * Three shapes of the same link, so a product site can place it once in the\n * desktop header, once in the mobile menu, and optionally as a floating bubble\n * on content pages, without any of them re-implementing the styling:\n *\n * - `header`   — a gradient sparkle pill for the desktop nav.\n * - `mobile`   — a compact full-width row for a mobile menu list.\n * - `floating` — a fixed bottom-right bubble; hides itself on `/explore`\n *                so it never covers the page it links to.\n *\n * Import from the package ROOT (`@burdenoff/website-sdk`) for consistency with\n * `ExplorePage`, which must be root-imported because of tsup's\n * `splitting: false`. This component holds no context of its own, so a\n * sub-path import also works — but keeping both on the root import is one less\n * footgun for the 38 sites that ship them together.\n *\n * @example\n * ```tsx\n * import { ExploreCta } from '@burdenoff/website-sdk'\n *\n * <ExploreCta variant=\"header\" onNavigate={(href) => navigate(href)} />\n * <ExploreCta variant=\"floating\" currentPath={location.pathname} />\n * ```\n */\n\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nimport { Sparkles } from \"lucide-react\";\n\nimport { cn } from \"../utils/cn\";\n\nexport interface ExploreCtaProps {\n  /** Which of the three presentations to render. */\n  variant: \"header\" | \"mobile\" | \"floating\";\n  /** Target route. Default `/explore`. */\n  href?: string;\n  /** Visible label / accessible name. Default `Ask AI`. */\n  label?: string;\n  /** Extra classes for the rendered element. */\n  className?: string;\n  /** SPA navigation. When omitted the component renders a plain `<a href>`. */\n  onNavigate?: (href: string) => void;\n  /** Extra click handler (analytics, closing a mobile menu, …). */\n  onClick?: () => void;\n  /**\n   * Current route, when the host knows it (`useLocation().pathname`).\n   * Used to mark the link as `aria-current=\"page\"` and to hide the floating\n   * bubble on the Explore page itself. Falls back to `window.location.pathname`,\n   * which cannot observe SPA `pushState` navigations on its own.\n   */\n  currentPath?: string;\n}\n\n/**\n * Resolve the active path without breaking SSR/prerender: the first render\n * always returns `null` (matching the server output), and the real value lands\n * in an effect. `popstate` covers back/forward; hosts that navigate with\n * `pushState` should pass `currentPath` from their router.\n */\nfunction useCurrentPath(explicit?: string): string | null {\n  const [path, setPath] = useState<string | null>(explicit ?? null);\n\n  useEffect(() => {\n    if (explicit !== undefined) {\n      setPath(explicit);\n      return;\n    }\n    if (typeof window === \"undefined\") return;\n    const read = () => setPath(window.location.pathname);\n    read();\n    window.addEventListener(\"popstate\", read);\n    return () => window.removeEventListener(\"popstate\", read);\n  }, [explicit]);\n\n  return path;\n}\n\n/** `/explore` and `/explore/` are the same page. */\nfunction samePath(a: string | null, b: string): boolean {\n  if (!a) return false;\n  const norm = (v: string) => (v.length > 1 ? v.replace(/\\/+$/, \"\") : v);\n  return norm(a) === norm(b);\n}\n\nexport function ExploreCta({\n  variant,\n  href = \"/explore\",\n  label = \"Ask AI\",\n  className,\n  onNavigate,\n  onClick,\n  currentPath,\n}: ExploreCtaProps) {\n  const path = useCurrentPath(currentPath);\n  const isActive = samePath(path, href);\n\n  // The floating bubble exists to get visitors TO /explore. On /explore it is\n  // pure obstruction, so it removes itself.\n  if (variant === \"floating\" && isActive) return null;\n\n  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    onClick?.();\n    if (!onNavigate) return;\n    // Let the browser handle modified clicks (new tab, download, …).\n    if (\n      event.defaultPrevented ||\n      event.metaKey ||\n      event.ctrlKey ||\n      event.shiftKey ||\n      event.altKey ||\n      event.button !== 0\n    ) {\n      return;\n    }\n    event.preventDefault();\n    onNavigate(href);\n  };\n\n  const classes: Record<ExploreCtaProps[\"variant\"], string> = {\n    // A quiet icon control, deliberately NOT a second gradient pill: a header should carry one\n    // primary CTA (\"Get started\"), and a competing coloured button next to it reads as clutter.\n    // This matches the theme toggle's visual weight, so the row scans as [utilities] [CTA].\n    // The prominent, labelled entry point to /explore is the floating bubble, which is visible\n    // on every page without scrolling. `shrink-0` keeps it from squeezing the nav.\n    header:\n      \"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground\",\n    mobile:\n      \"inline-flex w-full items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium text-card-foreground transition-colors hover:bg-accent hover:text-accent-foreground\",\n    floating:\n      \"fixed bottom-5 right-5 z-40 inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-primary to-primary/70 px-4 py-3 text-sm font-medium text-primary-foreground shadow-lg transition-opacity hover:opacity-90\",\n  };\n\n  const hooks: Record<ExploreCtaProps[\"variant\"], string> = {\n    header: \"cta-header\",\n    mobile: \"cta-mobile\",\n    floating: \"cta-floating\",\n  };\n\n  return (\n    <a\n      data-boff-explore={hooks[variant]}\n      href={href}\n      onClick={handleClick}\n      aria-label={label}\n      aria-current={isActive ? \"page\" : undefined}\n      className={cn(\n        classes[variant],\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        className,\n      )}\n    >\n      <Sparkles\n        className={cn(\n          \"shrink-0\",\n          variant === \"floating\"\n            ? \"h-4 w-4\"\n            : variant === \"header\"\n              ? \"h-5 w-5\"\n              : \"h-3.5 w-3.5\",\n        )}\n        aria-hidden=\"true\"\n      />\n      {/* The icon alone carries the affordance where space is tight; `aria-label` carries\n          the accessible name at every width, so hiding the text costs nothing to a\n          screen reader. Floating shows its label from `sm` up, header from `2xl`. */}\n      <span\n        className={cn(\n          variant === \"floating\" && \"hidden sm:inline\",\n          // Never labelled in the header — see the class comment above.\n          variant === \"header\" && \"hidden\",\n        )}\n      >\n        {label}\n      </span>\n    </a>\n  );\n}\n"]}
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/explore-cta.tsx"],"names":["twMerge","clsx","useState","useEffect","forwardRef","ExploreCta","jsxs","jsx","Sparkles"],"mappings":"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","file":"explore-cta.js","sourcesContent":["/**\n * Utility function to merge Tailwind CSS classes\n * Combines clsx and tailwind-merge for optimal class handling\n */\n\nimport { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge multiple class names intelligently\n * - Handles conditional classes via clsx\n * - Deduplicates and resolves Tailwind conflicts via tailwind-merge\n *\n * @example\n * ```ts\n * cn('px-4 py-2', 'bg-blue-500', { 'text-white': isActive })\n * // => 'px-4 py-2 bg-blue-500 text-white' (if isActive is true)\n * ```\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * ExploreCta — the entry point to `/explore` from a site's navigation.\n *\n * Three shapes of the same link, so a product site can place it once in the\n * desktop header, once in the mobile menu, and optionally as a floating bubble\n * on content pages, without any of them re-implementing the styling:\n *\n * - `header`   — a gradient sparkle pill for the desktop nav.\n * - `mobile`   — a compact full-width row for a mobile menu list.\n * - `floating` — a fixed bottom-right bubble; hides itself on `/explore`\n *                so it never covers the page it links to.\n *\n * Import from the package ROOT (`@burdenoff/website-sdk`) for consistency with\n * `ExplorePage`, which must be root-imported because of tsup's\n * `splitting: false`. This component holds no context of its own, so a\n * sub-path import also works — but keeping both on the root import is one less\n * footgun for the 38 sites that ship them together.\n *\n * @example\n * ```tsx\n * import { ExploreCta } from '@burdenoff/website-sdk'\n *\n * <ExploreCta variant=\"header\" onNavigate={(href) => navigate(href)} />\n * <ExploreCta variant=\"floating\" currentPath={location.pathname} />\n * ```\n */\n\"use client\";\n\nimport { forwardRef, useEffect, useState } from \"react\";\n\nimport { Sparkles } from \"lucide-react\";\n\nimport { cn } from \"../utils/cn\";\n\nexport interface ExploreCtaProps {\n  /** Which of the three presentations to render. */\n  variant: \"header\" | \"mobile\" | \"floating\";\n  /** Target route. Default `/explore`. */\n  href?: string;\n  /** Visible label / accessible name. Default `Ask AI`. */\n  label?: string;\n  /** Extra classes for the rendered element. */\n  className?: string;\n  /** SPA navigation. When omitted the component renders a plain `<a href>`. */\n  onNavigate?: (href: string) => void;\n  /** Extra click handler (analytics, closing a mobile menu, …). */\n  onClick?: () => void;\n  /**\n   * Current route, when the host knows it (`useLocation().pathname`).\n   * Used to mark the link as `aria-current=\"page\"` and to hide the floating\n   * bubble on the Explore page itself. Falls back to `window.location.pathname`,\n   * which cannot observe SPA `pushState` navigations on its own.\n   */\n  currentPath?: string;\n  /**\n   * BOFF-9697. For a host whose floating button opens the site-wide assistant panel (`ExplorePanel`) instead of\n   * navigating: whether that panel is open. When set, the link also says it opens a dialog (`aria-haspopup`) and\n   * which one (`controls`). Unset (every other site): the link renders exactly as before.\n   */\n  expanded?: boolean;\n  /** BOFF-9697. The id of the panel the button opens; used only together with `expanded`. */\n  controls?: string;\n}\n\n/**\n * Resolve the active path without breaking SSR/prerender: the first render\n * always returns `null` (matching the server output), and the real value lands\n * in an effect. `popstate` covers back/forward; hosts that navigate with\n * `pushState` should pass `currentPath` from their router.\n */\nfunction useCurrentPath(explicit?: string): string | null {\n  const [path, setPath] = useState<string | null>(explicit ?? null);\n\n  useEffect(() => {\n    if (explicit !== undefined) {\n      setPath(explicit);\n      return;\n    }\n    if (typeof window === \"undefined\") return;\n    const read = () => setPath(window.location.pathname);\n    read();\n    window.addEventListener(\"popstate\", read);\n    return () => window.removeEventListener(\"popstate\", read);\n  }, [explicit]);\n\n  return path;\n}\n\n/** `/explore` and `/explore/` are the same page. */\nfunction samePath(a: string | null, b: string): boolean {\n  if (!a) return false;\n  const norm = (v: string) => (v.length > 1 ? v.replace(/\\/+$/, \"\") : v);\n  return norm(a) === norm(b);\n}\n\n/** The rendered `<a>` is forwarded, so a panel can return focus to the button that opened it (BOFF-9697). */\nexport const ExploreCta = forwardRef<HTMLAnchorElement, ExploreCtaProps>(\n  function ExploreCta(\n    {\n      variant,\n      href = \"/explore\",\n      label = \"Ask AI\",\n      className,\n      onNavigate,\n      onClick,\n      currentPath,\n      expanded,\n      controls,\n    },\n    ref,\n  ) {\n    const path = useCurrentPath(currentPath);\n    const isActive = samePath(path, href);\n\n    // The floating bubble exists to get visitors TO /explore. On /explore it is\n    // pure obstruction, so it removes itself.\n    if (variant === \"floating\" && isActive) return null;\n\n    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n      onClick?.();\n      if (!onNavigate) return;\n      // Let the browser handle modified clicks (new tab, download, …).\n      if (\n        event.defaultPrevented ||\n        event.metaKey ||\n        event.ctrlKey ||\n        event.shiftKey ||\n        event.altKey ||\n        event.button !== 0\n      ) {\n        return;\n      }\n      event.preventDefault();\n      onNavigate(href);\n    };\n\n    const classes: Record<ExploreCtaProps[\"variant\"], string> = {\n      // A quiet icon control, deliberately NOT a second gradient pill: a header should carry one\n      // primary CTA (\"Get started\"), and a competing coloured button next to it reads as clutter.\n      // This matches the theme toggle's visual weight, so the row scans as [utilities] [CTA].\n      // The prominent, labelled entry point to /explore is the floating bubble, which is visible\n      // on every page without scrolling. `shrink-0` keeps it from squeezing the nav.\n      header:\n        \"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground\",\n      mobile:\n        \"inline-flex w-full items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium text-card-foreground transition-colors hover:bg-accent hover:text-accent-foreground\",\n      floating:\n        \"fixed bottom-5 right-5 z-40 inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-primary to-primary/70 px-4 py-3 text-sm font-medium text-primary-foreground shadow-lg transition-opacity hover:opacity-90\",\n    };\n\n    const hooks: Record<ExploreCtaProps[\"variant\"], string> = {\n      header: \"cta-header\",\n      mobile: \"cta-mobile\",\n      floating: \"cta-floating\",\n    };\n\n    return (\n      <a\n        ref={ref}\n        data-boff-explore={hooks[variant]}\n        href={href}\n        onClick={handleClick}\n        aria-label={label}\n        aria-current={isActive ? \"page\" : undefined}\n        aria-expanded={expanded}\n        aria-haspopup={expanded === undefined ? undefined : \"dialog\"}\n        aria-controls={expanded === undefined ? undefined : controls}\n        className={cn(\n          classes[variant],\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n          className,\n        )}\n      >\n        <Sparkles\n          className={cn(\n            \"shrink-0\",\n            variant === \"floating\"\n              ? \"h-4 w-4\"\n              : variant === \"header\"\n                ? \"h-5 w-5\"\n                : \"h-3.5 w-3.5\",\n          )}\n          aria-hidden=\"true\"\n        />\n        {/* The icon alone carries the affordance where space is tight; `aria-label` carries\n          the accessible name at every width, so hiding the text costs nothing to a\n          screen reader. Floating shows its label from `sm` up, header from `2xl`. */}\n        <span\n          className={cn(\n            variant === \"floating\" && \"hidden sm:inline\",\n            // Never labelled in the header — see the class comment above.\n            variant === \"header\" && \"hidden\",\n          )}\n        >\n          {label}\n        </span>\n      </a>\n    );\n  },\n);\n"]}

package/dist/components/explore-cta.mjs

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import { Sparkles } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -27,81 +27,89 @@ function samePath(a, b) {
   const norm = (v) => v.length > 1 ? v.replace(/\/+$/, "") : v;
   return norm(a) === norm(b);
 }
-function ExploreCta({
-  variant,
-  href = "/explore",
-  label = "Ask AI",
-  className,
-  onNavigate,
-  onClick,
-  currentPath
-}) {
-  const path = useCurrentPath(currentPath);
-  const isActive = samePath(path, href);
-  if (variant === "floating" && isActive) return null;
-  const handleClick = (event) => {
-    onClick?.();
-    if (!onNavigate) return;
-    if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {
-      return;
-    }
-    event.preventDefault();
-    onNavigate(href);
-  };
-  const classes = {
-    // A quiet icon control, deliberately NOT a second gradient pill: a header should carry one
-    // primary CTA ("Get started"), and a competing coloured button next to it reads as clutter.
-    // This matches the theme toggle's visual weight, so the row scans as [utilities] [CTA].
-    // The prominent, labelled entry point to /explore is the floating bubble, which is visible
-    // on every page without scrolling. `shrink-0` keeps it from squeezing the nav.
-    header: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
-    mobile: "inline-flex w-full items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium text-card-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
-    floating: "fixed bottom-5 right-5 z-40 inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-primary to-primary/70 px-4 py-3 text-sm font-medium text-primary-foreground shadow-lg transition-opacity hover:opacity-90"
-  };
-  const hooks = {
-    header: "cta-header",
-    mobile: "cta-mobile",
-    floating: "cta-floating"
-  };
-  return /* @__PURE__ */ jsxs(
-    "a",
-    {
-      "data-boff-explore": hooks[variant],
-      href,
-      onClick: handleClick,
-      "aria-label": label,
-      "aria-current": isActive ? "page" : void 0,
-      className: cn(
-        classes[variant],
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          Sparkles,
-          {
-            className: cn(
-              "shrink-0",
-              variant === "floating" ? "h-4 w-4" : variant === "header" ? "h-5 w-5" : "h-3.5 w-3.5"
-            ),
-            "aria-hidden": "true"
-          }
+var ExploreCta = forwardRef(
+  function ExploreCta2({
+    variant,
+    href = "/explore",
+    label = "Ask AI",
+    className,
+    onNavigate,
+    onClick,
+    currentPath,
+    expanded,
+    controls
+  }, ref) {
+    const path = useCurrentPath(currentPath);
+    const isActive = samePath(path, href);
+    if (variant === "floating" && isActive) return null;
+    const handleClick = (event) => {
+      onClick?.();
+      if (!onNavigate) return;
+      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {
+        return;
+      }
+      event.preventDefault();
+      onNavigate(href);
+    };
+    const classes = {
+      // A quiet icon control, deliberately NOT a second gradient pill: a header should carry one
+      // primary CTA ("Get started"), and a competing coloured button next to it reads as clutter.
+      // This matches the theme toggle's visual weight, so the row scans as [utilities] [CTA].
+      // The prominent, labelled entry point to /explore is the floating bubble, which is visible
+      // on every page without scrolling. `shrink-0` keeps it from squeezing the nav.
+      header: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+      mobile: "inline-flex w-full items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium text-card-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+      floating: "fixed bottom-5 right-5 z-40 inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-primary to-primary/70 px-4 py-3 text-sm font-medium text-primary-foreground shadow-lg transition-opacity hover:opacity-90"
+    };
+    const hooks = {
+      header: "cta-header",
+      mobile: "cta-mobile",
+      floating: "cta-floating"
+    };
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        ref,
+        "data-boff-explore": hooks[variant],
+        href,
+        onClick: handleClick,
+        "aria-label": label,
+        "aria-current": isActive ? "page" : void 0,
+        "aria-expanded": expanded,
+        "aria-haspopup": expanded === void 0 ? void 0 : "dialog",
+        "aria-controls": expanded === void 0 ? void 0 : controls,
+        className: cn(
+          classes[variant],
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          className
         ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              variant === "floating" && "hidden sm:inline",
-              // Never labelled in the header — see the class comment above.
-              variant === "header" && "hidden"
-            ),
-            children: label
-          }
-        )
-      ]
-    }
-  );
-}
+        children: [
+          /* @__PURE__ */ jsx(
+            Sparkles,
+            {
+              className: cn(
+                "shrink-0",
+                variant === "floating" ? "h-4 w-4" : variant === "header" ? "h-5 w-5" : "h-3.5 w-3.5"
+              ),
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                variant === "floating" && "hidden sm:inline",
+                // Never labelled in the header — see the class comment above.
+                variant === "header" && "hidden"
+              ),
+              children: label
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 
 export { ExploreCta };
 //# sourceMappingURL=explore-cta.mjs.map

package/dist/components/explore-cta.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/explore-cta.tsx"],"names":[],"mappings":"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","file":"explore-cta.mjs","sourcesContent":["/**\n * Utility function to merge Tailwind CSS classes\n * Combines clsx and tailwind-merge for optimal class handling\n */\n\nimport { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge multiple class names intelligently\n * - Handles conditional classes via clsx\n * - Deduplicates and resolves Tailwind conflicts via tailwind-merge\n *\n * @example\n * ```ts\n * cn('px-4 py-2', 'bg-blue-500', { 'text-white': isActive })\n * // => 'px-4 py-2 bg-blue-500 text-white' (if isActive is true)\n * ```\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * ExploreCta — the entry point to `/explore` from a site's navigation.\n *\n * Three shapes of the same link, so a product site can place it once in the\n * desktop header, once in the mobile menu, and optionally as a floating bubble\n * on content pages, without any of them re-implementing the styling:\n *\n * - `header`   — a gradient sparkle pill for the desktop nav.\n * - `mobile`   — a compact full-width row for a mobile menu list.\n * - `floating` — a fixed bottom-right bubble; hides itself on `/explore`\n *                so it never covers the page it links to.\n *\n * Import from the package ROOT (`@burdenoff/website-sdk`) for consistency with\n * `ExplorePage`, which must be root-imported because of tsup's\n * `splitting: false`. This component holds no context of its own, so a\n * sub-path import also works — but keeping both on the root import is one less\n * footgun for the 38 sites that ship them together.\n *\n * @example\n * ```tsx\n * import { ExploreCta } from '@burdenoff/website-sdk'\n *\n * <ExploreCta variant=\"header\" onNavigate={(href) => navigate(href)} />\n * <ExploreCta variant=\"floating\" currentPath={location.pathname} />\n * ```\n */\n\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nimport { Sparkles } from \"lucide-react\";\n\nimport { cn } from \"../utils/cn\";\n\nexport interface ExploreCtaProps {\n  /** Which of the three presentations to render. */\n  variant: \"header\" | \"mobile\" | \"floating\";\n  /** Target route. Default `/explore`. */\n  href?: string;\n  /** Visible label / accessible name. Default `Ask AI`. */\n  label?: string;\n  /** Extra classes for the rendered element. */\n  className?: string;\n  /** SPA navigation. When omitted the component renders a plain `<a href>`. */\n  onNavigate?: (href: string) => void;\n  /** Extra click handler (analytics, closing a mobile menu, …). */\n  onClick?: () => void;\n  /**\n   * Current route, when the host knows it (`useLocation().pathname`).\n   * Used to mark the link as `aria-current=\"page\"` and to hide the floating\n   * bubble on the Explore page itself. Falls back to `window.location.pathname`,\n   * which cannot observe SPA `pushState` navigations on its own.\n   */\n  currentPath?: string;\n}\n\n/**\n * Resolve the active path without breaking SSR/prerender: the first render\n * always returns `null` (matching the server output), and the real value lands\n * in an effect. `popstate` covers back/forward; hosts that navigate with\n * `pushState` should pass `currentPath` from their router.\n */\nfunction useCurrentPath(explicit?: string): string | null {\n  const [path, setPath] = useState<string | null>(explicit ?? null);\n\n  useEffect(() => {\n    if (explicit !== undefined) {\n      setPath(explicit);\n      return;\n    }\n    if (typeof window === \"undefined\") return;\n    const read = () => setPath(window.location.pathname);\n    read();\n    window.addEventListener(\"popstate\", read);\n    return () => window.removeEventListener(\"popstate\", read);\n  }, [explicit]);\n\n  return path;\n}\n\n/** `/explore` and `/explore/` are the same page. */\nfunction samePath(a: string | null, b: string): boolean {\n  if (!a) return false;\n  const norm = (v: string) => (v.length > 1 ? v.replace(/\\/+$/, \"\") : v);\n  return norm(a) === norm(b);\n}\n\nexport function ExploreCta({\n  variant,\n  href = \"/explore\",\n  label = \"Ask AI\",\n  className,\n  onNavigate,\n  onClick,\n  currentPath,\n}: ExploreCtaProps) {\n  const path = useCurrentPath(currentPath);\n  const isActive = samePath(path, href);\n\n  // The floating bubble exists to get visitors TO /explore. On /explore it is\n  // pure obstruction, so it removes itself.\n  if (variant === \"floating\" && isActive) return null;\n\n  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    onClick?.();\n    if (!onNavigate) return;\n    // Let the browser handle modified clicks (new tab, download, …).\n    if (\n      event.defaultPrevented ||\n      event.metaKey ||\n      event.ctrlKey ||\n      event.shiftKey ||\n      event.altKey ||\n      event.button !== 0\n    ) {\n      return;\n    }\n    event.preventDefault();\n    onNavigate(href);\n  };\n\n  const classes: Record<ExploreCtaProps[\"variant\"], string> = {\n    // A quiet icon control, deliberately NOT a second gradient pill: a header should carry one\n    // primary CTA (\"Get started\"), and a competing coloured button next to it reads as clutter.\n    // This matches the theme toggle's visual weight, so the row scans as [utilities] [CTA].\n    // The prominent, labelled entry point to /explore is the floating bubble, which is visible\n    // on every page without scrolling. `shrink-0` keeps it from squeezing the nav.\n    header:\n      \"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground\",\n    mobile:\n      \"inline-flex w-full items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium text-card-foreground transition-colors hover:bg-accent hover:text-accent-foreground\",\n    floating:\n      \"fixed bottom-5 right-5 z-40 inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-primary to-primary/70 px-4 py-3 text-sm font-medium text-primary-foreground shadow-lg transition-opacity hover:opacity-90\",\n  };\n\n  const hooks: Record<ExploreCtaProps[\"variant\"], string> = {\n    header: \"cta-header\",\n    mobile: \"cta-mobile\",\n    floating: \"cta-floating\",\n  };\n\n  return (\n    <a\n      data-boff-explore={hooks[variant]}\n      href={href}\n      onClick={handleClick}\n      aria-label={label}\n      aria-current={isActive ? \"page\" : undefined}\n      className={cn(\n        classes[variant],\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        className,\n      )}\n    >\n      <Sparkles\n        className={cn(\n          \"shrink-0\",\n          variant === \"floating\"\n            ? \"h-4 w-4\"\n            : variant === \"header\"\n              ? \"h-5 w-5\"\n              : \"h-3.5 w-3.5\",\n        )}\n        aria-hidden=\"true\"\n      />\n      {/* The icon alone carries the affordance where space is tight; `aria-label` carries\n          the accessible name at every width, so hiding the text costs nothing to a\n          screen reader. Floating shows its label from `sm` up, header from `2xl`. */}\n      <span\n        className={cn(\n          variant === \"floating\" && \"hidden sm:inline\",\n          // Never labelled in the header — see the class comment above.\n          variant === \"header\" && \"hidden\",\n        )}\n      >\n        {label}\n      </span>\n    </a>\n  );\n}\n"]}
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/explore-cta.tsx"],"names":["ExploreCta"],"mappings":"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","file":"explore-cta.mjs","sourcesContent":["/**\n * Utility function to merge Tailwind CSS classes\n * Combines clsx and tailwind-merge for optimal class handling\n */\n\nimport { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge multiple class names intelligently\n * - Handles conditional classes via clsx\n * - Deduplicates and resolves Tailwind conflicts via tailwind-merge\n *\n * @example\n * ```ts\n * cn('px-4 py-2', 'bg-blue-500', { 'text-white': isActive })\n * // => 'px-4 py-2 bg-blue-500 text-white' (if isActive is true)\n * ```\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * ExploreCta — the entry point to `/explore` from a site's navigation.\n *\n * Three shapes of the same link, so a product site can place it once in the\n * desktop header, once in the mobile menu, and optionally as a floating bubble\n * on content pages, without any of them re-implementing the styling:\n *\n * - `header`   — a gradient sparkle pill for the desktop nav.\n * - `mobile`   — a compact full-width row for a mobile menu list.\n * - `floating` — a fixed bottom-right bubble; hides itself on `/explore`\n *                so it never covers the page it links to.\n *\n * Import from the package ROOT (`@burdenoff/website-sdk`) for consistency with\n * `ExplorePage`, which must be root-imported because of tsup's\n * `splitting: false`. This component holds no context of its own, so a\n * sub-path import also works — but keeping both on the root import is one less\n * footgun for the 38 sites that ship them together.\n *\n * @example\n * ```tsx\n * import { ExploreCta } from '@burdenoff/website-sdk'\n *\n * <ExploreCta variant=\"header\" onNavigate={(href) => navigate(href)} />\n * <ExploreCta variant=\"floating\" currentPath={location.pathname} />\n * ```\n */\n\"use client\";\n\nimport { forwardRef, useEffect, useState } from \"react\";\n\nimport { Sparkles } from \"lucide-react\";\n\nimport { cn } from \"../utils/cn\";\n\nexport interface ExploreCtaProps {\n  /** Which of the three presentations to render. */\n  variant: \"header\" | \"mobile\" | \"floating\";\n  /** Target route. Default `/explore`. */\n  href?: string;\n  /** Visible label / accessible name. Default `Ask AI`. */\n  label?: string;\n  /** Extra classes for the rendered element. */\n  className?: string;\n  /** SPA navigation. When omitted the component renders a plain `<a href>`. */\n  onNavigate?: (href: string) => void;\n  /** Extra click handler (analytics, closing a mobile menu, …). */\n  onClick?: () => void;\n  /**\n   * Current route, when the host knows it (`useLocation().pathname`).\n   * Used to mark the link as `aria-current=\"page\"` and to hide the floating\n   * bubble on the Explore page itself. Falls back to `window.location.pathname`,\n   * which cannot observe SPA `pushState` navigations on its own.\n   */\n  currentPath?: string;\n  /**\n   * BOFF-9697. For a host whose floating button opens the site-wide assistant panel (`ExplorePanel`) instead of\n   * navigating: whether that panel is open. When set, the link also says it opens a dialog (`aria-haspopup`) and\n   * which one (`controls`). Unset (every other site): the link renders exactly as before.\n   */\n  expanded?: boolean;\n  /** BOFF-9697. The id of the panel the button opens; used only together with `expanded`. */\n  controls?: string;\n}\n\n/**\n * Resolve the active path without breaking SSR/prerender: the first render\n * always returns `null` (matching the server output), and the real value lands\n * in an effect. `popstate` covers back/forward; hosts that navigate with\n * `pushState` should pass `currentPath` from their router.\n */\nfunction useCurrentPath(explicit?: string): string | null {\n  const [path, setPath] = useState<string | null>(explicit ?? null);\n\n  useEffect(() => {\n    if (explicit !== undefined) {\n      setPath(explicit);\n      return;\n    }\n    if (typeof window === \"undefined\") return;\n    const read = () => setPath(window.location.pathname);\n    read();\n    window.addEventListener(\"popstate\", read);\n    return () => window.removeEventListener(\"popstate\", read);\n  }, [explicit]);\n\n  return path;\n}\n\n/** `/explore` and `/explore/` are the same page. */\nfunction samePath(a: string | null, b: string): boolean {\n  if (!a) return false;\n  const norm = (v: string) => (v.length > 1 ? v.replace(/\\/+$/, \"\") : v);\n  return norm(a) === norm(b);\n}\n\n/** The rendered `<a>` is forwarded, so a panel can return focus to the button that opened it (BOFF-9697). */\nexport const ExploreCta = forwardRef<HTMLAnchorElement, ExploreCtaProps>(\n  function ExploreCta(\n    {\n      variant,\n      href = \"/explore\",\n      label = \"Ask AI\",\n      className,\n      onNavigate,\n      onClick,\n      currentPath,\n      expanded,\n      controls,\n    },\n    ref,\n  ) {\n    const path = useCurrentPath(currentPath);\n    const isActive = samePath(path, href);\n\n    // The floating bubble exists to get visitors TO /explore. On /explore it is\n    // pure obstruction, so it removes itself.\n    if (variant === \"floating\" && isActive) return null;\n\n    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n      onClick?.();\n      if (!onNavigate) return;\n      // Let the browser handle modified clicks (new tab, download, …).\n      if (\n        event.defaultPrevented ||\n        event.metaKey ||\n        event.ctrlKey ||\n        event.shiftKey ||\n        event.altKey ||\n        event.button !== 0\n      ) {\n        return;\n      }\n      event.preventDefault();\n      onNavigate(href);\n    };\n\n    const classes: Record<ExploreCtaProps[\"variant\"], string> = {\n      // A quiet icon control, deliberately NOT a second gradient pill: a header should carry one\n      // primary CTA (\"Get started\"), and a competing coloured button next to it reads as clutter.\n      // This matches the theme toggle's visual weight, so the row scans as [utilities] [CTA].\n      // The prominent, labelled entry point to /explore is the floating bubble, which is visible\n      // on every page without scrolling. `shrink-0` keeps it from squeezing the nav.\n      header:\n        \"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground\",\n      mobile:\n        \"inline-flex w-full items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium text-card-foreground transition-colors hover:bg-accent hover:text-accent-foreground\",\n      floating:\n        \"fixed bottom-5 right-5 z-40 inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-primary to-primary/70 px-4 py-3 text-sm font-medium text-primary-foreground shadow-lg transition-opacity hover:opacity-90\",\n    };\n\n    const hooks: Record<ExploreCtaProps[\"variant\"], string> = {\n      header: \"cta-header\",\n      mobile: \"cta-mobile\",\n      floating: \"cta-floating\",\n    };\n\n    return (\n      <a\n        ref={ref}\n        data-boff-explore={hooks[variant]}\n        href={href}\n        onClick={handleClick}\n        aria-label={label}\n        aria-current={isActive ? \"page\" : undefined}\n        aria-expanded={expanded}\n        aria-haspopup={expanded === undefined ? undefined : \"dialog\"}\n        aria-controls={expanded === undefined ? undefined : controls}\n        className={cn(\n          classes[variant],\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n          className,\n        )}\n      >\n        <Sparkles\n          className={cn(\n            \"shrink-0\",\n            variant === \"floating\"\n              ? \"h-4 w-4\"\n              : variant === \"header\"\n                ? \"h-5 w-5\"\n                : \"h-3.5 w-3.5\",\n          )}\n          aria-hidden=\"true\"\n        />\n        {/* The icon alone carries the affordance where space is tight; `aria-label` carries\n          the accessible name at every width, so hiding the text costs nothing to a\n          screen reader. Floating shows its label from `sm` up, header from `2xl`. */}\n        <span\n          className={cn(\n            variant === \"floating\" && \"hidden sm:inline\",\n            // Never labelled in the header — see the class comment above.\n            variant === \"header\" && \"hidden\",\n          )}\n        >\n          {label}\n        </span>\n      </a>\n    );\n  },\n);\n"]}

package/dist/components/explore.d.mts

@@ -1,4 +1,4 @@
 import 'react';
-export { E as EXPLORE_PREFILL_MAX_LENGTH, d as ExplorePage, e as ExplorePageProps, l as ExploreProvenance, m as ExploreReferenceKind, f as answerPlainText, g as answerSpeechText, h as exploreQuestionHref, i as inlineImageOrigins, j as isInlineImageAllowed, k as isInlineVideoAllowed, n as logoUrlOf, o as productNamesByOrigin, r as referenceKindOf, s as summariseReferences } from '../explore-POqE7J8r.mjs';
-import '../explore-types-BB8HNFzX.mjs';
+export { a as EXPLORE_PREFILL_MAX_LENGTH, e as ExplorePage, f as ExplorePageProps, m as ExploreProvenance, n as ExploreReferenceKind, g as answerPlainText, h as answerSpeechText, i as exploreQuestionHref, j as inlineImageOrigins, k as isInlineImageAllowed, l as isInlineVideoAllowed, o as logoUrlOf, q as productNamesByOrigin, r as referenceKindOf, s as summariseReferences } from '../explore-BEgq1_0O.mjs';
+import '../explore-types-_9UJu6EA.mjs';
 import 'react-markdown';

package/dist/components/explore.d.ts

@@ -1,4 +1,4 @@
 import 'react';
-export { E as EXPLORE_PREFILL_MAX_LENGTH, d as ExplorePage, e as ExplorePageProps, l as ExploreProvenance, m as ExploreReferenceKind, f as answerPlainText, g as answerSpeechText, h as exploreQuestionHref, i as inlineImageOrigins, j as isInlineImageAllowed, k as isInlineVideoAllowed, n as logoUrlOf, o as productNamesByOrigin, r as referenceKindOf, s as summariseReferences } from '../explore-D6kon7uz.js';
-import '../explore-types-BB8HNFzX.js';
+export { a as EXPLORE_PREFILL_MAX_LENGTH, e as ExplorePage, f as ExplorePageProps, m as ExploreProvenance, n as ExploreReferenceKind, g as answerPlainText, h as answerSpeechText, i as exploreQuestionHref, j as inlineImageOrigins, k as isInlineImageAllowed, l as isInlineVideoAllowed, o as logoUrlOf, q as productNamesByOrigin, r as referenceKindOf, s as summariseReferences } from '../explore-CHiP9u-4.js';
+import '../explore-types-_9UJu6EA.js';
 import 'react-markdown';