blume 0.5.3 → 0.6.0

package/src/components/layout/Header.astro

@@ -18,6 +18,7 @@ interface Props {
     dark?: string;
     alt: string;
     href: string;
+    text?: string;
   } | null;
   navigation: Navigation;
   route: string;
@@ -57,6 +58,19 @@ const {
 const LogoSlot = resolveSlot(layout.Logo, Logo);
 const SearchSlot = resolveSlot(layout.Search, Search);
 
+// The mobile nav-toggle opens a drawer of navigation. On docs pages that drawer
+// is the sidebar tree (`hasSidebar`); on chrome-only pages (a landing page via
+// PageLayout) it's a tabs-only drawer the layout renders — so the button is also
+// needed whenever there are tabs to reveal.
+const showNavToggle = hasSidebar || navigation.tabs.length > 0;
+// Where the header's inline tab bar appears. With a sidebar it shares the `md`
+// breakpoint with the docs drawer; without one, the tabs-only drawer is the sole
+// mobile nav below `lg`, so the inline tabs wait until `lg` to avoid duplicating
+// the drawer's links between `md` and `lg`.
+const tabsNavClass = hasSidebar
+  ? "hidden gap-1 md:flex"
+  : "hidden gap-1 lg:flex";
+
 const iconButton =
   "inline-flex size-9 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground";
 
@@ -68,14 +82,23 @@ const iconButton =
 // styles fade while the non-animated ones snap, so we disable all transitions
 // for the swap (next-themes' disableTransitionOnChange trick), force a
 // synchronous style flush, then restore them on the next tick.
-const clickScript = `document.addEventListener("click",(e)=>{const t=e.target.closest("[data-blume-theme-toggle]");if(t){const d=document.documentElement;const next=d.dataset.theme==="dark"?"light":"dark";const s=document.createElement("style");s.appendChild(document.createTextNode("*,*::before,*::after{transition:none!important}"));document.head.appendChild(s);d.dataset.theme=next;localStorage.setItem("blume-theme",next);window.getComputedStyle(d).opacity;setTimeout(()=>document.head.removeChild(s),1);}const n=e.target.closest("[data-blume-nav-toggle]");if(n){document.documentElement.toggleAttribute("data-blume-nav-open");}const b=e.target.closest("[data-blume-banner-dismiss]");if(b){const bar=b.closest("[data-blume-banner]");const k=bar&&bar.getAttribute("data-banner-key");if(k){localStorage.setItem("blume-banner:"+k,"1");}document.documentElement.setAttribute("data-blume-banner-hidden","");}});`;
+//
+// The mobile drawer sits below the sticky header, but the banner above the
+// header has no fixed height (its text wraps), so the drawer's top offset can't
+// be static: on open we measure the header's on-screen bottom edge into
+// `--blume-drawer-top` (read by the drawer's `top`/`height`), lock page scroll
+// so the offset can't drift while open, and re-measure when a banner dismiss or
+// a resize/rotation moves the header. Crossing into the desktop breakpoint
+// (64rem, Tailwind `lg`) closes the drawer so the scroll lock can't outlive it.
+const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-blume-header]");if(h){document.documentElement.style.setProperty("--blume-drawer-top",h.getBoundingClientRect().bottom+"px");}};document.addEventListener("click",(e)=>{const t=e.target.closest("[data-blume-theme-toggle]");if(t){const d=document.documentElement;const next=d.dataset.theme==="dark"?"light":"dark";const s=document.createElement("style");s.appendChild(document.createTextNode("*,*::before,*::after{transition:none!important}"));document.head.appendChild(s);d.dataset.theme=next;localStorage.setItem("blume-theme",next);window.getComputedStyle(d).opacity;setTimeout(()=>document.head.removeChild(s),1);}const n=e.target.closest("[data-blume-nav-toggle]");if(n){const d=document.documentElement;const open=d.toggleAttribute("data-blume-nav-open");if(open){dr();}d.style.overflow=open?"hidden":"";}const b=e.target.closest("[data-blume-banner-dismiss]");if(b){const bar=b.closest("[data-blume-banner]");const k=bar&&bar.getAttribute("data-banner-key");if(k){localStorage.setItem("blume-banner:"+k,"1");}document.documentElement.setAttribute("data-blume-banner-hidden","");requestAnimationFrame(dr);}});addEventListener("resize",()=>{const d=document.documentElement;if(!d.hasAttribute("data-blume-nav-open")){return;}if(matchMedia("(min-width:64rem)").matches){d.removeAttribute("data-blume-nav-open");d.style.overflow="";}else{dr();}});})();`;
 ---
 
 <header
   class="sticky top-0 z-40 flex h-16 items-center gap-3 bg-background/90 px-4 backdrop-blur md:px-6"
+  data-blume-header
 >
   {
-    hasSidebar && (
+    showNavToggle && (
       <button
         aria-label="Toggle navigation"
         class={`${iconButton} lg:hidden`}
@@ -98,7 +121,7 @@ const clickScript = `document.addEventListener("click",(e)=>{const t=e.target.cl
   }
   {
     navigation.tabs.length > 0 && (
-      <nav aria-label="Sections" class="hidden gap-1 md:flex">
+      <nav aria-label="Sections" class={tabsNavClass}>
         {navigation.tabs.map((tab) => (
           <a
             aria-current={
@@ -117,7 +140,6 @@ const clickScript = `document.addEventListener("click",(e)=>{const t=e.target.cl
     )
   }
   <div class="flex-1"></div>
-  <slot name="ask" />
   {
     localeSwitch && localeSwitch.length > 1 && (
       <LanguageSwitcher
@@ -168,6 +190,7 @@ const clickScript = `document.addEventListener("click",(e)=>{const t=e.target.cl
       <span class="inline-flex dark:hidden"><Icon name="sun" size={18} /></span>
       <span class="hidden dark:inline-flex"><Icon name="moon" size={18} /></span>
     </button>
+    <slot name="ask" />
   </div>
 </header>
 <script is:inline set:html={clickScript} />

package/src/components/layout/Logo.astro

@@ -19,6 +19,10 @@ const logoLight = logo?.light;
 const logoDark = logo?.dark ?? logo?.light;
 const logoAlt = logo?.alt ?? "";
 const brandHref = logo?.href ?? "/";
+// Wordmark beside the mark: the configured `logo.text`, or the site title when
+// it's omitted. An explicit `""` hides it (an image-only logo whose mark already
+// carries the wordmark).
+const brandText = logo?.text ?? site.title;
 ---
 
 <a
@@ -46,5 +50,5 @@ const brandHref = logo?.href ?? "/";
         </>
       ))
   }
-  {site.title}
+  {brandText && <span>{brandText}</span>}
 </a>

package/src/components/layout/NavSelector.astro

@@ -1,5 +1,5 @@
 ---
-// A top-level navigation selector (Mintlify-style): a dropdown that switches
+// A top-level navigation selector: a dropdown that switches
 // between partitions of the site — a product, a version, or any grouped set of
 // destinations (`navigation.selectors` in the config). Zero-JS, built on
 // <details>/<summary> like the language switcher.

package/src/components/layout/NavTree.astro

@@ -129,13 +129,13 @@ const initialId =
             {panel.route ? (
               <a
                 aria-current={panel.route === currentRoute ? "page" : undefined}
-                class="min-w-0 flex-1 truncate font-semibold text-foreground text-sm hover:underline"
+                class="flex-1 truncate font-semibold text-foreground text-sm hover:underline"
                 href={panel.route}
               >
                 {panel.label}
               </a>
             ) : (
-              <span class="min-w-0 flex-1 truncate font-semibold text-foreground text-sm">
+              <span class="flex-1 truncate font-semibold text-foreground text-sm">
                 {panel.label}
               </span>
             )}
@@ -151,7 +151,7 @@ const initialId =
       ))}
     </blume-nav>
   ) : (
-    <ul class="m-0 list-none p-0">
+    <ul class="m-0 list-none space-y-px p-0">
       {items.map((item, index) => {
         if (item.kind === "page") {
           return (
@@ -161,7 +161,7 @@ const initialId =
                 class="block rounded-[0.65rem] px-2.5 py-1.5 text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:font-medium aria-[current=page]:text-foreground"
                 href={item.route}
               >
-                <span class="flex min-w-0 items-center gap-2">
+                <span class="flex items-center gap-2">
                   {item.icon && (
                     <Icon
                       class="shrink-0 text-muted-foreground"
@@ -169,7 +169,7 @@ const initialId =
                       size={14}
                     />
                   )}
-                  <span class="min-w-0 flex-1 truncate">{item.label}</span>
+                  <span class="flex-1 truncate">{item.label}</span>
                   {item.badge && <span class={badgeClassFor(item.badge)}>{item.badge}</span>}
                   {item.deprecated && (
                     <span class={deprecatedClass}>deprecated</span>
@@ -192,7 +192,7 @@ const initialId =
           return (
             <li class={spacing}>
               <button
-                class="flex w-full min-w-0 items-center gap-2 rounded-[0.65rem] px-2.5 py-1.5 text-left font-medium text-foreground text-sm transition-colors hover:bg-muted"
+                class="flex w-full items-center gap-2 rounded-[0.65rem] px-2.5 py-1.5 text-left font-medium text-foreground text-sm transition-colors hover:bg-muted"
                 data-nav-to={id}
                 type="button"
               >
@@ -203,7 +203,7 @@ const initialId =
                     size={14}
                   />
                 )}
-                <span class="min-w-0 flex-1 truncate">{item.label}</span>
+                <span class="flex-1 truncate">{item.label}</span>
                 {item.badge && <span class={badgeClassFor(item.badge)}>{item.badge}</span>}
                 <Icon
                   class="shrink-0 text-muted-foreground"
@@ -222,13 +222,13 @@ const initialId =
           return (
             <li class={spacing}>
               <details class="group" open={open}>
-                <summary class="mb-1 flex cursor-pointer list-none items-center gap-1.5 rounded-[0.65rem] px-2.5 py-1.5 font-medium text-foreground text-sm transition-colors hover:bg-muted [&::-webkit-details-marker]:hidden">
+                <summary class="flex cursor-pointer list-none items-center gap-1.5 rounded-[0.65rem] px-2.5 py-1.5 text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground [&::-webkit-details-marker]:hidden">
                   {item.route ? (
                     <a
                       aria-current={
                         item.route === currentRoute ? "page" : undefined
                       }
-                      class="-my-1 flex min-w-0 flex-1 items-center gap-1.5 rounded py-1 text-foreground transition-colors aria-[current=page]:font-semibold"
+                      class="-my-1 flex flex-1 items-center gap-1.5 rounded py-1 transition-colors aria-[current=page]:text-foreground aria-[current=page]:font-semibold"
                       href={item.route}
                     >
                       {item.icon && (
@@ -238,7 +238,7 @@ const initialId =
                           size={14}
                         />
                       )}
-                      <span class="min-w-0 flex-1 truncate">{item.label}</span>
+                      <span class="flex-1 truncate">{item.label}</span>
                       {item.badge && (
                         <span class={badgeClassFor(item.badge)}>{item.badge}</span>
                       )}
@@ -252,7 +252,7 @@ const initialId =
                           size={14}
                         />
                       )}
-                      <span class="min-w-0 flex-1 truncate">{item.label}</span>
+                      <span class="flex-1 truncate">{item.label}</span>
                       {item.badge && (
                         <span class={badgeClassFor(item.badge)}>{item.badge}</span>
                       )}
@@ -279,11 +279,11 @@ const initialId =
         // `flat` (default): a non-collapsible header with its items beneath.
         return (
           <li class={spacing}>
-            <p class="mb-2 flex min-w-0 items-center gap-1.5 px-2.5 font-medium text-foreground text-sm">
+            <p class="mb-2 flex items-center gap-1.5 px-2.5 font-medium text-foreground text-sm">
               {item.route ? (
                 <a
                   aria-current={item.route === currentRoute ? "page" : undefined}
-                  class="-ml-1 flex min-w-0 flex-1 items-center gap-1.5 rounded px-1 py-0.5 text-foreground transition-colors hover:bg-muted aria-[current=page]:bg-muted"
+                  class="-ml-1 flex flex-1 items-center gap-1.5 rounded px-1 py-0.5 text-foreground transition-colors hover:bg-muted aria-[current=page]:bg-muted"
                   href={item.route}
                 >
                   {item.icon && (
@@ -293,7 +293,7 @@ const initialId =
                       size={14}
                     />
                   )}
-                  <span class="min-w-0 truncate">{item.label}</span>
+                  <span class="truncate">{item.label}</span>
                   {item.badge && (
                     <span class={`ml-auto ${badgeClassFor(item.badge)}`}>{item.badge}</span>
                   )}
@@ -307,7 +307,7 @@ const initialId =
                       size={14}
                     />
                   )}
-                  <span class="min-w-0 truncate">{item.label}</span>
+                  <span class="truncate">{item.label}</span>
                   {item.badge && (
                     <span class={`ml-auto ${badgeClassFor(item.badge)}`}>{item.badge}</span>
                   )}

package/src/components/layout/PageActions.astro

@@ -7,7 +7,6 @@ import Icon from "../Icon.astro";
 interface Props {
   route: string;
   editUrl?: string | null;
-  askEnabled?: boolean;
   /** Show the "Export to PDF" action (native browser print). */
   exportPdf?: boolean;
   /** Show the "Export to EPUB" action (client-side, current page). */
@@ -20,17 +19,11 @@ interface Props {
   strings?: UIStrings["actions"];
 }
 
-const {
-  route,
-  editUrl,
-  askEnabled,
-  exportPdf,
-  exportEpub,
-  mcpUrl,
-  mcpName,
-  strings,
-} = Astro.props;
-const a = strings ?? EN_UI.actions;
+const { route, editUrl, exportPdf, exportEpub, mcpUrl, mcpName, strings } =
+  Astro.props;
+// Merge over the English defaults so a label missing from a translation (or from
+// a not-yet-regenerated snapshot) still renders instead of coming out blank.
+const a = { ...EN_UI.actions, ...strings };
 const mdPath = route === "/" ? "/index.md" : `${route}.md`;
 
 const GITHUB_LOGO = `<svg class="size-4 shrink-0" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">${GITHUB_MARK}</svg>`;
@@ -41,6 +34,8 @@ const LOGOS: Record<string, string> = {
     '<svg class="size-4 shrink-0" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"/></svg>',
   claude:
     '<svg class="size-4 shrink-0" fill="currentColor" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" fill-rule="evenodd" d="M2.3545 7.9775L4.7145 6.654L4.7545 6.539L4.7145 6.475H4.6L4.205 6.451L2.856 6.4145L1.6865 6.366L0.5535 6.305L0.268 6.2445L0 5.892L0.0275 5.716L0.2675 5.5555L0.6105 5.5855L1.3705 5.637L2.5095 5.716L3.3355 5.7645L4.56 5.892H4.7545L4.782 5.8135L4.715 5.7645L4.6635 5.716L3.4845 4.918L2.2085 4.074L1.5405 3.588L1.1785 3.3425L0.9965 3.1115L0.9175 2.6075L1.2455 2.2465L1.686 2.2765L1.7985 2.307L2.245 2.65L3.199 3.388L4.4445 4.3045L4.627 4.4565L4.6995 4.405L4.709 4.3685L4.627 4.2315L3.9495 3.0085L3.2265 1.7635L2.9045 1.2475L2.8195 0.938C2.78711 0.819128 2.76965 0.696687 2.7675 0.5735L3.1415 0.067L3.348 0L3.846 0.067L4.056 0.249L4.366 0.956L4.867 2.0705L5.6445 3.5855L5.8725 4.0345L5.994 4.4505L6.0395 4.578H6.1185V4.505L6.1825 3.652L6.301 2.6045L6.416 1.257L6.456 0.877L6.644 0.422L7.0175 0.176L7.3095 0.316L7.5495 0.6585L7.516 0.8805L7.373 1.806L7.0935 3.2575L6.9115 4.2285H7.0175L7.139 4.1075L7.6315 3.4545L8.4575 2.4225L8.8225 2.0125L9.2475 1.5605L9.521 1.345H10.0375L10.4175 1.9095L10.2475 2.4925L9.7155 3.166L9.275 3.737L8.643 4.587L8.248 5.267L8.2845 5.322L8.3785 5.312L9.8065 5.009L10.578 4.869L11.4985 4.7115L11.915 4.9055L11.9605 5.103L11.7965 5.5065L10.812 5.7495L9.6575 5.9805L7.938 6.387L7.917 6.402L7.9415 6.4325L8.716 6.5055L9.047 6.5235H9.858L11.368 6.636L11.763 6.897L12 7.216L11.9605 7.4585L11.353 7.7685L10.533 7.574L8.6185 7.119L7.9625 6.9545H7.8715V7.0095L8.418 7.5435L9.421 8.4485L10.6755 9.6135L10.739 9.9025L10.578 10.13L10.408 10.1055L9.3055 9.277L8.88 8.9035L7.917 8.0935H7.853V8.1785L8.075 8.503L9.2475 10.2635L9.3085 10.8035L9.2235 10.98L8.9195 11.0865L8.5855 11.0255L7.8985 10.063L7.191 8.9795L6.6195 8.008L6.5495 8.048L6.2125 11.675L6.0545 11.86L5.69 12L5.3865 11.7695L5.2255 11.396L5.3865 10.658L5.581 9.696L5.7385 8.931L5.8815 7.981L5.9665 7.665L5.9605 7.644L5.8905 7.653L5.1735 8.6365L4.0835 10.109L3.2205 11.0315L3.0135 11.1135L2.655 10.9285L2.6885 10.5975L2.889 10.303L4.083 8.785L4.803 7.844L5.268 7.301L5.265 7.222H5.2375L2.066 9.28L1.501 9.353L1.2575 9.125L1.288 8.752L1.4035 8.6305L2.3575 7.9745L2.3545 7.9775Z"/></svg>',
+  codex:
+    '<svg class="size-4 shrink-0" fill="currentColor" fill-rule="evenodd" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M8.086.457a6.105 6.105 0 013.046-.415c1.333.153 2.521.72 3.564 1.7a.117.117 0 00.107.029c1.408-.346 2.762-.224 4.061.366l.063.03.154.076c1.357.703 2.33 1.77 2.918 3.198.278.679.418 1.388.421 2.126a5.655 5.655 0 01-.18 1.631.167.167 0 00.04.155 5.982 5.982 0 011.578 2.891c.385 1.901-.01 3.615-1.183 5.14l-.182.22a6.063 6.063 0 01-2.934 1.851.162.162 0 00-.108.102c-.255.736-.511 1.364-.987 1.992-1.199 1.582-2.962 2.462-4.948 2.451-1.583-.008-2.986-.587-4.21-1.736a.145.145 0 00-.14-.032c-.518.167-1.04.191-1.604.185a5.924 5.924 0 01-2.595-.622 6.058 6.058 0 01-2.146-1.781c-.203-.269-.404-.522-.551-.821a7.74 7.74 0 01-.495-1.283 6.11 6.11 0 01-.017-3.064.166.166 0 00.008-.074.115.115 0 00-.037-.064 5.958 5.958 0 01-1.38-2.202 5.196 5.196 0 01-.333-1.589 6.915 6.915 0 01.188-2.132c.45-1.484 1.309-2.648 2.577-3.493.282-.188.55-.334.802-.438.286-.12.573-.22.861-.304a.129.129 0 00.087-.087A6.016 6.016 0 015.635 2.31C6.315 1.464 7.132.846 8.086.457zm-.804 7.85a.848.848 0 00-1.473.842l1.694 2.965-1.688 2.848a.849.849 0 001.46.864l1.94-3.272a.849.849 0 00.007-.854l-1.94-3.393zm5.446 6.24a.849.849 0 000 1.695h4.848a.849.849 0 000-1.696h-4.848z"/></svg>',
   cursor:
     '<svg class="size-4 shrink-0" viewBox="0 0 466.73 532.09" xmlns="http://www.w3.org/2000/svg"><path d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z" fill="currentColor"/></svg>',
   scira:
@@ -110,7 +105,10 @@ const menuRowClass =
             size={14}
           />
         </summary>
-        <div class="absolute right-0 left-0 z-50 mt-1 rounded-blume border border-border bg-background p-1 shadow-xl">
+        <div
+          class="absolute top-full right-2 z-50 mt-1 w-max min-w-[14rem] max-w-[22rem] rounded-blume border border-border bg-background p-1 shadow-xl"
+          data-blume-menu
+        >
           {exportPdf && (
             <button class={menuRowClass} data-blume-export-pdf type="button">
               <Icon name="file" size={16} />
@@ -130,15 +128,6 @@ const menuRowClass =
     )
   }
 
-  {
-    askEnabled && (
-      <button class={rowClass} data-blume-ask-ai type="button">
-        <Icon name="message-circle" size={16} />
-        {a.askAI}
-      </button>
-    )
-  }
-
   <details class="group relative">
     <summary
       class={`${rowClass} cursor-pointer list-none [&::-webkit-details-marker]:hidden`}
@@ -151,7 +140,10 @@ const menuRowClass =
         size={14}
       />
     </summary>
-    <div class="absolute right-0 left-0 z-50 mt-1 rounded-blume border border-border bg-background p-1 shadow-xl">
+    <div
+      class="absolute top-full right-2 z-50 mt-1 w-max min-w-[14rem] max-w-[22rem] rounded-blume border border-border bg-background p-1 shadow-xl"
+      data-blume-menu
+    >
       {
         PROVIDERS.map((provider, index) => (
           <>
@@ -186,7 +178,10 @@ const menuRowClass =
             size={14}
           />
         </summary>
-        <div class="absolute right-0 left-0 z-50 mt-1 rounded-blume border border-border bg-background p-1 shadow-xl">
+        <div
+          class="absolute top-full right-2 z-50 mt-1 w-max min-w-[14rem] max-w-[22rem] rounded-blume border border-border bg-background p-1 shadow-xl"
+          data-blume-menu
+        >
           <button class={menuRowClass} data-mcp-copy-url type="button">
             <Icon name="link" size={16} />
             <span class="flex-1" data-mcp-url-label>
@@ -199,6 +194,12 @@ const menuRowClass =
               {a.copyClaudeCode}
             </span>
           </button>
+          <button class={menuRowClass} data-mcp-copy-codex type="button">
+            <span set:html={LOGOS.codex} />
+            <span class="flex-1" data-mcp-codex-label>
+              {a.copyCodex}
+            </span>
+          </button>
           <hr class="my-1 border-border border-t" />
           <a class={menuRowClass} data-mcp-cursor rel="noreferrer">
             <span set:html={LOGOS.cursor} />
@@ -276,6 +277,46 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
 
   const root = document.querySelector("[data-blume-page-actions]");
   if (root) {
+    // The action dropdowns are native <details>. Make them behave like a proper
+    // menu: only one open at a time, and flip above the trigger when opening
+    // downward would run past the viewport bottom.
+    const dropdowns = [...root.querySelectorAll<HTMLDetailsElement>("details")];
+    const placeMenu = (details: HTMLDetailsElement) => {
+      const menu = details.querySelector<HTMLElement>("[data-blume-menu]");
+      const summary = details.querySelector("summary");
+      if (!(menu && summary)) {
+        return;
+      }
+      const rect = summary.getBoundingClientRect();
+      const margin = 8;
+      const flipUp =
+        rect.bottom + menu.offsetHeight + margin > window.innerHeight &&
+        rect.top - menu.offsetHeight - margin > 0;
+      menu.classList.toggle("top-full", !flipUp);
+      menu.classList.toggle("mt-1", !flipUp);
+      menu.classList.toggle("bottom-full", flipUp);
+      menu.classList.toggle("mb-1", flipUp);
+    };
+    for (const details of dropdowns) {
+      details.addEventListener("toggle", () => {
+        if (!details.open) {
+          return;
+        }
+        for (const other of dropdowns) {
+          if (other !== details) {
+            other.open = false;
+          }
+        }
+        placeMenu(details);
+      });
+    }
+    window.addEventListener("resize", () => {
+      const open = dropdowns.find((details) => details.open);
+      if (open) {
+        placeMenu(open);
+      }
+    });
+
     const md = root.getAttribute("data-md") ?? "";
     const copiedLabel = root.getAttribute("data-i18n-copied") || "Copied!";
     const absolute = new URL(md, location.origin).href;
@@ -296,12 +337,6 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
         window.scrollTo({ behavior: "smooth", top: 0 })
       );
 
-    root
-      .querySelector("[data-blume-ask-ai]")
-      ?.addEventListener("click", () =>
-        window.dispatchEvent(new CustomEvent("blume:open-ask-ai"))
-      );
-
     const mcpUrl = root.getAttribute("data-mcp-url");
     if (mcpUrl) {
       const rawName = root.getAttribute("data-mcp-name") || "docs";
@@ -360,6 +395,14 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
             root.querySelector("[data-mcp-claude-label]")
           )
         );
+      root
+        .querySelector("[data-mcp-copy-codex]")
+        ?.addEventListener("click", () =>
+          copy(
+            `codex mcp add ${id} --url ${mcpUrl}`,
+            root.querySelector("[data-mcp-codex-label]")
+          )
+        );
     }
 
     const label = root.querySelector("[data-blume-copy-label]");

package/src/components/layout/PageLayout.astro

@@ -190,6 +190,48 @@ const bannerScript = banner?.dismissible
     </Header>
     <main id="blume-content"><slot /></main>
     <slot name="footer" />
+    {
+      // Mobile nav for chrome-only pages: the header's inline tab bar is hidden
+      // below `lg` and there's no sidebar drawer, so surface the tabs in a
+      // slide-in drawer instead. It reuses the header's `data-blume-nav-toggle`
+      // machinery (drawer top, scroll lock, resize-close) — the hamburger button
+      // lives in the header; this is the panel it opens.
+      navigation.tabs.length > 0 && (
+        <>
+          <aside
+            aria-label="Navigation"
+            class="fixed top-[var(--blume-drawer-top,4rem)] start-0 z-[35] h-[calc(100dvh-var(--blume-drawer-top,4rem))] w-64 max-w-[80vw] -translate-x-[105%] overflow-y-auto border-border border-e bg-background px-5 pt-4 pb-6 transition-transform rtl:translate-x-[105%] [:where([data-blume-nav-open])_&]:translate-x-0! lg:hidden"
+          >
+            <nav aria-label="Sections">
+              <ul class="m-0 list-none p-0">
+                {navigation.tabs.map((tab) => (
+                  <li>
+                    <a
+                      aria-current={
+                        route === tab.path ||
+                        (tab.path !== "/" && route.startsWith(tab.path))
+                          ? "page"
+                          : undefined
+                      }
+                      class="block rounded-[0.65rem] px-2.5 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground"
+                      href={tab.path}
+                    >
+                      {tab.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          </aside>
+          <button
+            aria-label="Close navigation"
+            class="fixed inset-0 z-[30] hidden cursor-pointer border-0 bg-black/40 [:where([data-blume-nav-open])_&]:block lg:hidden"
+            data-blume-nav-toggle
+            type="button"
+          />
+        </>
+      )
+    }
     {
       clientDataJson && (
         <script

package/src/components/layout/ReferenceLayout.astro

@@ -18,6 +18,7 @@ interface Props {
     dark?: string;
     alt: string;
     href: string;
+    text?: string;
   } | null;
   favicon?: {
     href: string;

package/src/components/layout/RootLayout.astro

@@ -18,6 +18,7 @@ import Favicon from "./Favicon.astro";
 import Fonts from "./Fonts.astro";
 import { bannerInitScript, themeInitScript } from "./head-scripts.ts";
 import Header from "./Header.astro";
+import Icon from "../Icon.astro";
 import {
   findBreadcrumbs,
   flattenPages,
@@ -39,6 +40,7 @@ interface Props {
     dark?: string;
     alt: string;
     href: string;
+    text?: string;
   } | null;
   favicon?: {
     href: string;
@@ -341,11 +343,84 @@ const bannerScript = banner?.dismissible
     >
       <slot name="ask" slot="ask" />
     </HeaderSlot>
-    <div class:list={["mx-auto grid grid-cols-1 items-start", gridClass]}>
+    <div
+      class:list={["mx-auto grid grid-cols-1 items-start", gridClass]}
+      data-blume-doc-grid
+    >
       <aside
         aria-label="Primary"
-        class="fixed top-16 start-0 z-[35] h-[calc(100dvh-4rem)] w-64 max-w-[80vw] -translate-x-[105%] overflow-y-auto border-border border-e bg-background px-5 pt-4 pb-6 transition-transform rtl:translate-x-[105%] [:where([data-blume-nav-open])_&]:translate-x-0! lg:sticky lg:z-auto lg:w-auto lg:max-w-none lg:translate-x-0! lg:border-e-0 lg:bg-transparent lg:px-4"
+        class="fixed top-[var(--blume-drawer-top,4rem)] start-0 z-[35] h-[calc(100dvh-var(--blume-drawer-top,4rem))] w-64 max-w-[80vw] -translate-x-[105%] overflow-y-auto border-border border-e bg-background px-5 pt-4 pb-6 transition-transform rtl:translate-x-[105%] [:where([data-blume-nav-open])_&]:translate-x-0! lg:sticky lg:top-16 lg:z-auto lg:h-[calc(100dvh-4rem)] lg:w-auto lg:max-w-none lg:translate-x-0! lg:border-e-0 lg:bg-transparent lg:px-4"
       >
+        {
+          // Pinned links (blog, changelog, contact…) sit above every section on
+          // all breakpoints, outside the tab-scoped sidebar so they never change
+          // with the active tab. External hrefs open in a new tab.
+          navigation.featured.length > 0 && (
+            <nav aria-label="Featured" class="mb-4 border-border border-b pb-4">
+              <ul class="m-0 list-none p-0">
+                {navigation.featured.map((link) => {
+                  const external = /^https?:\/\//u.test(link.href);
+                  return (
+                    <li>
+                      <a
+                        class="block rounded-[0.65rem] px-2.5 py-1.5 text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground"
+                        href={link.href}
+                        rel={external ? "noreferrer" : undefined}
+                        target={external ? "_blank" : undefined}
+                      >
+                        <span class="flex items-center gap-2">
+                          {link.icon && (
+                            <Icon
+                              class="shrink-0 text-muted-foreground"
+                              name={link.icon}
+                              size={14}
+                            />
+                          )}
+                          <span class="flex-1 truncate">{link.label}</span>
+                          {external && (
+                            <Icon
+                              class="shrink-0 text-muted-foreground opacity-60"
+                              name="arrow-up-right"
+                              size={12}
+                            />
+                          )}
+                        </span>
+                      </a>
+                    </li>
+                  );
+                })}
+              </ul>
+            </nav>
+          )
+        }
+        {
+          // The header's tab bar is hidden below `md`, so the drawer is the only
+          // way to move between sections on mobile: list the tabs above the
+          // page tree, separated by a divider. Hidden from `md` up, where the
+          // header tabs take over.
+          navigation.tabs.length > 0 && (
+            <nav aria-label="Sections" class="mb-4 border-border border-b pb-4 md:hidden">
+              <ul class="m-0 list-none p-0">
+                {navigation.tabs.map((tab) => (
+                  <li>
+                    <a
+                      aria-current={
+                        page.route === tab.path ||
+                        (tab.path !== "/" && page.route.startsWith(tab.path))
+                          ? "page"
+                          : undefined
+                      }
+                      class="block rounded-[0.65rem] px-2.5 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground"
+                      href={tab.path}
+                    >
+                      {tab.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          )
+        }
         <nav>
           {
             MobileNavSlot ? (
@@ -363,7 +438,7 @@ const bannerScript = banner?.dismissible
           }
         </nav>
       </aside>
-      <main class="min-w-0 px-6 pt-6 pb-10 lg:px-8 xl:px-10" id="blume-content">
+      <main class="px-6 pt-6 pb-10 lg:px-8 xl:px-10" id="blume-content">
         <BreadcrumbsSlot crumbs={crumbs} wide={isApiOperation} />
         <TableOfContentsSlot
           headings={tocHeadings}
@@ -398,6 +473,7 @@ const bannerScript = banner?.dismissible
           <aside
             aria-label={strings.toc.title}
             class="sticky top-16 hidden h-[calc(100dvh-4rem)] overflow-y-auto px-4 pt-6 pb-10 text-sm xl:block"
+            data-blume-toc
           >
             <TableOfContentsSlot
               headings={tocHeadings}
@@ -405,7 +481,6 @@ const bannerScript = banner?.dismissible
               variant="desktop"
             />
             <PageActions
-              askEnabled={askEnabled}
               editUrl={editUrl}
               exportEpub={exportEpub}
               exportPdf={exportPdf}

package/src/components/layout/Search.astro

@@ -36,12 +36,12 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
 >
   <button
     aria-label={s.button}
-    class="inline-flex h-9 min-w-0 cursor-pointer items-center gap-2 rounded-full border border-border bg-background px-3 text-muted-foreground text-sm transition-colors hover:border-foreground hover:text-foreground sm:min-w-48"
+    class="inline-flex h-9 cursor-pointer items-center gap-2 rounded-full border border-border bg-background px-3 text-muted-foreground text-sm transition-colors hover:border-foreground hover:text-foreground sm:min-w-48"
     data-blume-search-open
     type="button"
   >
     <Icon name="search" size={16} />
-    <span class="min-w-0 flex-1 text-start max-sm:hidden">{s.button}</span>
+    <span class="flex-1 text-start max-sm:hidden">{s.button}</span>
     <kbd class="font-mono text-[0.7rem] max-sm:hidden" data-blume-search-kbd
       >⌘K</kbd
     >
@@ -459,7 +459,7 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
           : "Ask AI";
         el.innerHTML = `
           <span class="mt-0.5 shrink-0 text-accent">${svg("sparkles")}</span>
-          <span class="min-w-0 flex-1">
+          <span class="flex-1">
             <span class="block truncate font-normal text-foreground text-sm">${title}</span>
             <span class="block truncate text-muted-foreground text-sm">Get an instant answer from AI</span>
           </span>`;
@@ -479,7 +479,7 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
           : "";
         el.innerHTML = `
           <span class="mt-0.5 shrink-0 text-muted-foreground">${svg("file")}</span>
-          <span class="min-w-0 flex-1">
+          <span class="flex-1">
             <span class="block truncate font-normal text-foreground text-sm">${hit.title}</span>
             ${excerpt}
           </span>`;
@@ -494,7 +494,7 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
         el.className = ROW_CLASS;
         el.innerHTML = `
           <span class="mt-0.5 shrink-0 text-muted-foreground">${svg("file")}</span>
-          <span class="min-w-0 flex-1">
+          <span class="flex-1">
             <span class="block truncate font-normal text-foreground text-sm">${escapeHtml(label)}</span>
           </span>`;
         const item: Selectable = { el, kind: "link", url };