fix(web): docs sidebar and code highlighting improvements

- Make doc sidebar section titles non-selectable and non-interactive
- Fix ESM compatibility in tailwind config (require -> import)
- Fix React 19 key prop warning in code-demo component
- Add visually hidden SheetTitle for accessibility compliance

Author: brandonkachen

web/src/app/docs/layout.tsx

@@ -6,7 +6,13 @@ import { useState, useEffect, useRef } from 'react'
 
 import { DocSidebar, sections } from '@/components/docs/doc-sidebar'
 import { Button } from '@/components/ui/button'
-import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
+import {
+  Sheet,
+  SheetContent,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet'
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
 
 export default function DocsLayout({
   children,
@@ -96,6 +102,9 @@ export default function DocsLayout({
             side="bottom"
             className="h-[80vh] p-6 pt-12 overflow-y-auto"
           >
+            <VisuallyHidden>
+              <SheetTitle>Documentation Navigation</SheetTitle>
+            </VisuallyHidden>
             <DocSidebar onNavigate={() => setOpen(false)} />
           </SheetContent>
           <SheetTrigger asChild>

web/src/components/docs/doc-sidebar.tsx

@@ -119,10 +119,7 @@ export function DocSidebar({
         <div key={group.label} className="space-y-3">
           {/* Group header */}
           <div
-            className={cn(
-              'px-3 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground/70',
-              groupIndex > 0 && 'pt-2 border-t border-border/50',
-            )}
+            className="px-3 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground/70 select-none pointer-events-none"
           >
             <group.icon className="h-3.5 w-3.5" />
             {group.label}
@@ -132,22 +129,11 @@ export function DocSidebar({
           <div className="space-y-4">
             {group.sections.map((section) => (
               <div key={section.href} className="space-y-1">
-                <Link
-                  href={section.href}
-                  target={section.external ? '_blank' : undefined}
-                  onClick={() => {
-                    const sheet = document.querySelector('[data-state="open"]')
-                    if (sheet) sheet.setAttribute('data-state', 'closed')
-                    onNavigate?.()
-                  }}
-                  className={cn(
-                    'block px-3 py-2 hover:bg-accent rounded-md transition-all text-sm font-medium',
-                    pathname === section.href &&
-                      'bg-accent text-accent-foreground',
-                  )}
+                <div
+                  className="block px-3 py-2 text-sm font-medium select-none"
                 >
                   {section.title}
-                </Link>
+                </div>
                 {section.subsections && section.subsections.length > 0 && (
                   <div className="ml-4 space-y-1">
                     {section.subsections.map((subsection) => (

web/src/components/docs/mdx/code-demo.tsx

@@ -236,26 +236,31 @@ export function CodeDemo({ children, language, rawContent }: CodeDemoProps) {
                   color: tokenColor || style.color,
                 }}
               >
-                {tokens.map((line, i) => (
-                  <div key={i} {...getLineProps({ line })}>
-                    {line.map((token, key) => {
-                      const tokenProps = getTokenProps({ token, key })
-                      // Override colors for special languages in render loop
-                      const color = tokenColor || tokenProps.style?.color
+                {tokens.map((line, i) => {
+                  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                  const { key: _lineKey, ...lineProps } = getLineProps({ line })
+                  return (
+                    <div key={i} {...lineProps}>
+                      {line.map((token, tokenIndex) => {
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        const { key: _tokenKey, ...tokenProps } = getTokenProps({ token, key: tokenIndex })
+                        // Override colors for special languages in render loop
+                        const color = tokenColor || tokenProps.style?.color
 
-                      return (
-                        <span
-                          key={key}
-                          {...tokenProps}
-                          style={{
-                            ...tokenProps.style,
-                            color,
-                          }}
-                        />
-                      )
-                    })}
-                  </div>
-                ))}
+                        return (
+                          <span
+                            key={tokenIndex}
+                            {...tokenProps}
+                            style={{
+                              ...tokenProps.style,
+                              color,
+                            }}
+                          />
+                        )
+                      })}
+                    </div>
+                  )
+                })}
               </pre>
             )
           }}

web/tailwind.config.ts

@@ -1,4 +1,6 @@
 import type { Config } from 'tailwindcss'
+import tailwindcssAnimate from 'tailwindcss-animate'
+import typography from '@tailwindcss/typography'
 
 const config = {
   darkMode: ['class'],
@@ -183,7 +185,7 @@ const config = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
+  plugins: [tailwindcssAnimate, typography],
 } satisfies Config
 
 export default config