skrypt-ai 0.3.3 → 0.4.0

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

@@ -1,11 +1,14 @@
 'use client'
 
-import { createContext, useContext, useState, ReactNode } from 'react'
+import { createContext, useContext, useState, useRef, useCallback, useId, ReactNode } from 'react'
 import { cn } from '@/lib/utils'
 
 interface TabsContextValue {
   activeTab: string
   setActiveTab: (tab: string) => void
+  instanceId: string
+  tabRefs: React.MutableRefObject<Map<string, HTMLButtonElement>>
+  tabValues: string[]
 }
 
 const TabsContext = createContext<TabsContextValue | null>(null)
@@ -17,9 +20,13 @@ interface TabsProps {
 
 export function Tabs({ defaultValue, children }: TabsProps) {
   const [activeTab, setActiveTab] = useState(defaultValue)
+  const instanceId = useId()
+  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())
+  // Collect tab values from children to enable arrow key navigation
+  const tabValues = useRef<string[]>([])
 
   return (
-    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
+    <TabsContext.Provider value={{ activeTab, setActiveTab, instanceId, tabRefs, tabValues: tabValues.current }}>
       <div className="my-6">{children}</div>
     </TabsContext.Provider>
   )
@@ -30,8 +37,39 @@ interface TabListProps {
 }
 
 export function TabList({ children }: TabListProps) {
+  const context = useContext(TabsContext)
+  if (!context) throw new Error('TabList must be used within Tabs')
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    const { tabValues, tabRefs, activeTab, setActiveTab } = context
+    if (!tabValues.length) return
+
+    const currentIndex = tabValues.indexOf(activeTab)
+    let nextIndex = -1
+
+    if (e.key === 'ArrowRight') {
+      e.preventDefault()
+      nextIndex = (currentIndex + 1) % tabValues.length
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault()
+      nextIndex = (currentIndex - 1 + tabValues.length) % tabValues.length
+    } else if (e.key === 'Home') {
+      e.preventDefault()
+      nextIndex = 0
+    } else if (e.key === 'End') {
+      e.preventDefault()
+      nextIndex = tabValues.length - 1
+    }
+
+    if (nextIndex >= 0) {
+      const nextValue = tabValues[nextIndex]
+      setActiveTab(nextValue)
+      tabRefs.current.get(nextValue)?.focus()
+    }
+  }, [context])
+
   return (
-    <div className="flex border-b border-[var(--color-border)]">
+    <div role="tablist" className="flex gap-0.5 border-b border-[var(--color-border)]" onKeyDown={handleKeyDown}>
       {children}
     </div>
   )
@@ -46,17 +84,36 @@ export function Tab({ value, children }: TabProps) {
   const context = useContext(TabsContext)
   if (!context) throw new Error('Tab must be used within Tabs')
 
-  const { activeTab, setActiveTab } = context
+  const { activeTab, setActiveTab, instanceId, tabRefs, tabValues } = context
   const isActive = activeTab === value
 
+  // Register this tab value for arrow key navigation
+  const refCallback = useCallback((el: HTMLButtonElement | null) => {
+    if (el) {
+      tabRefs.current.set(value, el)
+      if (!tabValues.includes(value)) {
+        tabValues.push(value)
+      }
+    }
+  }, [value, tabRefs, tabValues])
+
+  const tabId = `tab-${instanceId}-${value}`
+  const panelId = `panel-${instanceId}-${value}`
+
   return (
     <button
+      ref={refCallback}
+      id={tabId}
+      role="tab"
+      aria-selected={isActive}
+      aria-controls={panelId}
+      tabIndex={isActive ? 0 : -1}
       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}
@@ -73,9 +130,20 @@ export function TabPanel({ value, children }: TabPanelProps) {
   const context = useContext(TabsContext)
   if (!context) throw new Error('TabPanel must be used within Tabs')
 
-  const { activeTab } = context
+  const { activeTab, instanceId } = context
+  const tabId = `tab-${instanceId}-${value}`
+  const panelId = `panel-${instanceId}-${value}`
 
   if (activeTab !== value) return null
 
-  return <div className="pt-4">{children}</div>
+  return (
+    <div
+      id={panelId}
+      role="tabpanel"
+      aria-labelledby={tabId}
+      className="pt-4"
+    >
+      {children}
+    </div>
+  )
 }

package/dist/template/src/components/page-header.tsx

@@ -0,0 +1,19 @@
+interface PageHeaderProps {
+  title: string
+  description?: string
+}
+
+export function PageHeader({ title, description }: PageHeaderProps) {
+  return (
+    <div className="mb-8 pb-6 border-b border-[var(--color-border)]">
+      <h1 className="text-3xl sm:text-4xl font-bold tracking-tight text-[var(--color-text)]">
+        {title}
+      </h1>
+      {description && (
+        <p className="text-lg text-[var(--color-text-secondary)] mt-3 leading-relaxed max-w-2xl">
+          {description}
+        </p>
+      )}
+    </div>
+  )
+}

package/dist/template/src/components/scroll-to-top.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { ChevronUp } from 'lucide-react'
+
+export function ScrollToTop() {
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    function handleScroll() {
+      setVisible(window.scrollY > 300)
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  function scrollToTop() {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  if (!visible) return null
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className="fixed bottom-6 right-24 z-40 flex h-10 w-10 items-center justify-center rounded-full bg-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-lg transition-all hover:bg-[var(--color-primary-dark)] hover:scale-105"
+      aria-label="Scroll to top"
+    >
+      <ChevronUp size={20} />
+    </button>
+  )
+}

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

@@ -1,19 +1,66 @@
 'use client'
 
-import React, { useEffect, useState, useCallback, useRef } from 'react'
-import { Search, X, FileText } from 'lucide-react'
+import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react'
+import { Search, FileText, ArrowRight, Clock, X } from 'lucide-react'
 import Link from 'next/link'
+import { useRouter } from 'next/navigation'
 import { cn } from '@/lib/utils'
 import { search as performSearch, SearchResultWithHighlight } from '@/lib/search'
 
+const RECENT_SEARCHES_KEY = 'recent-searches'
+const MAX_RECENT_SEARCHES = 5
+
+function getRecentSearches(): string[] {
+  try {
+    const stored = localStorage.getItem(RECENT_SEARCHES_KEY)
+    return stored ? JSON.parse(stored) : []
+  } catch {
+    return []
+  }
+}
+
+function saveRecentSearch(query: string) {
+  try {
+    const trimmed = query.trim()
+    if (!trimmed) return
+    const existing = getRecentSearches()
+    const filtered = existing.filter((s) => s !== trimmed)
+    const updated = [trimmed, ...filtered].slice(0, MAX_RECENT_SEARCHES)
+    localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(updated))
+  } catch {
+    // localStorage unavailable
+  }
+}
+
+function clearRecentSearches() {
+  try {
+    localStorage.removeItem(RECENT_SEARCHES_KEY)
+  } catch {
+    // localStorage unavailable
+  }
+}
+
+function SearchSkeletons() {
+  return (
+    <div className="p-4 space-y-4">
+      {[0, 1, 2, 3].map((i) => (
+        <div key={i} className="flex items-center gap-3">
+          <div className="skeleton w-8 h-8 rounded-full shrink-0" />
+          <div className="flex-1 space-y-2">
+            <div className="skeleton h-3.5 w-3/4" />
+            <div className="skeleton h-3 w-1/2" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
 interface SearchDialogProps {
   open: boolean
   onClose: () => void
 }
 
-/**
- * Highlight search terms in text
- */
 function highlightTerms(text: string, query: string): React.ReactNode {
   if (!query.trim()) return text
 
@@ -24,7 +71,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>
     ) : (
@@ -33,18 +80,48 @@ function highlightTerms(text: string, query: string): React.ReactNode {
   )
 }
 
+interface GroupedResults {
+  section: string
+  results: SearchResultWithHighlight[]
+}
+
+function groupResultsBySection(results: SearchResultWithHighlight[]): GroupedResults[] {
+  const map = new Map<string, SearchResultWithHighlight[]>()
+  const order: string[] = []
+
+  for (const result of results) {
+    const section = result.section || 'Results'
+    if (!map.has(section)) {
+      map.set(section, [])
+      order.push(section)
+    }
+    map.get(section)!.push(result)
+  }
+
+  return order.map(section => ({ section, results: map.get(section)! }))
+}
+
 export function SearchDialog({ open, onClose }: SearchDialogProps) {
+  const router = useRouter()
   const [query, setQuery] = useState('')
   const [results, setResults] = useState<SearchResultWithHighlight[]>([])
   const [isLoading, setIsLoading] = useState(false)
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [recentSearches, setRecentSearches] = useState<string[]>([])
   const dialogRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
+  const selectedRef = useRef<HTMLLIElement>(null)
+
+  const grouped = useMemo(() => groupResultsBySection(results), [results])
 
-  // Focus trap and restore focus on close
   useEffect(() => {
     if (open) {
       const previouslyFocused = document.activeElement as HTMLElement
       inputRef.current?.focus()
+      setQuery('')
+      setResults([])
+      setSelectedIndex(0)
+      setRecentSearches(getRecentSearches())
 
       return () => {
         previouslyFocused?.focus()
@@ -62,6 +139,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,33 +149,74 @@ export function SearchDialog({ open, onClose }: SearchDialogProps) {
   }, [])
 
   useEffect(() => {
-    const debounce = setTimeout(() => search(query), 200)
+    const debounce = setTimeout(() => search(query), 150)
     return () => clearTimeout(debounce)
   }, [query, search])
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      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()
       }
+      // Focus trapping within the dialog
+      if (e.key === 'Tab' && open && dialogRef.current) {
+        const focusable = dialogRef.current.querySelectorAll<HTMLElement>(
+          'input, button, a[href], [tabindex]:not([tabindex="-1"])'
+        )
+        if (focusable.length === 0) return
+        const first = focusable[0]
+        const last = focusable[focusable.length - 1]
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault()
+          last.focus()
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault()
+          first.focus()
+        }
+      }
     }
 
     document.addEventListener('keydown', handleKeyDown)
     return () => document.removeEventListener('keydown', handleKeyDown)
   }, [open, onClose])
 
+  useEffect(() => {
+    selectedRef.current?.scrollIntoView({ block: 'nearest' })
+  }, [selectedIndex])
+
+  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]) {
+      saveRecentSearch(query)
+      onClose()
+      router.push(results[selectedIndex].href)
+    }
+  }
+
+  // Build a flat index map for grouped results
+  const flatIndexMap = useMemo(() => {
+    const map = new Map<string, number>()
+    let idx = 0
+    for (const group of grouped) {
+      for (const result of group.results) {
+        map.set(result.href, idx++)
+      }
+    }
+    return map
+  }, [grouped])
+
   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 transition-opacity duration-150"
         onClick={onClose}
         aria-hidden="true"
       />
@@ -108,69 +227,144 @@ 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 dialog-animate-in"
       >
         <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) => (
-                  <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"
-                    >
-                      <FileText size={20} className="text-[var(--color-text-tertiary)] mt-0.5" />
-                      <div>
-                        <div className="font-medium text-[var(--color-text)]">
-                          {result.title}
-                        </div>
-                        {result.section && (
-                          <div className="text-xs text-[var(--color-text-tertiary)]">
-                            {result.section}
-                          </div>
-                        )}
-                        <div className="text-sm text-[var(--color-text-secondary)] line-clamp-2">
-                          {highlightTerms(result.snippet, query)}
-                        </div>
-                      </div>
-                    </Link>
-                  </li>
+              <div className="p-1.5">
+                {grouped.map((group) => (
+                  <div key={group.section}>
+                    {/* Section header */}
+                    <div className="px-3 pt-3 pb-1.5">
+                      <span className="text-[0.6875rem] font-bold uppercase tracking-wider text-[var(--color-text-tertiary)]">
+                        {group.section}
+                      </span>
+                    </div>
+                    <ul>
+                      {group.results.map((result) => {
+                        const index = flatIndexMap.get(result.href) ?? 0
+                        return (
+                          <li key={result.href} ref={index === selectedIndex ? selectedRef : undefined}>
+                            <Link
+                              href={result.href}
+                              onClick={() => { saveRecentSearch(query); onClose() }}
+                              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-[var(--color-primary-foreground)]'
+                                  : 'hover:bg-[var(--color-bg-secondary)]'
+                              )}
+                            >
+                              <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.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>
+                              <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>
+                  </div>
                 ))}
-              </ul>
-            ) : query ? (
-              <div className="p-8 text-center text-[var(--color-text-secondary)]">
-                No results found for "{query}"
               </div>
-            ) : (
-              <div className="p-8 text-center text-[var(--color-text-tertiary)]">
-                Start typing to search...
+            ) : query && !isLoading ? (
+              <div className="p-8 text-center text-[0.8125rem] text-[var(--color-text-tertiary)]">
+                No results for &ldquo;{query}&rdquo;
               </div>
-            )}
+            ) : isLoading ? (
+              <SearchSkeletons />
+            ) : !query ? (
+              recentSearches.length > 0 ? (
+                <div className="p-1.5">
+                  <div className="px-3 pt-3 pb-1.5 flex items-center justify-between">
+                    <span className="text-[0.6875rem] font-bold uppercase tracking-wider text-[var(--color-text-tertiary)]">
+                      Recent
+                    </span>
+                    <button
+                      onClick={() => { clearRecentSearches(); setRecentSearches([]) }}
+                      className="text-[0.6875rem] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] transition-colors"
+                    >
+                      Clear
+                    </button>
+                  </div>
+                  <ul>
+                    {recentSearches.map((recentQuery) => (
+                      <li key={recentQuery}>
+                        <button
+                          onClick={() => setQuery(recentQuery)}
+                          className="flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors hover:bg-[var(--color-bg-secondary)] w-full text-left"
+                        >
+                          <Clock size={14} className="text-[var(--color-text-tertiary)] shrink-0" />
+                          <span className="text-[0.8125rem] text-[var(--color-text-secondary)] truncate">
+                            {recentQuery}
+                          </span>
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ) : (
+                <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>