skrypt-ai 0.3.4 → 0.4.0

package/dist/template/src/components/mdx/python-playground.tsx

@@ -212,6 +212,7 @@ sys.stderr = _capture.stderr
             onClick={handleReset}
             className="p-1.5 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] rounded"
             title="Reset code"
+            aria-label="Reset code"
           >
             <RotateCcw size={14} />
           </button>
@@ -219,6 +220,7 @@ sys.stderr = _capture.stderr
             onClick={handleDownload}
             className="p-1.5 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] rounded"
             title="Download code"
+            aria-label="Download code"
           >
             <Download size={14} />
           </button>

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 gap-0.5 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,11 +84,30 @@ 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-3 py-2 text-[0.8125rem] font-medium transition-colors border-b-2 -mb-px',
@@ -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,11 +1,61 @@
 'use client'
 
-import React, { useEffect, useState, useCallback, useRef } from 'react'
-import { Search, FileText, ArrowRight } 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
@@ -30,13 +80,39 @@ 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])
 
   useEffect(() => {
     if (open) {
@@ -45,6 +121,7 @@ export function SearchDialog({ open, onClose }: SearchDialogProps) {
       setQuery('')
       setResults([])
       setSelectedIndex(0)
+      setRecentSearches(getRecentSearches())
 
       return () => {
         previouslyFocused?.focus()
@@ -78,19 +155,35 @@ export function SearchDialog({ open, onClose }: SearchDialogProps) {
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault()
-        if (open) onClose()
-      }
       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()
@@ -99,18 +192,31 @@ export function SearchDialog({ open, onClose }: SearchDialogProps) {
       e.preventDefault()
       setSelectedIndex((prev) => Math.max(prev - 1, 0))
     } else if (e.key === 'Enter' && results[selectedIndex]) {
+      saveRecentSearch(query)
       onClose()
-      window.location.href = results[selectedIndex].href
+      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/60 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-150"
         onClick={onClose}
         aria-hidden="true"
       />
@@ -121,7 +227,7 @@ export function SearchDialog({ open, onClose }: SearchDialogProps) {
         role="dialog"
         aria-modal="true"
         aria-label="Search documentation"
-        className="absolute top-[15%] left-1/2 -translate-x-1/2 w-full max-w-lg px-4"
+        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 */}
@@ -145,55 +251,103 @@ export function SearchDialog({ open, onClose }: SearchDialogProps) {
           {/* Results */}
           <div className="max-h-[60vh] overflow-y-auto">
             {results.length > 0 ? (
-              <ul className="p-1.5">
-                {results.map((result, index) => (
-                  <li key={result.href}>
-                    <Link
-                      href={result.href}
-                      onClick={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-white'
-                          : '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>
+              <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>
+              </div>
             ) : 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 ? (
-              <div className="p-6 text-center text-[0.8125rem] text-[var(--color-text-tertiary)]">
-                Type to search the docs
-              </div>
+              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>