chore(website): delete the superseded nav exports and dead drawer CSS

The rebuilt navbar left three kinds of dead weight behind.

`NavDesktop.tsx` still exported `links` (the old flat link array) and
`trackNavLink` (the old per-label analytics helper). Both were kept alive
only for the mobile drawer, which now reads `NAV_TRIGGERS` and tracks
through `trackNavItem`. Nothing outside the file referenced either.

The dead CSS in `chrome.css` falls into two groups, and the split matters
when reading this diff:

Orphaned by this branch's drill-in rewrite (Task 8) —
`.nav-mtabs`, `.nav-mtab`, `.nav-mtab[data-active]`, `.nav-mobile-site-link`.

Already dead before this branch started, leftovers from an older drawer —
`.nav-msubtabs-wrap`, `.nav-msubtabs`, `.nav-msubtab`,
`.nav-msubtab[data-active]`, `.nav-mobile-content-list`,
`.nav-mobile-item`, `.nav-mobile-item[data-active]`,
`.nav-mobile-item--strong`, `.nav-mobile-demo-link`,
`.nav-mobile-section-toggle`, `.nav-mobile-chevron`,
`.nav-mobile-chevron[data-open]`, `.nav-mobile-search`,
`.nav-mobile-search:focus-visible`. Removing them is in scope — same
drawer's leftovers — but they are not fallout from the redesign.

Every class was re-verified unreferenced across `src/`, `e2e/`, the rest
of `src/styles/`, `src/app/global.css` and the style contracts before
deletion; none is built dynamically, and the drawer's live classes
(`.nav-mobile-list`, `-overlay`, `-row`, `-back`, `-panel`, `-group`,
`-github-link`, `-cta`, `-dialog-close`) are untouched.

Finally, drill-in focus is now symmetric. Pushing a level focuses its
"Back to menu" row through an explicit ref; popping fell through to
`focusable()[0]`, which is not a designed destination. Both pop paths —
the Back button and Escape — now route through `popToRoot`, which records
the originating trigger id so the per-level focus effect can land on that
row once root has re-rendered. The restore reads a ref map rather than
the focus-trap query on purpose: jsdom's multi-clause `querySelectorAll`
groups by clause instead of returning document order, so a test written
against `focusable()[0]` would assert the Pricing anchor where a browser
gives the row.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: blove

apps/website/src/components/shared/Nav.spec.tsx

@@ -343,6 +343,32 @@ describe('Docs mobile navigation', () => {
     );
   });
 
+  it('returns focus to the trigger row a popped level came from', () => {
+    pathnameRef.current = '/';
+    render(<Nav />);
+    fireEvent.click(screen.getByRole('button', { name: 'Open menu' }));
+    const dialog = screen.getByRole('dialog', { name: 'Mobile navigation' });
+
+    // Both pop paths, one after the other, against the same drawer: the
+    // "Back to menu" button and Escape must land in the same place, and that
+    // place is the row the reader pushed from — not whatever the focus trap's
+    // query happens to list first. (jsdom's multi-clause querySelectorAll
+    // groups by clause instead of returning document order, so an assertion
+    // written against `focusable()[0]` would encode the wrong element and
+    // pass while a real browser did something else.)
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Libraries' }));
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Back to menu' }));
+    expect(document.activeElement).toBe(
+      within(dialog).getByRole('button', { name: 'Libraries' }),
+    );
+
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Libraries' }));
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(document.activeElement).toBe(
+      within(dialog).getByRole('button', { name: 'Libraries' }),
+    );
+  });
+
   it('tags mobile panel analytics with the trigger it came from', () => {
     pathnameRef.current = '/';
     render(<Nav />);

apps/website/src/components/shared/NavDesktop.tsx

@@ -17,36 +17,6 @@ import { NAV_TRIGGERS, type NavItem, type NavPanel } from './nav-config';
 const OPEN_DELAY_MS = 100;
 const CLOSE_DELAY_MS = 150;
 
-export const links = [
-  { label: 'Pilot to Prod', href: '/pilot-to-prod', external: false },
-  { label: 'Docs', href: '/docs', external: false },
-  { label: 'Pricing', href: '/pricing', external: false },
-];
-
-export function trackNavLink(
-  label: string,
-  href: string,
-  external: boolean,
-  surface: 'nav' | 'mobile_nav'
-) {
-  const slug = label
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '_')
-    .replace(/^_|_$/g, '');
-  const ctaId: `nav_${string}` | `mobile_nav_${string}` =
-    surface === 'nav' ? `nav_${slug}` : `mobile_nav_${slug}`;
-  if (external) {
-    trackExternalLinkClick(href, { surface, cta_id: ctaId, cta_text: label });
-    return;
-  }
-  trackCtaClick({
-    surface,
-    destination_url: href,
-    cta_id: ctaId,
-    cta_text: label,
-  });
-}
-
 export function trackNavItem(item: NavItem, surface: 'nav' | 'mobile_nav') {
   const ctaId: `nav_${string}` | `mobile_nav_${string}` =
     surface === 'nav' ? `nav_${item.ctaId}` : `mobile_nav_${item.ctaId}`;

apps/website/src/components/shared/NavMobile.tsx

@@ -109,6 +109,14 @@ export function NavMobile({
   const mobileTriggerRef = useRef<HTMLButtonElement>(null);
   const mobileDialogRef = useRef<HTMLDivElement>(null);
   const mobileBackRef = useRef<HTMLButtonElement>(null);
+  /** The root trigger rows, so a pop can land back on the one it came from. */
+  const rootRowRefs = useRef(new Map<string, HTMLButtonElement>());
+  /**
+   * Which root row a pending pop should focus. Read by the per-level focus
+   * effect below: the row does not exist while the panel level is mounted,
+   * so the restore has to wait until root has rendered.
+   */
+  const pendingRootFocusRef = useRef<string | null>(null);
   const restoreMobileFocusRef = useRef(false);
   const pendingMobileSearchRef = useRef(false);
   const cancelScheduledMobileRestoreRef = useRef<(() => void) | null>(null);
@@ -126,6 +134,16 @@ export function NavMobile({
     initialLevel(isDocsPage)
   );
 
+  /**
+   * Pop back to the root list, remembering the trigger row the reader came
+   * from. Pushing lands on the level's "Back to menu" row; popping mirrors it
+   * by landing back on that trigger, so the two moves are symmetric.
+   */
+  const popToRoot = useCallback((fromId: string) => {
+    pendingRootFocusRef.current = fromId;
+    setLevel(rootLevel);
+  }, []);
+
   useEffect(() => {
     if (open) setLevel(initialLevel(isDocsPage));
   }, [isDocsPage, open]);
@@ -202,9 +220,19 @@ export function NavMobile({
           'a[href], button:not(:disabled), [tabindex]:not([tabindex="-1"])'
         ) ?? []
       );
-    // A pushed level leads with its back row; land there so the way out is
-    // the first thing the keyboard reaches.
-    (mobileBackRef.current ?? focusable()[0])?.focus();
+    // A pop returns to the trigger row it came from — an explicit ref, never
+    // `focusable()[0]`: jsdom's multi-clause querySelectorAll groups by clause
+    // rather than returning document order, so index 0 there is not the
+    // element a browser would hand back.
+    const pendingRootFocus = pendingRootFocusRef.current;
+    if (pendingRootFocus !== null) {
+      pendingRootFocusRef.current = null;
+      rootRowRefs.current.get(pendingRootFocus)?.focus();
+    } else {
+      // A pushed level leads with its back row; land there so the way out is
+      // the first thing the keyboard reaches.
+      (mobileBackRef.current ?? focusable()[0])?.focus();
+    }
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         event.preventDefault();
@@ -219,7 +247,7 @@ export function NavMobile({
         // sole trigger' runs on a docs route and depends on this falling
         // through to closeMobileMenu() at the opening level.
         if (level.kind === 'panel' && !sameLevel(level, initialLevel(isDocsPage))) {
-          setLevel(rootLevel);
+          popToRoot(level.id);
           return;
         }
         closeMobileMenu();
@@ -240,7 +268,7 @@ export function NavMobile({
     };
     document.addEventListener('keydown', onKeyDown);
     return () => document.removeEventListener('keydown', onKeyDown);
-  }, [closeMobileMenu, isDocsPage, level, open]);
+  }, [closeMobileMenu, isDocsPage, level, open, popToRoot]);
 
   // The docs level hosts the live docs tree, but only on a docs route — there
   // is no docs context anywhere else, so the marketing panel stands in.
@@ -291,7 +319,7 @@ export function NavMobile({
                   ref={mobileBackRef}
                   type="button"
                   className="nav-mobile-back"
-                  onClick={() => setLevel(rootLevel)}
+                  onClick={() => popToRoot(level.id)}
                 >
                   <ChevronLeft size={16} strokeWidth={2} aria-hidden="true" />
                   Back to menu
@@ -322,6 +350,10 @@ export function NavMobile({
                       <button
                         key={trigger.id}
                         type="button"
+                        ref={(node) => {
+                          if (node) rootRowRefs.current.set(trigger.id, node);
+                          else rootRowRefs.current.delete(trigger.id);
+                        }}
                         className="nav-mobile-row"
                         onClick={() => setLevel({ kind: 'panel', id: trigger.id })}
                       >

apps/website/src/styles/chrome.css

@@ -234,139 +234,11 @@
 .nav-mobile-dialog-close:focus-visible {
   background: var(--color-surface-dim);
 }
-.nav-mtabs {
-  display: flex;
-  gap: 6px;
-  padding: 4px;
-  background: rgba(0, 0, 0, 0.03);
-  border-radius: 10px;
-}
-.nav-mtab {
-  flex: 1;
-  text-align: center;
-  padding: 10px 0;
-  font-size: 15px;
-  font-weight: 500;
-  font-family: var(--font-sans);
-  background: transparent;
-  color: var(--color-text-muted);
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  min-height: 44px;
-}
-.nav-mtab[data-active] {
-  background: var(--color-accent-surface);
-  color: var(--color-accent);
-}
-.nav-msubtabs-wrap {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
 .nav-mobile-list {
   display: flex;
   flex-direction: column;
   gap: 2px;
 }
-.nav-mobile-content-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.nav-mobile-item {
-  display: block;
-  padding: 12px 14px;
-  border-radius: 8px;
-  font-size: 16px;
-  line-height: 24px;
-  min-height: 44px;
-  text-decoration: none;
-  font-family: var(--font-sans);
-  color: var(--color-text-secondary);
-  background: transparent;
-}
-.nav-mobile-item[data-active] {
-  color: var(--color-accent);
-  background: var(--color-accent-surface);
-}
-.nav-mobile-item--strong {
-  font-weight: 600;
-}
-.nav-msubtabs {
-  display: flex;
-  gap: 4px;
-  padding: 3px;
-  background: rgba(0, 0, 0, 0.03);
-  border-radius: 8px;
-}
-.nav-msubtab {
-  flex: 1;
-  text-align: center;
-  padding: 8px 0;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  font-weight: 600;
-  background: transparent;
-  color: var(--color-text-muted);
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  min-height: 36px;
-}
-.nav-msubtab[data-active] {
-  background: var(--color-accent-surface);
-  color: var(--color-accent);
-}
-.nav-mobile-demo-link {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 14px;
-  border-radius: 8px;
-  min-height: 44px;
-  color: var(--color-accent);
-  background: var(--color-accent-surface);
-  text-decoration: none;
-  font-family: var(--font-sans);
-  font-weight: 600;
-}
-.nav-mobile-section-toggle {
-  width: 100%;
-  text-align: left;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 12px 14px;
-  min-height: 48px;
-  border-radius: 8px;
-  font-family: var(--font-sans);
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--color-text-primary);
-}
-.nav-mobile-chevron {
-  transition: transform 0.25s ease;
-  flex-shrink: 0;
-  transform: rotate(0);
-}
-.nav-mobile-chevron[data-open] {
-  transform: rotate(180deg);
-}
-.nav-mobile-site-link {
-  display: block;
-  padding: 14px 14px;
-  border-radius: 8px;
-  font-size: 16px;
-  line-height: 24px;
-  min-height: 48px;
-  color: var(--color-text-secondary);
-  text-decoration: none;
-  font-family: var(--font-sans);
-}
 .nav-mobile-github-link {
   display: flex;
   align-items: center;
@@ -505,21 +377,6 @@
   font-family: var(--font-sans);
 }
 
-/* Mobile docs-search entry (polish arc PR 3) — button reset to match the
- * .nav-mobile-item link styling it shares. */
-.nav-mobile-search {
-  width: 100%;
-  text-align: left;
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--color-text-secondary);
-}
-.nav-mobile-search:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus);
-}
-
 /* Nav panels
  *
  * No borders and no dividers anywhere: the hovered item separates itself with a