skrypt-ai 0.3.3 → 0.3.4

package/dist/template/src/components/mdx/card.tsx

@@ -14,19 +14,19 @@ export function Card({ title, icon, href, children }: CardProps) {
 
   const content = (
     <div className={cn(
-      'p-4 border border-[var(--color-border)] rounded-lg transition-colors',
-      href && 'hover:border-[var(--color-primary)] hover:bg-[var(--color-bg-secondary)] cursor-pointer'
+      'group p-5 border border-[var(--color-border)] rounded-xl transition-all duration-200',
+      href && 'hover:border-[var(--color-border-strong)] hover:shadow-sm hover:-translate-y-0.5 cursor-pointer'
     )}>
-      <div className="flex items-start gap-3">
+      <div className="flex items-start gap-3.5">
         {Icon && (
-          <div className="p-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] rounded-lg">
-            <Icon size={20} />
+          <div className="shrink-0 p-2 bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)] rounded-lg group-hover:bg-[var(--color-primary-light)] group-hover:text-[var(--color-primary)] transition-colors">
+            <Icon size={18} />
           </div>
         )}
         <div>
-          <h3 className="font-medium text-[var(--color-text)]">{title}</h3>
+          <h3 className="font-semibold text-[0.9375rem] text-[var(--color-text)] !mt-0 !mb-0">{title}</h3>
           {children && (
-            <div className="mt-1 text-sm text-[var(--color-text-secondary)]">
+            <div className="mt-1.5 text-[0.8125rem] leading-relaxed text-[var(--color-text-secondary)]">
               {children}
             </div>
           )}
@@ -36,7 +36,7 @@ export function Card({ title, icon, href, children }: CardProps) {
   )
 
   if (href) {
-    return <Link href={href}>{content}</Link>
+    return <Link href={href} className="hover:no-underline">{content}</Link>
   }
 
   return content
@@ -55,7 +55,7 @@ export function CardGroup({ cols = 2, children }: CardGroupProps) {
   }
 
   return (
-    <div className={cn('grid gap-4 my-6', gridCols[cols])}>
+    <div className={cn('grid gap-3 my-6', gridCols[cols])}>
       {children}
     </div>
   )

package/dist/template/src/components/mdx/code-group.tsx

@@ -72,31 +72,46 @@ export function CodeGroup({ children }: CodeGroupProps) {
     const labels: Record<string, string> = {
       typescript: 'TypeScript',
       javascript: 'JavaScript',
+      ts: 'TypeScript',
+      js: 'JavaScript',
+      tsx: 'TypeScript',
+      jsx: 'JavaScript',
       python: 'Python',
-      bash: 'Bash',
-      shell: 'Shell',
+      py: 'Python',
+      bash: 'Terminal',
+      shell: 'Terminal',
+      sh: 'Terminal',
       json: 'JSON',
       yaml: 'YAML',
+      yml: 'YAML',
       go: 'Go',
       rust: 'Rust',
+      ruby: 'Ruby',
+      php: 'PHP',
+      java: 'Java',
+      csharp: 'C#',
+      cs: 'C#',
+      css: 'CSS',
+      html: 'HTML',
+      sql: 'SQL',
     }
-    return labels[lang] || lang
+    return labels[lang] || lang.charAt(0).toUpperCase() + lang.slice(1)
   }
 
   return (
-    <div className="my-6 border border-[var(--color-border)] rounded-lg overflow-hidden">
+    <div className="my-6 rounded-xl overflow-hidden border border-[var(--color-border)] bg-[var(--color-code-bg)]">
       {/* Tab bar */}
-      <div className="flex items-center justify-between bg-[var(--color-bg-secondary)] border-b border-[var(--color-border)]">
-        <div className="flex">
+      <div className="flex items-center justify-between border-b border-white/[0.06]">
+        <div className="flex gap-0 px-1 pt-1">
           {blocks.map((block, index) => (
             <button
               key={`${block.language}-${block.filename || index}`}
               onClick={() => setActiveIndex(index)}
               className={cn(
-                'px-4 py-2 text-sm font-medium transition-colors',
+                'px-3 py-1.5 text-[0.75rem] font-medium rounded-t-lg transition-colors',
                 index === activeIndex
-                  ? 'bg-[var(--color-code-bg)] text-[var(--color-code-text)]'
-                  : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text)]'
+                  ? 'bg-white/[0.06] text-[var(--color-code-text)]'
+                  : 'text-white/40 hover:text-white/60'
               )}
             >
               {getLanguageLabel(block.language, block.filename)}
@@ -105,21 +120,19 @@ export function CodeGroup({ children }: CodeGroupProps) {
         </div>
         <button
           onClick={copyToClipboard}
-          className="p-2 mr-2 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] transition-colors"
+          className="p-2 mr-2 text-white/30 hover:text-white/60 transition-colors"
           title="Copy code"
         >
-          {copied ? <Check size={16} /> : <Copy size={16} />}
+          {copied ? <Check size={14} /> : <Copy size={14} />}
         </button>
       </div>
 
       {/* Code content */}
-      <div className="bg-[var(--color-code-bg)]">
-        <pre className="!m-0 !rounded-none">
-          <code className={`language-${activeBlock.language}`}>
-            {activeBlock.code}
-          </code>
-        </pre>
-      </div>
+      <pre className="!m-0 !rounded-none !border-0 !bg-transparent">
+        <code className={`language-${activeBlock.language}`}>
+          {activeBlock.code}
+        </code>
+      </pre>
     </div>
   )
 }

package/dist/template/src/components/mdx/highlighted-code.tsx

@@ -1,10 +1,8 @@
 'use client'
 
 import { useState, useEffect, useContext, ReactNode, isValidElement, Children } from 'react'
-import { Copy, Check } from 'lucide-react'
+import { Copy, Check, FileCode } from 'lucide-react'
 import { highlight, DEFAULT_THEME, type ThemeName } from '@/lib/highlight'
-
-// Import the context directly to use useContext safely
 import { SyntaxThemeContext } from '@/contexts/syntax-theme'
 
 interface HighlightedCodeProps {
@@ -12,27 +10,50 @@ interface HighlightedCodeProps {
   className?: string
 }
 
+const langLabels: Record<string, string> = {
+  typescript: 'TypeScript',
+  javascript: 'JavaScript',
+  ts: 'TypeScript',
+  js: 'JavaScript',
+  tsx: 'TSX',
+  jsx: 'JSX',
+  python: 'Python',
+  py: 'Python',
+  bash: 'Terminal',
+  shell: 'Terminal',
+  sh: 'Terminal',
+  json: 'JSON',
+  yaml: 'YAML',
+  go: 'Go',
+  rust: 'Rust',
+  css: 'CSS',
+  html: 'HTML',
+  sql: 'SQL',
+  text: '',
+}
+
 export function HighlightedCode({ children, className }: HighlightedCodeProps) {
   const [copied, setCopied] = useState(false)
   const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null)
 
-  // Use context safely - fallback to default if not available
   const syntaxContext = useContext(SyntaxThemeContext)
   const theme: ThemeName = syntaxContext?.theme ?? DEFAULT_THEME
 
-  // Extract code text and language from children
   let codeText = ''
   let language = 'text'
+  let filename = ''
 
   Children.forEach(children, (child) => {
     if (isValidElement(child) && child.type === 'code') {
-      const props = child.props as { children?: string; className?: string }
+      const props = child.props as { children?: string; className?: string; 'data-filename'?: string }
       codeText = props.children || ''
-      // Extract language from className like "language-typescript"
       const classMatch = props.className?.match(/language-(\w+)/)
       if (classMatch) {
         language = classMatch[1]
       }
+      if (props['data-filename']) {
+        filename = props['data-filename']
+      }
     }
   })
 
@@ -65,25 +86,49 @@ export function HighlightedCode({ children, className }: HighlightedCodeProps) {
     setTimeout(() => setCopied(false), 2000)
   }
 
+  const langLabel = filename || langLabels[language] || language
+  const showHeader = langLabel && language !== 'text'
+
   return (
-    <div className="relative group my-4">
+    <div className="relative group my-5 rounded-xl overflow-hidden border border-[var(--color-border)] bg-[var(--color-code-bg)]">
+      {/* Filename / language header bar */}
+      {showHeader && (
+        <div className="flex items-center justify-between px-4 py-2 border-b border-white/[0.06]">
+          <div className="flex items-center gap-2 text-[0.75rem] text-white/40">
+            <FileCode size={13} />
+            <span>{langLabel}</span>
+          </div>
+          <button
+            onClick={handleCopy}
+            className="p-1 text-white/30 hover:text-white/60 transition-colors"
+            title={copied ? 'Copied!' : 'Copy code'}
+          >
+            {copied ? <Check size={13} /> : <Copy size={13} />}
+          </button>
+        </div>
+      )}
+
       {highlightedHtml ? (
         <div
-          className="[&>pre]:rounded-lg [&>pre]:p-4 [&>pre]:overflow-x-auto"
+          className="[&>pre]:!rounded-none [&>pre]:!border-0 [&>pre]:!m-0 [&>pre]:px-4 [&>pre]:py-3 [&>pre]:overflow-x-auto [&>pre]:!bg-transparent"
           dangerouslySetInnerHTML={{ __html: highlightedHtml }}
         />
       ) : (
-        <pre className={className}>
+        <pre className="!rounded-none !border-0 !m-0 px-4 py-3 overflow-x-auto !bg-transparent">
           {children}
         </pre>
       )}
-      <button
-        onClick={handleCopy}
-        className="absolute top-2 right-2 p-1.5 rounded bg-[var(--color-bg-tertiary)]/80 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] opacity-0 group-hover:opacity-100 transition-opacity"
-        title={copied ? 'Copied!' : 'Copy code'}
-      >
-        {copied ? <Check size={14} /> : <Copy size={14} />}
-      </button>
+
+      {/* Copy button fallback (no header) */}
+      {!showHeader && (
+        <button
+          onClick={handleCopy}
+          className="absolute top-2.5 right-2.5 p-1.5 rounded-md text-white/30 hover:text-white/60 opacity-0 group-hover:opacity-100 transition-all"
+          title={copied ? 'Copied!' : 'Copy code'}
+        >
+          {copied ? <Check size={13} /> : <Copy size={13} />}
+        </button>
+      )}
     </div>
   )
 }

package/dist/template/src/components/mdx/steps.tsx

@@ -8,18 +8,18 @@ export function Steps({ children }: StepsProps) {
   const items = Children.toArray(children).filter(isValidElement)
 
   return (
-    <div className="my-6 space-y-6">
+    <div className="my-8 relative">
       {items.map((child, index) => (
-        <div key={`step-${index}`} className="flex gap-4">
+        <div key={`step-${index}`} className="flex gap-4 pb-8 last:pb-0">
           <div className="flex flex-col items-center">
-            <div className="flex items-center justify-center w-8 h-8 rounded-full bg-[var(--color-primary)] text-white text-sm font-medium">
+            <div className="flex items-center justify-center w-7 h-7 rounded-full bg-[var(--color-text)] text-[var(--color-bg)] text-xs font-semibold shrink-0">
               {index + 1}
             </div>
             {index < items.length - 1 && (
               <div className="flex-1 w-px bg-[var(--color-border)] mt-2" />
             )}
           </div>
-          <div className="flex-1 pb-6">
+          <div className="flex-1 pt-0.5">
             {child}
           </div>
         </div>
@@ -36,8 +36,8 @@ interface StepProps {
 export function Step({ title, children }: StepProps) {
   return (
     <div>
-      <h3 className="font-medium text-[var(--color-text)] mb-2">{title}</h3>
-      <div className="text-[var(--color-text-secondary)]">{children}</div>
+      <h3 className="!text-[0.9375rem] font-semibold text-[var(--color-text)] !mt-0 mb-2">{title}</h3>
+      <div className="text-[0.8125rem] text-[var(--color-text-secondary)] leading-relaxed">{children}</div>
     </div>
   )
 }

package/dist/template/src/components/mdx/tabs.tsx

@@ -31,7 +31,7 @@ interface TabListProps {
 
 export function TabList({ children }: TabListProps) {
   return (
-    <div className="flex border-b border-[var(--color-border)]">
+    <div className="flex gap-0.5 border-b border-[var(--color-border)]">
       {children}
     </div>
   )
@@ -53,10 +53,10 @@ export function Tab({ value, children }: TabProps) {
     <button
       onClick={() => setActiveTab(value)}
       className={cn(
-        'px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px',
+        'px-3 py-2 text-[0.8125rem] font-medium transition-colors border-b-2 -mb-px',
         isActive
           ? 'border-[var(--color-primary)] text-[var(--color-primary)]'
-          : 'border-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text)]'
+          : 'border-transparent text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]'
       )}
     >
       {children}

package/dist/template/src/components/search-dialog.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useEffect, useState, useCallback, useRef } from 'react'
-import { Search, X, FileText } from 'lucide-react'
+import { Search, FileText, ArrowRight } from 'lucide-react'
 import Link from 'next/link'
 import { cn } from '@/lib/utils'
 import { search as performSearch, SearchResultWithHighlight } from '@/lib/search'
@@ -11,9 +11,6 @@ interface SearchDialogProps {
   onClose: () => void
 }
 
-/**
- * Highlight search terms in text
- */
 function highlightTerms(text: string, query: string): React.ReactNode {
   if (!query.trim()) return text
 
@@ -24,7 +21,7 @@ function highlightTerms(text: string, query: string): React.ReactNode {
 
   return parts.map((part, i) =>
     terms.some(t => part.toLowerCase() === t) ? (
-      <mark key={i} className="bg-yellow-200 dark:bg-yellow-800 text-inherit rounded px-0.5">
+      <mark key={i} className="bg-[var(--color-primary)]/20 text-[var(--color-primary)] rounded px-0.5">
         {part}
       </mark>
     ) : (
@@ -37,14 +34,17 @@ export function SearchDialog({ open, onClose }: SearchDialogProps) {
   const [query, setQuery] = useState('')
   const [results, setResults] = useState<SearchResultWithHighlight[]>([])
   const [isLoading, setIsLoading] = useState(false)
+  const [selectedIndex, setSelectedIndex] = useState(0)
   const dialogRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
 
-  // Focus trap and restore focus on close
   useEffect(() => {
     if (open) {
       const previouslyFocused = document.activeElement as HTMLElement
       inputRef.current?.focus()
+      setQuery('')
+      setResults([])
+      setSelectedIndex(0)
 
       return () => {
         previouslyFocused?.focus()
@@ -62,6 +62,7 @@ export function SearchDialog({ open, onClose }: SearchDialogProps) {
     try {
       const searchResults = await performSearch(q)
       setResults(searchResults)
+      setSelectedIndex(0)
     } catch (err) {
       console.error('Search failed:', err)
       setResults([])
@@ -71,7 +72,7 @@ export function SearchDialog({ open, onClose }: SearchDialogProps) {
   }, [])
 
   useEffect(() => {
-    const debounce = setTimeout(() => search(query), 200)
+    const debounce = setTimeout(() => search(query), 150)
     return () => clearTimeout(debounce)
   }, [query, search])
 
@@ -80,7 +81,6 @@ export function SearchDialog({ open, onClose }: SearchDialogProps) {
       if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
         e.preventDefault()
         if (open) onClose()
-        else onClose() // This should trigger open, but we don't have that control here
       }
       if (e.key === 'Escape' && open) {
         onClose()
@@ -91,13 +91,26 @@ export function SearchDialog({ open, onClose }: SearchDialogProps) {
     return () => document.removeEventListener('keydown', handleKeyDown)
   }, [open, onClose])
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setSelectedIndex((prev) => Math.min(prev + 1, results.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setSelectedIndex((prev) => Math.max(prev - 1, 0))
+    } else if (e.key === 'Enter' && results[selectedIndex]) {
+      onClose()
+      window.location.href = results[selectedIndex].href
+    }
+  }
+
   if (!open) return null
 
   return (
     <div className="fixed inset-0 z-50" role="presentation">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
         onClick={onClose}
         aria-hidden="true"
       />
@@ -108,69 +121,96 @@ export function SearchDialog({ open, onClose }: SearchDialogProps) {
         role="dialog"
         aria-modal="true"
         aria-label="Search documentation"
-        className="absolute top-[20%] left-1/2 -translate-x-1/2 w-full max-w-xl"
+        className="absolute top-[15%] left-1/2 -translate-x-1/2 w-full max-w-lg px-4"
       >
         <div className="bg-[var(--color-bg)] border border-[var(--color-border)] rounded-xl shadow-2xl overflow-hidden">
           {/* Search input */}
           <div className="flex items-center gap-3 px-4 border-b border-[var(--color-border)]">
-            <Search size={20} className="text-[var(--color-text-tertiary)]" />
+            <Search size={16} className="text-[var(--color-text-tertiary)] shrink-0" />
             <input
               ref={inputRef}
               type="text"
               value={query}
               onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={handleKeyDown}
               placeholder="Search documentation..."
-              className="flex-1 py-4 bg-transparent outline-none text-[var(--color-text)] placeholder:text-[var(--color-text-tertiary)]"
+              className="flex-1 py-3.5 bg-transparent outline-none text-[0.875rem] text-[var(--color-text)] placeholder:text-[var(--color-text-tertiary)]"
               aria-label="Search query"
             />
-            <button
-              onClick={onClose}
-              className="p-1 hover:bg-[var(--color-bg-secondary)] rounded"
-              aria-label="Close search"
-            >
-              <X size={20} className="text-[var(--color-text-tertiary)]" />
-            </button>
+            <kbd className="hidden sm:inline px-1.5 py-0.5 text-[0.625rem] font-medium text-[var(--color-text-tertiary)] bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded">
+              ESC
+            </kbd>
           </div>
 
           {/* Results */}
-          <div className="max-h-80 overflow-y-auto">
+          <div className="max-h-[60vh] overflow-y-auto">
             {results.length > 0 ? (
-              <ul className="p-2">
-                {results.map((result) => (
+              <ul className="p-1.5">
+                {results.map((result, index) => (
                   <li key={result.href}>
                     <Link
                       href={result.href}
                       onClick={onClose}
-                      className="flex items-start gap-3 px-3 py-2 rounded-lg hover:bg-[var(--color-bg-secondary)] transition-colors"
+                      className={cn(
+                        'flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors hover:no-underline group',
+                        index === selectedIndex
+                          ? 'bg-[var(--color-primary)] text-white'
+                          : 'hover:bg-[var(--color-bg-secondary)]'
+                      )}
                     >
-                      <FileText size={20} className="text-[var(--color-text-tertiary)] mt-0.5" />
-                      <div>
-                        <div className="font-medium text-[var(--color-text)]">
+                      <FileText size={16} className={cn(
+                        'shrink-0',
+                        index === selectedIndex ? 'text-white/70' : 'text-[var(--color-text-tertiary)]'
+                      )} />
+                      <div className="flex-1 min-w-0">
+                        <div className={cn(
+                          'text-[0.8125rem] font-medium truncate',
+                          index === selectedIndex ? 'text-white' : 'text-[var(--color-text)]'
+                        )}>
                           {result.title}
                         </div>
-                        {result.section && (
-                          <div className="text-xs text-[var(--color-text-tertiary)]">
-                            {result.section}
+                        {result.snippet && (
+                          <div className={cn(
+                            'text-[0.75rem] truncate mt-0.5',
+                            index === selectedIndex ? 'text-white/70' : 'text-[var(--color-text-tertiary)]'
+                          )}>
+                            {index === selectedIndex ? result.snippet : highlightTerms(result.snippet, query)}
                           </div>
                         )}
-                        <div className="text-sm text-[var(--color-text-secondary)] line-clamp-2">
-                          {highlightTerms(result.snippet, query)}
-                        </div>
                       </div>
+                      <ArrowRight size={14} className={cn(
+                        'shrink-0 opacity-0 group-hover:opacity-100 transition-opacity',
+                        index === selectedIndex ? 'text-white/70 opacity-100' : 'text-[var(--color-text-tertiary)]'
+                      )} />
                     </Link>
                   </li>
                 ))}
               </ul>
-            ) : query ? (
-              <div className="p-8 text-center text-[var(--color-text-secondary)]">
-                No results found for "{query}"
+            ) : query && !isLoading ? (
+              <div className="p-8 text-center text-[0.8125rem] text-[var(--color-text-tertiary)]">
+                No results for &ldquo;{query}&rdquo;
               </div>
-            ) : (
-              <div className="p-8 text-center text-[var(--color-text-tertiary)]">
-                Start typing to search...
+            ) : !query ? (
+              <div className="p-6 text-center text-[0.8125rem] text-[var(--color-text-tertiary)]">
+                Type to search the docs
               </div>
-            )}
+            ) : null}
           </div>
+
+          {/* Footer */}
+          {results.length > 0 && (
+            <div className="flex items-center gap-4 px-4 py-2 border-t border-[var(--color-border)] text-[0.6875rem] text-[var(--color-text-tertiary)]">
+              <span className="flex items-center gap-1">
+                <kbd className="px-1 py-0.5 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded text-[0.5625rem]">&uarr;</kbd>
+                <kbd className="px-1 py-0.5 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded text-[0.5625rem]">&darr;</kbd>
+                navigate
+              </span>
+              <span className="flex items-center gap-1">
+                <kbd className="px-1 py-0.5 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded text-[0.5625rem]">&crarr;</kbd>
+                open
+              </span>
+            </div>
+          )}
         </div>
       </div>
     </div>

package/dist/template/src/components/sidebar.tsx

@@ -51,7 +51,7 @@ export function Sidebar({ open, onClose, docsConfig }: SidebarProps) {
       {/* Mobile overlay */}
       {open && (
         <div
-          className="fixed inset-0 z-40 bg-black/50 md:hidden"
+          className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm md:hidden"
           onClick={onClose}
         />
       )}
@@ -59,12 +59,12 @@ export function Sidebar({ open, onClose, docsConfig }: SidebarProps) {
       {/* Sidebar */}
       <aside
         className={cn(
-          'fixed left-0 top-16 bottom-0 w-[var(--sidebar-width)] border-r border-[var(--color-border)] bg-[var(--color-bg)] overflow-y-auto z-50 transition-transform duration-200',
+          'fixed left-0 top-[var(--header-height)] bottom-0 w-[var(--sidebar-width)] border-r border-[var(--color-border)] bg-[var(--color-bg)] overflow-y-auto z-50 transition-transform duration-200',
           'md:translate-x-0',
           open ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
         )}
       >
-        <nav className="p-4 space-y-6">
+        <nav className="px-3 py-4 space-y-6">
           {navigation.map((section) => (
             <NavSection key={section.title} section={section} pathname={pathname} onNavigate={onClose} />
           ))}
@@ -75,6 +75,7 @@ export function Sidebar({ open, onClose, docsConfig }: SidebarProps) {
 }
 
 function NavSection({ section, pathname, onNavigate }: { section: NavItem; pathname: string; onNavigate?: () => void }) {
+  const hasActiveChild = section.items?.some((item) => pathname === item.href)
   const [expanded, setExpanded] = useState(true)
 
   if (!section.items) {
@@ -83,9 +84,9 @@ function NavSection({ section, pathname, onNavigate }: { section: NavItem; pathn
         href={section.href || '#'}
         onClick={onNavigate}
         className={cn(
-          'block px-3 py-2 text-sm rounded-md transition-colors',
+          'block px-3 py-1.5 text-sm rounded-lg transition-colors',
           pathname === section.href
-            ? 'bg-[var(--color-primary)]/10 text-[var(--color-primary)] font-medium'
+            ? 'bg-[var(--color-primary-light)] text-[var(--color-primary)] font-medium'
             : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)]'
         )}
       >
@@ -98,26 +99,26 @@ function NavSection({ section, pathname, onNavigate }: { section: NavItem; pathn
     <div>
       <button
         onClick={() => setExpanded(!expanded)}
-        className="flex items-center justify-between w-full px-3 py-2 text-sm font-medium text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] rounded-md transition-colors"
+        className="flex items-center justify-between w-full px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] transition-colors"
       >
         {section.title}
         <ChevronRight
-          size={16}
-          className={cn('transition-transform', expanded && 'rotate-90')}
+          size={14}
+          className={cn('transition-transform duration-200', expanded && 'rotate-90')}
         />
       </button>
       {expanded && (
-        <div className="mt-1 ml-3 space-y-1 border-l border-[var(--color-border)] pl-3">
+        <div className="mt-1 space-y-0.5">
           {section.items.map((item) => (
             <Link
               key={item.href}
               href={item.href || '#'}
               onClick={onNavigate}
               className={cn(
-                'block px-3 py-1.5 text-sm rounded-md transition-colors',
+                'block pl-3 ml-3 py-1.5 text-[0.8125rem] rounded-lg transition-colors border-l-2',
                 pathname === item.href
-                  ? 'bg-[var(--color-primary)]/10 text-[var(--color-primary)] font-medium'
-                  : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text)]'
+                  ? 'border-[var(--color-primary)] text-[var(--color-primary)] font-medium bg-[var(--color-primary-light)]'
+                  : 'border-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:border-[var(--color-border-strong)]'
               )}
             >
               {item.title}

package/dist/template/src/components/table-of-contents.tsx

@@ -57,21 +57,21 @@ export function TableOfContents() {
   if (headings.length === 0) return null
 
   return (
-    <nav className="hidden xl:block fixed right-8 top-24 w-[var(--toc-width)] max-h-[calc(100vh-8rem)] overflow-y-auto">
-      <p className="text-[11px] font-semibold uppercase tracking-wider text-[var(--color-text-tertiary)] mb-3">
+    <nav className="hidden xl:block fixed right-8 top-[calc(var(--header-height)+2rem)] w-[var(--toc-width)] max-h-[calc(100vh-var(--header-height)-4rem)] overflow-y-auto">
+      <p className="text-[0.6875rem] font-semibold uppercase tracking-widest text-[var(--color-text-tertiary)] mb-3">
         On this page
       </p>
-      <ul className="space-y-2 text-[13px]">
+      <ul className="space-y-0.5 border-l border-[var(--color-border)]">
         {headings.map((heading) => (
           <li key={heading.id}>
             <a
               href={`#${heading.id}`}
               className={cn(
-                'block transition-colors hover:text-[var(--color-text)]',
-                heading.level === 3 && 'pl-3',
+                'block py-1 text-[0.8125rem] leading-snug transition-colors border-l-2 -ml-px hover:text-[var(--color-text)] hover:no-underline',
+                heading.level === 2 ? 'pl-4' : 'pl-7',
                 activeId === heading.id
-                  ? 'text-[var(--color-primary)] font-medium'
-                  : 'text-[var(--color-text-tertiary)]'
+                  ? 'border-[var(--color-primary)] text-[var(--color-primary)] font-medium'
+                  : 'border-transparent text-[var(--color-text-tertiary)]'
               )}
             >
               {heading.text}