@writedocs/generator 0.8.1 → 0.9.1

package/src/layout/components/Sidebar.astro

@@ -1,6 +1,7 @@
 ---
-import type { NavTreeNode } from "../../lib/config";
+import { isExternalHref, type NavTreeNode, type Selector } from "../../lib/config";
 import NavTree from "./NavTree.astro";
+import AppIcon from "../../components/AppIcon.astro";
 // Two colorways of the same "Powered by writedocs" mark, not a
 // theme-matched pair in the wd-logo-light/wd-logo-dark sense (that
 // convention names each file by which theme it's *shown in*) - these
@@ -32,11 +33,50 @@ interface Props {
   navTree: NavTreeNode[];
   hrefForSlug: (slug: string) => string;
   currentSlug: string;
+  // Switchers that sit at the top of the sidebar instead of the top bar -
+  // products inside a tab or dropdown (lib/selector-placement.js).
+  switchers?: Selector[];
 }
-const { navTree, hrefForSlug, currentSlug } = Astro.props as Props;
+const { navTree, hrefForSlug, currentSlug, switchers = [] } = Astro.props as Props;
 ---
 
 <nav class="wd-sidebar">
+  {switchers.map((sel) => {
+    const current = sel.options.find((o) => o.active) ?? sel.options[0];
+    return (
+      <div class="wd-dropdown wd-sidebar-switcher" data-selector-kind={sel.kind}>
+        <button type="button" class="wd-dropdown-trigger wd-sidebar-switcher-trigger" aria-expanded="false">
+          <AppIcon icon={current.icon} class="wd-tab-icon wd-sidebar-switcher-icon" />
+          <span class="wd-sidebar-switcher-text">
+            <span class="wd-sidebar-switcher-label">{current.label}</span>
+            {current.description && <span class="wd-sidebar-switcher-desc">{current.description}</span>}
+          </span>
+          <svg class="wd-sidebar-switcher-chevrons" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true">
+            <path d="M3.5 4.5L6 2L8.5 4.5M3.5 7.5L6 10L8.5 7.5" stroke="currentColor" stroke-width="1.3" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </button>
+        <div class="wd-dropdown-menu wd-sidebar-switcher-menu">
+          <div class="wd-dropdown-menu-panel">
+            {sel.options.map((opt) => (
+              <a
+                href={opt.href}
+                class={opt.active ? "active" : ""}
+                aria-current={opt.active ? "true" : undefined}
+                target={isExternalHref(opt.href) ? "_blank" : undefined}
+                rel={isExternalHref(opt.href) ? "noopener noreferrer" : undefined}
+              >
+                <AppIcon icon={opt.icon} class="wd-tab-icon wd-sidebar-switcher-icon" />
+                <span class="wd-sidebar-switcher-text">
+                  <span class="wd-sidebar-switcher-label">{opt.label}</span>
+                  {opt.description && <span class="wd-sidebar-switcher-desc">{opt.description}</span>}
+                </span>
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  })}
   <NavTree nodes={navTree} hrefForSlug={hrefForSlug} currentSlug={currentSlug} />
   {!watermarkDisabled && (
     <div class="wd-sidebar-watermark">
@@ -46,6 +86,74 @@ const { navTree, hrefForSlug, currentSlug } = Astro.props as Props;
   )}
 </nav>
 <style>
+  /* The product switcher at the top of the sidebar - Mintlify's place for
+     it. Full width, the current product (and its description) on the
+     button, every product in the menu. It opens on click only: the shared
+     hover-to-open (dropdown.css) would pop it open every time the pointer
+     crosses the sidebar. */
+  .wd-sidebar-switcher {
+    margin-bottom: 1rem;
+  }
+  .wd-sidebar-switcher-trigger {
+    width: 100%;
+    box-sizing: border-box;
+    gap: 0.6rem;
+    padding: 0.5rem 0.65rem;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.5rem;
+    color: var(--wd-text);
+    text-align: left;
+  }
+  .wd-sidebar-switcher-trigger:hover {
+    background: var(--wd-surface);
+  }
+  .wd-sidebar-switcher-text {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+  }
+  .wd-sidebar-switcher-label {
+    font-size: 0.88rem;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .wd-sidebar-switcher-desc {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: var(--wd-text-muted);
+  }
+  .wd-sidebar-switcher-trigger .wd-sidebar-switcher-desc {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .wd-sidebar-switcher-chevrons {
+    flex-shrink: 0;
+    color: var(--wd-text-muted);
+  }
+  .wd-sidebar-switcher:not(.open) .wd-sidebar-switcher-menu {
+    display: none;
+  }
+  .wd-sidebar-switcher-menu {
+    right: 0;
+  }
+  .wd-sidebar-switcher-menu .wd-dropdown-menu-panel {
+    min-width: 0;
+  }
+  .wd-sidebar-switcher-menu a {
+    align-items: flex-start;
+  }
+  .wd-sidebar-switcher-menu .wd-sidebar-switcher-icon {
+    margin-top: 0.2rem;
+  }
+  /* The mobile menu already lists every level as its own row above the
+     sidebar - no second copy there. */
+  :global(#wd-mobile-menu) .wd-sidebar-switcher {
+    display: none;
+  }
   /* Sticky + its own scrollbar, not just "moves along until it runs out
      of column to stick within" (position: sticky's default behavior,
      which is what this had before - a tall nav tree would eventually

package/src/layout/components/TopBar.astro

@@ -13,6 +13,7 @@
 // comment for the fuller rationale.
 import { isExternalHref, type DocsConfig, type Selector, type GlobalDropdownView } from '../../lib/config';
 import AppIcon from '../../components/AppIcon.astro';
+import { selectorPlacements, hasMobileMenu } from '../../lib/selector-placement.js';
 import '../styles/dropdown.css';
 import '../styles/topbar.css';
 
@@ -39,7 +40,7 @@ const { config, selectors, globalDropdowns, showSidebarCol, logoLight, logoDark,
 // products, or a dropdown used as a nested path segment) on the right,
 // and a second row underneath for tabs plus the always-visible global
 // dropdowns - both of which behave like a row of labeled links rather
-// than a single current-value switcher.
+// than a single current-value switcher. Tabs inside a tab get a third row.
 //
 // A dropdown container nested directly inside a tab (writedocs.json's "API
 // Reference" tab having a `dropdowns` array instead of `pages`) reads as
@@ -52,21 +53,28 @@ const { config, selectors, globalDropdowns, showSidebarCol, logoLight, logoDark,
 // switcher), this one is dropped from switcherSelectors entirely -
 // `selectors` is in root-to-leaf path order, so "nested directly inside a
 // tab" just means the previous entry in the array is the 'tab' selector.
-const switcherSelectors = selectors.filter(
-  (sel, i) => sel.kind !== 'tab' && !(sel.kind === 'dropdown' && selectors[i - 1]?.kind === 'tab')
-);
+// Which level goes where - lib/selector-placement.js. A product inside a tab
+// or dropdown sits at the top of the sidebar instead (Sidebar.astro), when
+// the page has one.
+const placements = selectorPlacements(selectors, { sidebar: showSidebarCol });
+const showMenuButton = hasMobileMenu({ sidebar: showSidebarCol, selectors, globalDropdowns });
+const switcherSelectors = selectors.filter((_, i) => placements[i] === 'topbar');
 const tabSelectors = selectors.filter((sel) => sel.kind === 'tab');
-const showSecondRow = tabSelectors.length > 0 || globalDropdowns.length > 0;
+// One row per level of tabs: a tab holding its own tabs gets a second row
+// underneath, with that tab's tabs. The global dropdowns stay in the first
+// row, which renders on its own when there are only those.
+const tabRows = tabSelectors.length > 0 ? tabSelectors : globalDropdowns.length > 0 ? [null] : [];
 ---
 <header class="wd-topbar">
   <div class="wd-topbar-row wd-topbar-row-brand">
     <div class="wd-topbar-inner">
-      {/* Only rendered on pages that would show a sidebar at all
-          (showSidebarCol - same condition MobileMenu.astro's own
-          rendering is gated on). Hidden entirely above 860px via CSS
-          (.wd-mobile-menu-toggle's own media query in topbar.css), not
-          JS - so there's no flash-of-hamburger on a desktop-width load. */}
-      {showSidebarCol && (
+      {/* Only rendered on pages that have a mobile menu - a sidebar, or
+          navigation the top bar hides on a phone (hasMobileMenu(), the same
+          condition MobileMenu.astro's own rendering is gated on). Hidden
+          entirely above 860px via CSS (.wd-mobile-menu-toggle's own media
+          query in topbar.css), not JS - so there's no flash-of-hamburger on
+          a desktop-width load. */}
+      {showMenuButton && (
         <button
           type="button"
           class="wd-mobile-menu-toggle"
@@ -86,7 +94,7 @@ const showSecondRow = tabSelectors.length > 0 || globalDropdowns.length > 0;
       <a class="wd-topbar-brand" href="/">
         {logoLight && <img src={logoLight} alt={config.name} height="24" class="wd-logo-light" />}
         {logoDark && <img src={logoDark} alt={config.name} height="24" class="wd-logo-dark" />}
-        {brandLabel && <span>{brandLabel}</span>}
+        {brandLabel && <span title={brandLabel}>{brandLabel}</span>}
       </a>
 
       {switcherSelectors.length > 0 && (
@@ -100,7 +108,7 @@ const showSecondRow = tabSelectors.length > 0 || globalDropdowns.length > 0;
             const current = sel.options.find((o) => o.active) ?? sel.options[0];
             return (
               <div class="wd-dropdown" data-selector-kind={sel.kind}>
-                <button type="button" class="wd-dropdown-trigger wd-switcher-trigger" aria-haspopup="true" aria-expanded="false">
+                <button type="button" class="wd-dropdown-trigger wd-switcher-trigger" aria-expanded="false">
                   <AppIcon icon={current.icon} class="wd-tab-icon" />
                   {current.label}
                   {current.tag && <span class="wd-selector-tag">{current.tag}</span>}
@@ -108,13 +116,12 @@ const showSecondRow = tabSelectors.length > 0 || globalDropdowns.length > 0;
                     <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round" />
                   </svg>
                 </button>
-                <div class="wd-dropdown-menu" role="menu">
+                <div class="wd-dropdown-menu">
                   <div class="wd-dropdown-menu-panel">
                     {sel.options.map((opt) => (
                       <a
                         href={opt.href}
-                        role="menuitem"
-                        class={opt.active ? 'active' : ''}
+                        class={opt.active ? 'active' : ''} aria-current={opt.active ? 'true' : undefined}
                         target={isExternalHref(opt.href) ? '_blank' : undefined}
                         rel={isExternalHref(opt.href) ? 'noopener noreferrer' : undefined}
                       >
@@ -161,7 +168,6 @@ const showSecondRow = tabSelectors.length > 0 || globalDropdowns.length > 0;
           <button
             type="button"
             class="wd-dropdown-trigger wd-topbar-links-toggle"
-            aria-haspopup="true"
             aria-expanded="false"
             aria-label="More links"
           >
@@ -171,12 +177,11 @@ const showSecondRow = tabSelectors.length > 0 || globalDropdowns.length > 0;
               <circle cx="2" cy="14" r="1.7" fill="currentColor" />
             </svg>
           </button>
-          <div class="wd-dropdown-menu" role="menu">
+          <div class="wd-dropdown-menu">
             <div class="wd-dropdown-menu-panel">
               {config.topbar.links.map((link) => (
                 <a
                   href={link.href}
-                  role="menuitem"
                   target={isExternalHref(link.href) ? '_blank' : undefined}
                   rel={isExternalHref(link.href) ? 'noopener noreferrer' : undefined}
                   aria-label={!link.label ? link.icon : undefined}
@@ -206,106 +211,125 @@ const showSecondRow = tabSelectors.length > 0 || globalDropdowns.length > 0;
     </div>
   </div>
 
-  {showSecondRow && (
-    <div class="wd-topbar-row wd-topbar-row-tabs">
+  {tabRows.map((sel, row) => (
+    <div class={`wd-topbar-row wd-topbar-row-tabs${row > 0 ? ' wd-topbar-row-subtabs' : ''}`}>
       <div class="wd-topbar-inner">
-        <nav class="wd-topbar-tabs" aria-label="Sections">
-          {tabSelectors.map((sel) =>
-            sel.options.map((opt) =>
-              opt.dropdown ? (
-                // A tab whose own content is `dropdowns` (not `pages`)
-                // renders as a dropdown-trigger in place of the plain
-                // pill - the tab's own label/icon stay on the trigger
-                // (not "whichever dropdown is current", so it reads as
-                // "this tab, which happens to expand" rather than
-                // jumping around as you navigate its sub-pages), and its
-                // dropdowns become the menu.
-                <div class="wd-dropdown" data-selector-kind="tab">
-                  <button
-                    type="button"
-                    class={`wd-dropdown-trigger wd-tab-link ${opt.active ? 'active' : ''}`}
-                    aria-haspopup="true"
-                    aria-expanded="false"
+        {/* More tabs than fit: the row slides sideways instead of wrapping,
+            with an arrow on each side that has more (src/scripts/tabs-strip.ts).
+            The arrows are only for the mouse - keyboard focus slides a tab
+            into view by itself. */}
+        <div class="wd-tabs-strip" data-tabs-strip>
+          <button type="button" class="wd-tabs-arrow wd-tabs-arrow-prev" tabindex="-1" aria-hidden="true" data-tabs-prev>
+            <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
+              <path d="M8.5 3L4.5 7L8.5 11" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </button>
+          <div class="wd-tabs-viewport">
+            <nav class="wd-topbar-tabs" aria-label={row === 0 ? 'Sections' : 'Subsections'}>
+              {(sel?.options ?? []).map((opt) =>
+                opt.dropdown ? (
+                  // A tab whose own content is `dropdowns` (not `pages`)
+                  // renders as a dropdown-trigger in place of the plain
+                  // pill - the tab's own label/icon stay on the trigger
+                  // (not "whichever dropdown is current", so it reads as
+                  // "this tab, which happens to expand" rather than
+                  // jumping around as you navigate its sub-pages), and its
+                  // dropdowns become the menu.
+                  <div class="wd-dropdown" data-selector-kind="tab">
+                    <button
+                      type="button"
+                      class={`wd-dropdown-trigger wd-tab-link ${opt.active ? 'active' : ''}`}
+                      aria-expanded="false"
+                    >
+                      <AppIcon icon={opt.icon} class="wd-tab-icon" />
+                      {opt.label}
+                      <svg class="wd-dropdown-caret" width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+                        <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+                      </svg>
+                    </button>
+                    <div class="wd-dropdown-menu">
+                      <div class="wd-dropdown-menu-panel">
+                        {opt.dropdown.map((d) => (
+                          <a
+                            href={d.href}
+                            class={d.active ? 'active' : ''} aria-current={d.active ? 'true' : undefined}
+                            target={isExternalHref(d.href) ? '_blank' : undefined}
+                            rel={isExternalHref(d.href) ? 'noopener noreferrer' : undefined}
+                          >
+                            <AppIcon icon={d.icon} class="wd-tab-icon" />
+                            {d.label}
+                          </a>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <a
+                    href={opt.href}
+                    class={`wd-tab-link ${opt.active ? 'active' : ''}`}
+                    aria-current={opt.active ? 'true' : undefined}
+                    target={isExternalHref(opt.href) ? '_blank' : undefined}
+                    rel={isExternalHref(opt.href) ? 'noopener noreferrer' : undefined}
                   >
                     <AppIcon icon={opt.icon} class="wd-tab-icon" />
                     {opt.label}
-                    <svg class="wd-dropdown-caret" width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
-                      <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round" />
-                    </svg>
-                  </button>
-                  <div class="wd-dropdown-menu" role="menu">
-                    <div class="wd-dropdown-menu-panel">
-                      {opt.dropdown.map((d) => (
-                        <a
-                          href={d.href}
-                          role="menuitem"
-                          class={d.active ? 'active' : ''}
-                          target={isExternalHref(d.href) ? '_blank' : undefined}
-                          rel={isExternalHref(d.href) ? 'noopener noreferrer' : undefined}
-                        >
-                          <AppIcon icon={d.icon} class="wd-tab-icon" />
-                          {d.label}
-                        </a>
-                      ))}
+                  </a>
+                )
+              )}
+              {row === 0 &&
+                globalDropdowns.map((d) =>
+                  d.href !== null ? (
+                    <a
+                      href={d.href}
+                      class="wd-tab-link"
+                      target={isExternalHref(d.href) ? '_blank' : undefined}
+                      rel={isExternalHref(d.href) ? 'noopener noreferrer' : undefined}
+                    >
+                      <AppIcon icon={d.icon} class="wd-tab-icon" />
+                      {d.label}
+                    </a>
+                  ) : (
+                    <div class="wd-dropdown">
+                      <button type="button" class="wd-dropdown-trigger" aria-expanded="false">
+                        <AppIcon icon={d.icon} class="wd-tab-icon" />
+                        {d.label}
+                        <svg class="wd-dropdown-caret" width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+                          <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                      </button>
+                      <div class="wd-dropdown-menu">
+                        <div class="wd-dropdown-menu-panel">
+                          {d.items.map((item) => (
+                            <a href={item.href} class={item.active ? 'active' : ''} aria-current={item.active ? 'true' : undefined}>{item.label}</a>
+                          ))}
+                        </div>
+                      </div>
                     </div>
-                  </div>
-                </div>
-              ) : (
-                <a
-                  href={opt.href}
-                  class={`wd-tab-link ${opt.active ? 'active' : ''}`}
-                  target={isExternalHref(opt.href) ? '_blank' : undefined}
-                  rel={isExternalHref(opt.href) ? 'noopener noreferrer' : undefined}
-                >
-                  <AppIcon icon={opt.icon} class="wd-tab-icon" />
-                  {opt.label}
-                </a>
-              )
-            )
-          )}
-          {globalDropdowns.map((d) =>
-            d.href !== null ? (
-              <a
-                href={d.href}
-                class="wd-tab-link"
-                target={isExternalHref(d.href) ? '_blank' : undefined}
-                rel={isExternalHref(d.href) ? 'noopener noreferrer' : undefined}
-              >
-                <AppIcon icon={d.icon} class="wd-tab-icon" />
-                {d.label}
-              </a>
-            ) : (
-              <div class="wd-dropdown">
-                <button type="button" class="wd-dropdown-trigger" aria-haspopup="true" aria-expanded="false">
-                  <AppIcon icon={d.icon} class="wd-tab-icon" />
-                  {d.label}
-                  <svg class="wd-dropdown-caret" width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
-                    <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round" />
-                  </svg>
-                </button>
-                <div class="wd-dropdown-menu" role="menu">
-                  <div class="wd-dropdown-menu-panel">
-                    {d.items.map((item) => (
-                      <a href={item.href} role="menuitem" class={item.active ? 'active' : ''}>{item.label}</a>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            )
-          )}
-        </nav>
+                  )
+                )}
+            </nav>
+          </div>
+          <button type="button" class="wd-tabs-arrow wd-tabs-arrow-next" tabindex="-1" aria-hidden="true" data-tabs-next>
+            <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
+              <path d="M5.5 3L9.5 7L5.5 11" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
-  )}
+  ))}
 </header>
 <script>
   import { initDropdowns } from '../../scripts/dropdowns';
   import { initThemeToggle } from '../../scripts/theme-toggle';
+  import { initTabsStrips } from '../../scripts/tabs-strip';
 
   initDropdowns(document);
   initThemeToggle(document);
+  initTabsStrips(document);
   document.addEventListener('astro:page-load', () => {
     initDropdowns(document);
     initThemeToggle(document);
+    initTabsStrips(document);
   });
 </script>

package/src/layout/styles/mobile-menu.css

@@ -146,6 +146,12 @@
   padding-bottom: 0.75rem;
   border-bottom: 1px solid var(--wd-border);
 }
+/* A page without a sidebar (`mode: custom`): nothing below to divide off. */
+.wd-mobile-menu-selectors:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
 /* position: relative makes this the containing block for its own
    .wd-mobile-accordion-options panel below, which floats over whatever
    comes after it instead of pushing it down the page - a `<details>`'s

package/src/layout/styles/search-modal.css

@@ -95,6 +95,33 @@
    browser's default yellow highlight, to match the rest of the site's own
    "tint primary" pattern for active/matched state (sidebar links,
    selector options, ...). */
+/* Where the page sits ("API Reference › Webhooks"), between the title and
+   the excerpt. */
+.wd-search-result-section {
+  font-size: 0.75rem;
+  color: var(--wd-text-muted);
+  margin: -0.15rem 0 0.3rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* Under the results: which version/language/product they're from, and the
+   switch to search the whole site. */
+.wd-search-scope {
+  padding: 0.6rem 0.8rem 0.3rem;
+  font-size: 0.8rem;
+  color: var(--wd-text-muted);
+}
+.wd-search-scope-toggle {
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  color: var(--wd-primary);
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
 .wd-search-result-excerpt mark {
   background: none;
   color: var(--wd-primary);

package/src/layout/styles/topbar.css

@@ -41,6 +41,17 @@
      active tab. */
   padding-bottom: 0;
 }
+/* A tab holding its own tabs: those go in a row underneath. The first row
+   gets a divider for its active tab's underline to land on, and the second
+   row's tabs are a step lighter, so the two levels read as section and
+   subsection. */
+.wd-topbar-row-tabs:not(:last-child) {
+  border-bottom: 1px solid var(--wd-border);
+}
+.wd-topbar-row-subtabs .wd-tab-link {
+  font-size: 0.85rem;
+  font-weight: 500;
+}
 .wd-topbar-brand {
   display: flex;
   align-items: center;
@@ -56,14 +67,29 @@
      see this file's own top comment. */
   color: var(--wd-navbar-foreground);
   font-size: 1.05rem;
+  /* When the row runs short, a long site name gives way (ending in "..."),
+     not the switchers next to it - their labels would break onto two lines. */
+  flex-shrink: 1;
+  min-width: 0;
+}
+.wd-topbar-brand img {
   flex-shrink: 0;
 }
+.wd-topbar-brand span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 /* Switchers sit right next to the brand (no auto margin here) -
    .wd-topbar-links below is what gets pushed to the far right. */
 .wd-topbar-switchers {
   display: flex;
   align-items: center;
   gap: 0.4rem;
+  flex-shrink: 0;
+}
+.wd-switcher-trigger {
+  white-space: nowrap;
 }
 /* --wd-navbar-border, not --wd-border - falls back to the literal
    var(--wd-border) reference when theme.navbar isn't configured (see
@@ -111,8 +137,88 @@
      visibly above the row's own divider line instead of touching it. */
   align-items: stretch;
   gap: 0.25rem;
+  /* One line, as wide as its tabs: .wd-tabs-viewport shows what fits, and
+     src/scripts/tabs-strip.ts slides the rest into view. */
+  flex: none;
+  width: max-content;
+  position: relative;
+}
+.wd-topbar-tabs > * {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.wd-tabs-animate .wd-topbar-tabs {
+  transition: transform 0.25s ease;
+}
+.wd-tabs-strip {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+}
+/* clip, not hidden: `hidden` would make this a scroll container and cut off
+   the tab menus that open below the row. */
+.wd-tabs-viewport {
   flex: 1;
-  flex-wrap: wrap;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  overflow-x: clip;
+  /* Sideways touch moves are src/scripts/tabs-strip.ts's to drag the row;
+     up/down ones still scroll the page. */
+  touch-action: pan-y pinch-zoom;
+}
+/* An arrow on each side that has more tabs, over the row's edge, fading
+   the tab under it out. */
+.wd-tabs-arrow {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 2.5rem;
+  padding: 0;
+  border: none;
+  align-items: center;
+  cursor: pointer;
+  color: var(--wd-navbar-foreground);
+}
+.wd-tabs-arrow-prev {
+  left: 0;
+  justify-content: flex-start;
+  background: linear-gradient(to right, var(--wd-navbar-background) 55%, transparent);
+}
+.wd-tabs-arrow-next {
+  right: 0;
+  justify-content: flex-end;
+  background: linear-gradient(to left, var(--wd-navbar-background) 55%, transparent);
+}
+.wd-tabs-arrow svg {
+  box-sizing: content-box;
+  padding: 0.3rem;
+  border-radius: 999px;
+}
+.wd-tabs-arrow:hover svg {
+  background: var(--wd-navbar-hover);
+}
+.wd-can-prev .wd-tabs-arrow-prev,
+.wd-can-next .wd-tabs-arrow-next {
+  display: flex;
+}
+/* The menu of a tab near the right end opens leftwards, to stay in view. */
+.wd-tabs-strip .wd-dropdown-align-end .wd-dropdown-menu {
+  left: auto;
+  right: 0;
+}
+/* Browsers without overflow-x: clip (Safari before 16): the tabs wrap onto
+   more lines, as before, and the script leaves them alone. */
+@supports not (overflow-x: clip) {
+  .wd-topbar-tabs {
+    flex: 1;
+    width: auto;
+    flex-wrap: wrap;
+  }
 }
 /* .wd-dropdown itself is just a plain block (position: relative, for its
    own .wd-dropdown-menu to anchor to) - stretching *it* to the row's
@@ -417,4 +523,10 @@
   .wd-mobile-menu-toggle {
     display: flex;
   }
+  /* The site name takes what's left of the row and ends in "..." when it
+     doesn't fit - otherwise a long name wraps onto a row of its own and the
+     top bar grows to three rows. */
+  .wd-topbar-brand {
+    flex: 1 1 0;
+  }
 }

package/src/lib/canonical-path.js

@@ -0,0 +1,11 @@
+// A Windows path with its drive letter in capitals: `c:\docs` -> `C:\docs`.
+// The same folder can reach writedocs spelled either way (VS Code's
+// terminal often starts in `c:\...`, and a shell prompt in `C:\...`), and
+// Vite compares module ids as text - with the package's own folder spelled
+// `c:`, a build came out with every page missing its stylesheet. Every
+// path the CLI hands Astro goes through this first. Other platforms, and
+// paths without a drive letter, come back unchanged.
+export function canonicalPath(p, platform = process.platform) {
+  if (platform !== 'win32' || typeof p !== 'string') return p;
+  return /^[a-z]:/.test(p) ? p[0].toUpperCase() + p.slice(1) : p;
+}