fix(docs): simplify selection and verify media interactions (#9493)

* fix(docs): simplify selection and verify media interactions

* fix(docs): wait for actionable lightbox backdrop in e2e

Author: waleedlatif1

apps/docs/components/docs/navigation.tsx

@@ -68,8 +68,7 @@ function NavigationItem({ node, pathname, onNavigate }: NavigationItemProps) {
         <div
           className={cn(
             'group/branch flex min-h-[30px] items-center rounded-lg transition-colors hover:bg-[var(--docs-hover)] active:bg-[var(--docs-pressed)]',
-            isCurrent &&
-              'bg-[var(--docs-selected)] shadow-[var(--docs-current-edge)] hover:bg-[var(--docs-selected-hover)]'
+            isCurrent && 'bg-[var(--docs-selected)] hover:bg-[var(--docs-selected-hover)]'
           )}
         >
           <Link

apps/docs/components/docs/tokens.css

@@ -45,7 +45,6 @@
   --docs-hover: rgb(10 10 10 / 6%);
   --docs-selected: rgb(0 0 0 / 8%);
   --docs-selected-hover: var(--docs-selected);
-  --docs-current-edge: none;
   --docs-pressed: rgb(0 0 0 / 12%);
   --docs-link: #0066cc;
   --docs-prose-link: var(--docs-link);
@@ -134,7 +133,6 @@
   --docs-hover: #2b2b2b;
   --docs-selected: #333;
   --docs-selected-hover: var(--docs-pressed);
-  --docs-current-edge: inset 2px 0 0 var(--docs-boundary);
   --docs-pressed: #3a3a3a;
   --docs-link: #8abeff;
   --docs-prose-link: var(--docs-heading);

apps/docs/migration/design-system.md

@@ -22,7 +22,7 @@ Three-column reading begins at 1280px. At 1024–1279px the TOC becomes a compac
 | Code | Geist Mono | 13 / 22px | 400 | normal |
 | Keyboard | Geist | 11 / 14px | 400 | normal |
 
-Marketing calls to action use variable weight 450, matching the landing page. Heading weight remains 500; selection in the sidebar uses a neutral surface and, in dark mode, a 2px inset left edge without changing text color or weight.
+Marketing calls to action use variable weight 450, matching the landing page. Heading weight remains 500; selection in the sidebar uses a neutral surface in both themes without changing text color or weight. Keyboard focus retains its separate outline.
 
 The header keeps weight 400 in every navigation state at the user's request, matching the landing navigation and preventing label widths from shifting. Current-section ink changes without changing geometry. The shared wordmark uses the landing's visible SVG overflow and optical offset; header and footer links do not initiate native drag operations. Root vertical overscroll is disabled while normal page and contained reference scrolling remain available.
 

apps/docs/scripts/test-navigation-e2e.ts

@@ -543,7 +543,8 @@ try {
               path: join(directory, `image-${scene.variant}-${width}.png`),
               animations: 'disabled',
             })
-            await figure.getByRole('button').click()
+            const trigger = figure.getByRole('button')
+            await trigger.click()
             const viewer = page.getByRole('dialog')
             await expect(viewer.getByRole('img')).toBeVisible()
             await expect
@@ -589,6 +590,19 @@ try {
               })
             await page.keyboard.press('Escape')
             await expect(viewer).toHaveCount(0)
+            await expect(trigger).toBeFocused()
+            await trigger.press('Enter')
+            await expect(viewer).toBeVisible()
+            await page
+              .locator('.docs-portal[data-state="open"][aria-hidden="true"]')
+              .click({ position: { x: 1, y: 1 } })
+            await expect(viewer).toHaveCount(0)
+            await expect(trigger).toBeFocused()
+            await trigger.press('Enter')
+            await expect(viewer).toBeVisible()
+            await viewer.getByRole('button', { name: 'Close media viewer', exact: true }).click()
+            await expect(viewer).toHaveCount(0)
+            await expect(trigger).toBeFocused()
           } finally {
             await page.close()
           }

apps/docs/scripts/test-search-postgres-e2e.ts

@@ -400,16 +400,19 @@ async function verifyDatabase() {
   await check(
     'Citation-only changes are stale and repair without replacing embeddings',
     async () => {
+      const citations = await sql<
+        Array<{ chunk_id: string; source_link: string; embedding: string }>
+      >`SELECT chunk_id, source_link, embedding::text FROM docs_embeddings WHERE source_document = ${page.sourcePath} ORDER BY chunk_id`
+      assert(citations.length > 0)
       await sql`UPDATE docs_embeddings SET source_link = 'https://old.example/introduction' WHERE source_document = ${page.sourcePath}`
       assert.equal((await index('check', 'citation-stale', ['/introduction'])).exitCode, 1)
       const repaired = await index('publish', 'citation-repaired', ['/introduction'])
       assert.equal(repaired.exitCode, 0)
       assert.deepEqual(await fingerprint(), fresh)
-      const [row] = await sql<
-        Array<{ source_link: string; embedding: string }>
-      >`SELECT source_link, embedding::text FROM docs_embeddings WHERE source_document = ${page.sourcePath}`
-      assert.equal(row?.source_link, 'https://docs.sim.ai/introduction')
-      assert.equal(row?.embedding, vector)
+      const repairedCitations = await sql<
+        Array<{ chunk_id: string; source_link: string; embedding: string }>
+      >`SELECT chunk_id, source_link, embedding::text FROM docs_embeddings WHERE source_document = ${page.sourcePath} ORDER BY chunk_id`
+      assert.deepEqual(repairedCitations, citations)
       assert.equal((await index('check', 'citation-fresh', ['/introduction'])).exitCode, 0)
     }
   )