feat(website): rebuild the navbar as four triggers with hover panels, a transparent hero surface, and a mobile drill-in stack

apps/website/e2e/nav-drawer.spec.ts

@@ -0,0 +1,154 @@
+import { test, expect, type Page } from '@playwright/test';
+
+/**
+ * jsdom has no CSS and no layout engine, so `src/components/shared/Nav.spec.tsx`
+ * can exercise every state transition of the mobile drawer (push, pop, focus,
+ * Escape) without ever being able to catch what only a real browser renders:
+ * the overlay's `top: calc(var(--nav-h) - 1px)` landing in the wrong place, an
+ * overlay host swallowing or mispositioning pointer events over a row (a
+ * failure mode this repo has shipped before), an `lg:hidden` regression
+ * leaking the hamburger onto desktop, or a scroll lock that never engages or
+ * never releases. These assertions are about geometry and real pointer
+ * delivery, so — like e2e/nav-panels.spec.ts for the desktop panels — they
+ * only mean anything in a real browser.
+ */
+
+const dialog = (page: Page) =>
+  page.getByRole('dialog', { name: 'Mobile navigation' });
+
+test.describe('mobile nav drawer', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+  });
+
+  test('opens and shows the four root rows', async ({ page }) => {
+    await page.goto('/');
+    await page.getByRole('button', { name: 'Open menu' }).click();
+
+    const drawer = dialog(page);
+    await expect(drawer).toBeVisible();
+
+    await expect(drawer.getByRole('button', { name: 'Libraries' })).toBeVisible();
+    await expect(drawer.getByRole('button', { name: 'Docs' })).toBeVisible();
+    await expect(drawer.getByRole('button', { name: 'Solutions' })).toBeVisible();
+
+    const pricing = drawer.getByRole('link', { name: 'Pricing' });
+    await expect(pricing).toBeVisible();
+    await expect(pricing).toHaveAttribute('href', '/pricing');
+  });
+
+  test('a click on the Libraries row actually reaches it', async ({ page }) => {
+    await page.goto('/');
+    await page.getByRole('button', { name: 'Open menu' }).click();
+
+    const drawer = dialog(page);
+    const librariesRow = drawer.getByRole('button', { name: 'Libraries' });
+    await expect(librariesRow).toBeVisible();
+
+    // Independent of whether .click() "succeeds": ask the browser what
+    // element is actually topmost at the row's centre. An invisible overlay
+    // host sitting over the row — the exact failure mode this repo has
+    // shipped before — would still let Playwright's actionability checks
+    // pass (the row is visible and unobscured *by Playwright's own reading of
+    // the DOM*), but elementFromPoint reports what a real finger would hit.
+    const box = await librariesRow.boundingBox();
+    if (!box) throw new Error('Libraries row has no box');
+    const centre = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+    const topmostIsRow = await page.evaluate(
+      ({ x, y }) => {
+        const el = document.elementFromPoint(x, y);
+        return Boolean(el?.closest('.nav-mobile-row'));
+      },
+      centre,
+    );
+    expect(topmostIsRow).toBe(true);
+
+    await librariesRow.click();
+
+    // The level actually pushed: the four package links are showing, not
+    // just "the click handler ran" (which jsdom already proves).
+    await expect(drawer.getByRole('button', { name: 'Back to menu' })).toBeVisible();
+    await expect(drawer.getByRole('link', { name: /@threadplane\/langgraph/ })).toBeVisible();
+    await expect(drawer.getByRole('link', { name: /@threadplane\/ag-ui/ })).toBeVisible();
+    await expect(drawer.getByRole('link', { name: /@threadplane\/chat/ })).toBeVisible();
+    await expect(drawer.getByRole('link', { name: /@threadplane\/render/ })).toBeVisible();
+    await expect(drawer.getByText('Not sure which one?')).toBeVisible();
+    await expect(drawer.getByRole('link', { name: /Choosing an adapter/ })).toBeVisible();
+  });
+
+  test('pushes into Libraries and pops back to the root rows', async ({ page }) => {
+    await page.goto('/');
+    await page.getByRole('button', { name: 'Open menu' }).click();
+
+    const drawer = dialog(page);
+    await drawer.getByRole('button', { name: 'Libraries' }).click();
+
+    await expect(drawer.getByRole('button', { name: 'Back to menu' })).toBeVisible();
+    await expect(drawer.getByRole('link', { name: /@threadplane\/langgraph/ })).toBeVisible();
+
+    await drawer.getByRole('button', { name: 'Back to menu' }).click();
+
+    await expect(drawer.getByRole('button', { name: 'Libraries' })).toBeVisible();
+    await expect(drawer.getByRole('button', { name: 'Docs' })).toBeVisible();
+    await expect(drawer.getByRole('button', { name: 'Solutions' })).toBeVisible();
+    await expect(drawer.getByRole('link', { name: /@threadplane\/langgraph/ })).toHaveCount(0);
+  });
+
+  test('sits flush under the nav', async ({ page }) => {
+    await page.goto('/');
+    await page.getByRole('button', { name: 'Open menu' }).click();
+
+    const drawer = dialog(page);
+    await expect(drawer).toBeVisible();
+
+    const navBox = await page.locator('nav.nav-bar').boundingBox();
+    const drawerBox = await drawer.boundingBox();
+    if (!navBox || !drawerBox) throw new Error('nav or drawer has no box');
+
+    // `top: calc(var(--nav-h) - 1px)` exists precisely so the drawer overlaps
+    // the nav's own 1px border rather than leaving a gap or an overshoot —
+    // the class of offset bug that has shipped on this repo before.
+    // `boundingBox()` returns {x, y, width, height} — not `bottom` — so the
+    // nav's bottom edge is derived, not read directly.
+    const navBottom = navBox.y + navBox.height;
+    expect(Math.abs(drawerBox.y - navBottom)).toBeLessThanOrEqual(1);
+  });
+
+  test('locks body scroll while open and releases it on close', async ({ page }) => {
+    await page.goto('/');
+
+    expect(
+      await page.evaluate(() => document.body.style.overflow),
+    ).not.toBe('hidden');
+
+    await page.getByRole('button', { name: 'Open menu' }).click();
+    await expect(dialog(page)).toBeVisible();
+    expect(await page.evaluate(() => document.body.style.overflow)).toBe('hidden');
+
+    await page.getByRole('button', { name: 'Close menu' }).click();
+    await expect(dialog(page)).toBeHidden();
+    expect(
+      await page.evaluate(() => document.body.style.overflow),
+    ).not.toBe('hidden');
+  });
+
+  test('the hamburger is not present at desktop width', async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await page.goto('/');
+    await expect(page.getByRole('button', { name: 'Open menu' })).toBeHidden();
+  });
+
+  test('opens pre-pushed to the docs level on /docs', async ({ page }) => {
+    await page.goto('/docs');
+    await page.getByRole('button', { name: 'Open menu' }).click();
+
+    const drawer = dialog(page);
+    await expect(drawer).toBeVisible();
+    await expect(drawer.getByRole('button', { name: 'Back to menu' })).toBeVisible();
+    await expect(drawer.getByRole('button', { name: 'Search docs' })).toBeVisible();
+
+    // It opened at the docs level, not the root list of site triggers.
+    await expect(drawer.getByRole('button', { name: 'Libraries' })).toHaveCount(0);
+    await expect(drawer.getByRole('button', { name: 'Solutions' })).toHaveCount(0);
+  });
+});

apps/website/e2e/nav-height.spec.ts

@@ -17,32 +17,118 @@ import { test, expect } from '@playwright/test';
  * bug this guards against was fifteen.
  */
 const STEPS = [
-  { width: 375, note: 'phone — px-6 py-4' },
-  { width: 767, note: 'phone — last px before md' },
-  { width: 768, note: 'tablet — md padding, no lg link row' },
-  { width: 1023, note: 'tablet — last px before lg' },
-  { width: 1024, note: 'desktop — lg link row appears' },
-  { width: 1440, note: 'desktop' },
+  { width: 375, note: 'phone — px-6 py-4', marketingNavH: 58, docsNavH: 58 },
+  { width: 767, note: 'phone — last px before md', marketingNavH: 58, docsNavH: 58 },
+  { width: 768, note: 'tablet — md padding, no lg link row', marketingNavH: 66, docsNavH: 58 },
+  { width: 1023, note: 'tablet — last px before lg', marketingNavH: 66, docsNavH: 58 },
+  { width: 1024, note: 'desktop — lg link row appears', marketingNavH: 81, docsNavH: 58 },
+  { width: 1440, note: 'desktop', marketingNavH: 81, docsNavH: 58 },
 ];
 
-for (const step of STEPS) {
-  test(`--nav-h matches the rendered nav at ${step.width}px (${step.note})`, async ({ page }) => {
-    await page.setViewportSize({ width: step.width, height: 800 });
-    await page.goto('/docs/langgraph/getting-started/introduction');
+/**
+ * `--nav-h` is route-dependent as of the navbar redesign: marketing routes keep
+ * the measured 58/66/81 ladder, and /docs is a flat 58 at every width. Both
+ * have to be measured, because the declared value is rounded up off the
+ * rendered height and only a browser knows what that height is.
+ */
+const SURFACES = [
+  { name: 'marketing', url: '/', expectedNavH: (step: (typeof STEPS)[number]) => step.marketingNavH },
+  {
+    name: 'docs',
+    url: '/docs/langgraph/getting-started/introduction',
+    expectedNavH: (step: (typeof STEPS)[number]) => step.docsNavH,
+  },
+];
 
-    const nav = page.locator('nav').first();
-    await expect(nav).toBeVisible();
+for (const surface of SURFACES) {
+  for (const step of STEPS) {
+    test(`--nav-h matches the rendered nav on ${surface.name} at ${step.width}px (${step.note})`, async ({
+      page,
+    }) => {
+      await page.setViewportSize({ width: step.width, height: 800 });
+      await page.goto(surface.url);
 
-    const measured = await nav.evaluate((el) => el.getBoundingClientRect().height);
-    const variable = await page.evaluate(() =>
-      parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--nav-h')),
-    );
+      const nav = page.locator('nav').first();
+      await expect(nav).toBeVisible();
 
-    expect(variable).toBeGreaterThanOrEqual(measured);
-    expect(variable - measured).toBeLessThanOrEqual(1);
-  });
+      const measured = await nav.evaluate((el) => el.getBoundingClientRect().height);
+      const variable = await page.evaluate(() =>
+        parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--nav-h')),
+      );
+
+      expect(
+        variable,
+        `--nav-h (${variable}) drifted from the rendered nav (${measured}) on ` +
+          `${surface.name} at ${step.width}px. The variable no longer describes ` +
+          `reality, so every offset built on it is wrong. Re-measure the nav.`,
+      ).toBeGreaterThanOrEqual(measured);
+      expect(
+        variable - measured,
+        `--nav-h (${variable}) overshoots the rendered nav (${measured}) by ` +
+          `${(variable - measured).toFixed(2)}px on ${surface.name} at ` +
+          `${step.width}px. Overshoot becomes dead space above the content.`,
+      ).toBeLessThanOrEqual(1);
+
+      // The two checks above are self-consistency only: they confirm --nav-h
+      // tracks whatever the nav happens to render, but they cannot see a
+      // regression where the *ladder itself* collapses — e.g. the marketing
+      // steps flattening to 58px like docs. If the declared value and the
+      // rendered nav moved together, every self-consistency check above would
+      // still pass. Pinning the declared value against the ladder we intend
+      // catches that; it is a separate property from "does the variable match
+      // what rendered."
+      expect(
+        variable,
+        `--nav-h is ${variable} on ${surface.name} at ${step.width}px, but this ` +
+          `ladder is meant to declare ${surface.expectedNavH(step)}px. This is a ` +
+          `DESIGN change, not drift — the checks above still passed, so the ` +
+          `variable and the nav moved together. Update this table only if the ` +
+          `new ladder is intended.`,
+      ).toBe(surface.expectedNavH(step));
+    });
+  }
 }
 
+test('the docs nav does not grow with the breakpoint', async ({ page }) => {
+  const heights: number[] = [];
+  for (const width of [375, 768, 1440]) {
+    await page.setViewportSize({ width, height: 800 });
+    await page.goto('/docs/langgraph/getting-started/introduction');
+    heights.push(
+      await page
+        .locator('nav')
+        .first()
+        .evaluate((el) => el.getBoundingClientRect().height),
+    );
+  }
+  const [phone] = heights;
+  for (const height of heights) expect(Math.abs(height - phone)).toBeLessThanOrEqual(1);
+});
+
+test('the marketing nav does grow with the breakpoint', async ({ page }) => {
+  // Direct counterpart to "the docs nav does not grow with the breakpoint"
+  // above: docs stays flat on purpose, and marketing is supposed to keep its
+  // ladder. Stating both intents as tests means a future change that
+  // accidentally flattens the marketing ladder (matching it to docs) fails
+  // here even though every self-consistency check elsewhere in this file
+  // would still pass.
+  await page.setViewportSize({ width: 375, height: 800 });
+  await page.goto('/');
+  const phoneHeight = await page
+    .locator('nav')
+    .first()
+    .evaluate((el) => el.getBoundingClientRect().height);
+
+  await page.setViewportSize({ width: 1440, height: 800 });
+  await page.goto('/');
+  const desktopHeight = await page
+    .locator('nav')
+    .first()
+    .evaluate((el) => el.getBoundingClientRect().height);
+
+  expect(desktopHeight - phoneHeight).toBeGreaterThan(15);
+});
+
 test('the docs column starts directly under the nav at a tablet width', async ({ page }) => {
   // The 15px overshoot showed up here as dead space above the breadcrumb.
   await page.setViewportSize({ width: 900, height: 800 });