skrypt-ai 0.3.4 → 0.4.0

package/dist/template/src/app/page.tsx

@@ -13,8 +13,16 @@ export default function Home() {
   const docsConfig = getDocsConfig()
   const firstPage = docsConfig.navigation?.[0]?.pages?.[0]?.path || '/docs'
 
+  // Collect first 6 pages for quick links
+  const allPages: Array<{ title: string; path: string }> = []
+  for (const group of docsConfig.navigation || []) {
+    for (const page of group.pages || []) {
+      if (allPages.length < 6) allPages.push(page)
+    }
+  }
+
   return (
-    <main className="min-h-screen flex flex-col">
+    <main id="main-content" className="min-h-screen flex flex-col">
       {/* Header */}
       <header className="h-[var(--header-height)] border-b border-[var(--color-border)] flex items-center px-6">
         <Link href="/" className="font-semibold text-[0.9375rem] tracking-tight text-[var(--color-text)] hover:no-underline">
@@ -24,17 +32,23 @@ export default function Home() {
 
       {/* Hero */}
       <div className="flex-1 flex flex-col items-center justify-center px-6 py-20">
-        <div className="max-w-2xl mx-auto text-center">
-          <h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-[var(--color-text)] mb-4">
+        <div className="max-w-2xl mx-auto text-center relative">
+          {/* Gradient glow behind title */}
+          <div
+            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[200px] rounded-full blur-[100px] opacity-20 pointer-events-none"
+            style={{ background: `radial-gradient(ellipse, var(--color-primary), transparent 70%)` }}
+          />
+
+          <h1 className="relative text-4xl sm:text-5xl font-bold tracking-tight text-[var(--color-text)] mb-4">
             {docsConfig.name}
           </h1>
-          <p className="text-lg text-[var(--color-text-secondary)] mb-8 max-w-lg mx-auto leading-relaxed">
+          <p className="relative text-lg text-[var(--color-text-secondary)] mb-8 max-w-lg mx-auto leading-relaxed">
             {docsConfig.description}
           </p>
-          <div className="flex items-center justify-center gap-3">
+          <div className="relative flex items-center justify-center gap-3">
             <Link
               href={firstPage}
-              className="inline-flex items-center gap-2 px-5 py-2.5 bg-[var(--color-text)] text-[var(--color-bg)] rounded-lg font-medium text-[0.875rem] hover:opacity-90 hover:no-underline transition-opacity"
+              className="inline-flex items-center gap-2 px-5 py-2.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-lg font-medium text-[0.875rem] hover:opacity-90 hover:no-underline transition-opacity"
             >
               Get Started
               <ArrowRight size={16} />
@@ -48,30 +62,50 @@ export default function Home() {
           </div>
         </div>
 
-        {/* Feature cards */}
-        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-2xl mx-auto mt-16 w-full">
-          <div className="p-5 rounded-xl border border-[var(--color-border)] hover:border-[var(--color-border-strong)] transition-colors">
-            <BookOpen size={18} className="text-[var(--color-text-tertiary)] mb-3" />
-            <h3 className="text-[0.875rem] font-semibold text-[var(--color-text)] mb-1">Guides</h3>
-            <p className="text-[0.8125rem] text-[var(--color-text-tertiary)] leading-relaxed">
-              Step-by-step tutorials and explanations.
-            </p>
-          </div>
-          <div className="p-5 rounded-xl border border-[var(--color-border)] hover:border-[var(--color-border-strong)] transition-colors">
-            <Code size={18} className="text-[var(--color-text-tertiary)] mb-3" />
-            <h3 className="text-[0.875rem] font-semibold text-[var(--color-text)] mb-1">API Reference</h3>
-            <p className="text-[0.8125rem] text-[var(--color-text-tertiary)] leading-relaxed">
-              Complete API documentation with examples.
-            </p>
-          </div>
-          <div className="p-5 rounded-xl border border-[var(--color-border)] hover:border-[var(--color-border-strong)] transition-colors">
-            <Zap size={18} className="text-[var(--color-text-tertiary)] mb-3" />
-            <h3 className="text-[0.875rem] font-semibold text-[var(--color-text)] mb-1">Quick Start</h3>
-            <p className="text-[0.8125rem] text-[var(--color-text-tertiary)] leading-relaxed">
-              Get up and running in minutes.
+        {/* Feature cards — show first page title + description from each group */}
+        <div className="flex flex-wrap justify-center gap-4 max-w-2xl mx-auto mt-16 w-full">
+          {(docsConfig.navigation || []).slice(0, 3).map((group: { group: string; pages: Array<{ title: string; path: string }> }, i: number) => {
+            const icons = [BookOpen, Code, Zap]
+            const Icon = icons[i % icons.length]
+            const firstGroupPage = group.pages?.[0]
+            return (
+              <Link
+                key={group.group}
+                href={firstGroupPage?.path || '/docs'}
+                className="block p-5 rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] hover:border-[var(--color-primary)] transition-colors hover:no-underline w-full sm:w-[calc(50%-0.5rem)] min-w-[200px]"
+              >
+                <Icon size={18} className="text-[var(--color-primary)] mb-3" />
+                <h3 className="text-[0.875rem] font-semibold text-[var(--color-text)] mb-1">{group.group}</h3>
+                <p className="text-[0.8125rem] text-[var(--color-text-tertiary)] leading-relaxed">
+                  {firstGroupPage ? `Start with ${firstGroupPage.title}` : `${group.pages.length} pages`}
+                </p>
+                <p className="text-[0.75rem] text-[var(--color-text-tertiary)] mt-1">
+                  {group.pages.length} {group.pages.length === 1 ? 'page' : 'pages'}
+                </p>
+              </Link>
+            )
+          })}
+        </div>
+
+        {/* Quick Links */}
+        {allPages.length > 0 && (
+          <div className="max-w-2xl mx-auto mt-10 w-full">
+            <p className="text-[0.6875rem] font-semibold uppercase tracking-widest text-[var(--color-text-tertiary)] mb-3 text-center">
+              Quick Links
             </p>
+            <div className="flex flex-wrap justify-center gap-x-6 gap-y-2">
+              {allPages.map((page) => (
+                <Link
+                  key={page.path}
+                  href={page.path}
+                  className="text-[0.8125rem] text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] hover:no-underline transition-colors"
+                >
+                  {page.title}
+                </Link>
+              ))}
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </main>
   )

package/dist/template/src/components/ai-chat.tsx

@@ -4,6 +4,7 @@ import { useState, useRef, useEffect } from 'react'
 import { MessageSquare, X, Send, Loader2, ExternalLink } from 'lucide-react'
 
 interface Message {
+  id: string
   role: 'user' | 'assistant'
   content: string
   citations?: Array<{ title: string; path: string; snippet: string }>
@@ -36,7 +37,7 @@ export function AIChat({
 
     const userMessage = input.trim()
     setInput('')
-    setMessages(prev => [...prev, { role: 'user', content: userMessage }])
+    setMessages(prev => [...prev, { id: Date.now().toString(), role: 'user', content: userMessage }])
     setIsLoading(true)
 
     try {
@@ -56,6 +57,7 @@ export function AIChat({
       setMessages(prev => [
         ...prev,
         {
+          id: Date.now().toString(),
           role: 'assistant',
           content: data.content,
           citations: data.citations,
@@ -65,6 +67,7 @@ export function AIChat({
       setMessages(prev => [
         ...prev,
         {
+          id: Date.now().toString(),
           role: 'assistant',
           content: 'Sorry, I encountered an error. Please try again.',
         },
@@ -78,7 +81,7 @@ export function AIChat({
     return (
       <button
         onClick={() => setIsOpen(true)}
-        className="fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-zinc-900 text-white shadow-lg transition-transform hover:scale-105 dark:bg-white dark:text-zinc-900"
+        className="fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-[var(--color-text)] text-[var(--color-bg)] shadow-lg transition-transform hover:scale-105"
         aria-label="Open AI chat"
       >
         <MessageSquare className="h-6 w-6" />
@@ -87,21 +90,22 @@ export function AIChat({
   }
 
   return (
-    <div className="fixed bottom-6 right-6 z-50 flex h-[500px] w-[380px] flex-col overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-2xl dark:border-zinc-800 dark:bg-zinc-900">
+    <div className="fixed bottom-6 right-6 z-50 flex h-[500px] w-[380px] flex-col overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg)] shadow-2xl">
       {/* Header */}
-      <div className="flex items-center justify-between border-b border-zinc-200 px-4 py-3 dark:border-zinc-800">
+      <div className="flex items-center justify-between border-b border-[var(--color-border)] px-4 py-3">
         <div className="flex items-center gap-2">
-          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-900 dark:bg-white">
-            <MessageSquare className="h-4 w-4 text-white dark:text-zinc-900" />
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--color-text)]">
+            <MessageSquare className="h-4 w-4 text-[var(--color-bg)]" />
           </div>
           <div>
-            <p className="text-sm font-medium text-zinc-900 dark:text-white">Ask AI</p>
-            <p className="text-xs text-zinc-500">About {projectName}</p>
+            <p className="text-sm font-medium text-[var(--color-text)]">Ask AI</p>
+            <p className="text-xs text-[var(--color-text-tertiary)]">About {projectName}</p>
           </div>
         </div>
         <button
           onClick={() => setIsOpen(false)}
-          className="rounded-lg p-1 text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800"
+          className="rounded-lg p-1 text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-bg-secondary)] hover:text-[var(--color-text-secondary)]"
+          aria-label="Close chat"
         >
           <X className="h-5 w-5" />
         </button>
@@ -110,36 +114,36 @@ export function AIChat({
       {/* Messages */}
       <div className="flex-1 overflow-y-auto p-4 space-y-4">
         {messages.length === 0 && (
-          <div className="text-center text-sm text-zinc-500 py-8">
+          <div className="text-center text-sm text-[var(--color-text-tertiary)] py-8">
             <p>Ask me anything about {projectName}.</p>
             <p className="mt-2 text-xs">I'll search the docs and give you an answer with sources.</p>
           </div>
         )}
 
-        {messages.map((message, i) => (
+        {messages.map((message) => (
           <div
-            key={i}
+            key={message.id}
             className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
           >
             <div
               className={`max-w-[85%] rounded-2xl px-4 py-2 text-sm ${
                 message.role === 'user'
-                  ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900'
-                  : 'bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-white'
+                  ? 'bg-[var(--color-text)] text-[var(--color-bg)]'
+                  : 'bg-[var(--color-bg-tertiary)] text-[var(--color-text)]'
               }`}
             >
               <p className="whitespace-pre-wrap">{message.content}</p>
 
               {/* Citations */}
               {message.citations && message.citations.length > 0 && (
-                <div className="mt-3 border-t border-zinc-200 pt-2 dark:border-zinc-700">
-                  <p className="text-xs font-medium text-zinc-500 mb-1">Sources:</p>
+                <div className="mt-3 border-t border-[var(--color-border)] pt-2">
+                  <p className="text-xs font-medium text-[var(--color-text-tertiary)] mb-1">Sources:</p>
                   <div className="space-y-1">
                     {message.citations.map((citation, j) => (
                       <a
                         key={j}
                         href={citation.path}
-                        className="flex items-center gap-1 text-xs text-blue-600 hover:underline dark:text-blue-400"
+                        className="flex items-center gap-1 text-xs text-[var(--color-primary)] hover:underline"
                       >
                         <ExternalLink className="h-3 w-3" />
                         {citation.title}
@@ -154,7 +158,7 @@ export function AIChat({
 
         {isLoading && (
           <div className="flex justify-start">
-            <div className="flex items-center gap-2 rounded-2xl bg-zinc-100 px-4 py-2 text-sm text-zinc-500 dark:bg-zinc-800">
+            <div className="flex items-center gap-2 rounded-2xl bg-[var(--color-bg-tertiary)] px-4 py-2 text-sm text-[var(--color-text-tertiary)]">
               <Loader2 className="h-4 w-4 animate-spin" />
               Searching docs...
             </div>
@@ -167,7 +171,7 @@ export function AIChat({
       {/* Input */}
       <form
         onSubmit={handleSubmit}
-        className="border-t border-zinc-200 p-3 dark:border-zinc-800"
+        className="border-t border-[var(--color-border)] p-3"
       >
         <div className="flex items-center gap-2">
           <input
@@ -176,12 +180,13 @@ export function AIChat({
             onChange={e => setInput(e.target.value)}
             placeholder={placeholder}
             disabled={isLoading}
-            className="flex-1 rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-2 text-sm outline-none transition-colors placeholder:text-zinc-400 focus:border-zinc-400 dark:border-zinc-700 dark:bg-zinc-800 dark:focus:border-zinc-600"
+            className="flex-1 rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-secondary)] px-4 py-2 text-sm text-[var(--color-text)] outline-none transition-colors placeholder:text-[var(--color-text-tertiary)] focus:border-[var(--color-border-strong)]"
           />
           <button
             type="submit"
             disabled={!input.trim() || isLoading}
-            className="flex h-10 w-10 items-center justify-center rounded-xl bg-zinc-900 text-white transition-colors hover:bg-zinc-800 disabled:opacity-50 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100"
+            className="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--color-text)] text-[var(--color-bg)] transition-colors hover:opacity-90 disabled:opacity-50"
+            aria-label="Send message"
           >
             <Send className="h-4 w-4" />
           </button>

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

@@ -4,15 +4,59 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { ChevronRight } from 'lucide-react'
 
-export function Breadcrumbs() {
+interface NavPage { title: string; path: string; pages?: NavPage[] }
+interface NavGroup { group: string; pages: (NavPage | NavGroup)[] }
+interface DocsConfig { navigation: NavGroup[] }
+
+function isNavGroup(item: NavPage | NavGroup): item is NavGroup {
+  return 'group' in item && !('path' in item)
+}
+
+function buildTitleMap(docsConfig?: DocsConfig): Map<string, string> {
+  const map = new Map<string, string>()
+  if (!docsConfig) return map
+
+  for (const group of docsConfig.navigation) {
+    for (const item of group.pages) {
+      if (isNavGroup(item)) {
+        fillTitleMap(item.pages, map)
+      } else {
+        map.set(item.path, item.title)
+        if (item.pages) fillTitleMap(item.pages, map)
+      }
+    }
+  }
+  return map
+}
+
+function fillTitleMap(pages: (NavPage | NavGroup)[], map: Map<string, string>) {
+  for (const item of pages) {
+    if (isNavGroup(item)) {
+      fillTitleMap(item.pages, map)
+    } else {
+      map.set(item.path, item.title)
+      if (item.pages) fillTitleMap(item.pages, map)
+    }
+  }
+}
+
+interface BreadcrumbsProps {
+  docsConfig?: DocsConfig
+}
+
+export function Breadcrumbs({ docsConfig }: BreadcrumbsProps) {
   const pathname = usePathname()
   const segments = pathname.split('/').filter(Boolean)
 
   if (segments.length <= 1) return null
 
+  const titleMap = buildTitleMap(docsConfig)
+
   const crumbs = segments.map((segment, index) => {
     const href = '/' + segments.slice(0, index + 1).join('/')
-    const label = segment
+    // Look up the actual page title from navigation config
+    const configTitle = titleMap.get(href)
+    const label = configTitle || segment
       .replace(/-/g, ' ')
       .replace(/\b\w/g, (c) => c.toUpperCase())
 

package/dist/template/src/components/copy-button.tsx

@@ -12,9 +12,23 @@ export function CopyButton({ text, className = '' }: CopyButtonProps) {
   const [copied, setCopied] = useState(false)
 
   async function handleCopy() {
-    await navigator.clipboard.writeText(text)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // Fallback for insecure contexts
+      const textarea = document.createElement('textarea')
+      textarea.value = text
+      textarea.style.position = 'fixed'
+      textarea.style.opacity = '0'
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }
   }
 
   return (

package/dist/template/src/components/docs-layout.tsx

@@ -1,21 +1,36 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { usePathname } from 'next/navigation'
 import Link from 'next/link'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { ChevronLeft, ChevronRight, ChevronDown } from 'lucide-react'
 import { Sidebar } from './sidebar'
 import { Header } from './header'
 import { TableOfContents } from './table-of-contents'
 import { Breadcrumbs } from './breadcrumbs'
+import { PageHeader } from './page-header'
+import { Feedback } from './feedback'
+import { EditLink } from './edit-link'
+import { Footer } from './footer'
+import { ScrollToTop } from './scroll-to-top'
 
 interface DocsConfig {
   name?: string
   headerLinks?: Array<{ title: string; path: string }>
+  logo?: string
   navigation: Array<{
     group: string
-    pages: Array<{ title: string; path: string }>
+    icon?: string
+    pages: Array<{ title: string; path: string; description?: string }>
   }>
+  footer?: {
+    links?: Array<{ title: string; url: string }>
+  }
+  editLink?: {
+    repoUrl?: string
+    branch?: string
+    docsPath?: string
+  }
 }
 
 function getAllPages(config: DocsConfig): Array<{ title: string; path: string }> {
@@ -70,34 +85,153 @@ function PrevNextNav({ docsConfig }: { docsConfig: DocsConfig }) {
   )
 }
 
-export function DocsLayout({ children, docsConfig }: { children: React.ReactNode; docsConfig: DocsConfig }) {
+/** Mobile TOC — collapsible "On this page" for screens < xl */
+function MobileTOC() {
+  const [headings, setHeadings] = useState<Array<{ id: string; text: string; level: number }>>([])
+  const [open, setOpen] = useState(false)
+  const pathname = usePathname()
+
+  useEffect(() => {
+    const article = document.querySelector('article')
+    if (!article) return
+
+    const elements = article.querySelectorAll('h2, h3')
+    const items: Array<{ id: string; text: string; level: number }> = []
+
+    const genericHeadings = new Set([
+      'parameters', 'returns', 'return value', 'return type',
+      'returned validator function', 'requirements',
+      'when results are returned', 'when each value is returned',
+      'validationresult shape',
+    ])
+
+    elements.forEach((el) => {
+      const text = el.textContent || ''
+      const normalized = text.toLowerCase().trim()
+      if (genericHeadings.has(normalized)) return
+
+      const id = el.id || normalized.replace(/\s+/g, '-')
+      if (!el.id) el.id = id
+      items.push({ id, text, level: parseInt(el.tagName[1]) })
+    })
+
+    setHeadings(items)
+    setOpen(false)
+  }, [pathname])
+
+  if (headings.length === 0) return null
+
+  return (
+    <div className="lg:hidden mb-6 border border-[var(--color-border)] rounded-lg">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center justify-between w-full px-4 py-3 text-[0.8125rem] font-medium text-[var(--color-text)]"
+        aria-expanded={open}
+      >
+        On this page
+        <ChevronDown size={14} className={`text-[var(--color-text-tertiary)] transition-transform duration-150 ${open ? 'rotate-180' : ''}`} />
+      </button>
+      {open && (
+        <div className="px-4 pb-3 border-t border-[var(--color-border)]">
+          <ul className="space-y-1 mt-2">
+            {headings.map((heading, i) => (
+              <li key={`${heading.id}-${i}`}>
+                <a
+                  href={`#${heading.id}`}
+                  onClick={() => setOpen(false)}
+                  className={`block py-1 text-[0.8125rem] text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] hover:no-underline ${
+                    heading.level === 3 ? 'pl-4' : ''
+                  }`}
+                >
+                  {heading.text}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function getPageInfo(docsConfig: DocsConfig, pathname: string): { title?: string; description?: string } {
+  for (const group of docsConfig.navigation) {
+    for (const page of group.pages) {
+      if (page.path === pathname) {
+        return { title: page.title, description: page.description }
+      }
+    }
+  }
+  return {}
+}
+
+export function DocsLayout({
+  children,
+  docsConfig,
+  pageTitle,
+  pageDescription,
+}: {
+  children: React.ReactNode
+  docsConfig: DocsConfig
+  pageTitle?: string
+  pageDescription?: string
+}) {
   const [menuOpen, setMenuOpen] = useState(false)
+  const [frontmatterDescription, setFrontmatterDescription] = useState<string | undefined>()
+  const pathname = usePathname()
+
+  // Read frontmatter description passed from the server component via data attribute
+  useEffect(() => {
+    const el = document.querySelector('[data-page-description]')
+    setFrontmatterDescription(el?.getAttribute('data-page-description') ?? undefined)
+  }, [pathname])
+
+  // Resolve title from props, falling back to docs.json navigation lookup
+  const pageInfo = getPageInfo(docsConfig, pathname)
+  const resolvedTitle = pageTitle ?? pageInfo.title
+  const resolvedDescription = pageDescription ?? frontmatterDescription ?? pageInfo.description
 
   return (
-    <div className="min-h-screen">
+    <div className="min-h-screen flex flex-col">
       <Header
         onMenuToggle={() => setMenuOpen(!menuOpen)}
         menuOpen={menuOpen}
         siteName={docsConfig.name}
         navLinks={docsConfig.headerLinks}
+        logo={docsConfig.logo}
       />
-      <div className="flex">
+      <div className="flex flex-1">
         <Sidebar
           open={menuOpen}
           onClose={() => setMenuOpen(false)}
           docsConfig={docsConfig}
         />
-        <main className="flex-1 min-w-0 px-6 md:px-10 py-8 md:ml-[var(--sidebar-width)] xl:mr-[var(--toc-width)]">
+        <main id="main-content" className="flex-1 min-w-0 px-6 md:px-10 py-8 lg:ml-[var(--sidebar-width)] lg:mr-[var(--toc-width)]">
           <div className="max-w-[var(--content-max-width)] mx-auto">
-            <Breadcrumbs />
+            <Breadcrumbs docsConfig={docsConfig} />
+            {resolvedTitle && (
+              <PageHeader title={resolvedTitle} description={resolvedDescription} />
+            )}
+            <MobileTOC />
             <article className="prose">
               {children}
             </article>
+            {/* Feedback and Edit Link */}
+            <div className="mt-10 pt-6 border-t border-[var(--color-border)] flex items-center justify-between flex-wrap gap-4">
+              <Feedback />
+              <EditLink
+                repoUrl={docsConfig.editLink?.repoUrl}
+                branch={docsConfig.editLink?.branch}
+                docsPath={docsConfig.editLink?.docsPath}
+              />
+            </div>
             <PrevNextNav docsConfig={docsConfig} />
           </div>
         </main>
         <TableOfContents />
       </div>
+      <Footer docsConfig={docsConfig} />
+      <ScrollToTop />
     </div>
   )
 }

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

@@ -28,9 +28,10 @@ export function Feedback() {
       <div className="flex items-center gap-1">
         <button
           onClick={() => handleFeedback(true)}
+          aria-label="Helpful"
           className={`p-1.5 rounded-md transition-colors ${
             selection === 'yes'
-              ? 'bg-emerald-100 text-emerald-600'
+              ? 'bg-emerald-100 text-emerald-600 feedback-positive'
               : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)]'
           }`}
         >
@@ -38,9 +39,10 @@ export function Feedback() {
         </button>
         <button
           onClick={() => handleFeedback(false)}
+          aria-label="Not helpful"
           className={`p-1.5 rounded-md transition-colors ${
             selection === 'no'
-              ? 'bg-red-100 text-red-600'
+              ? 'bg-red-100 text-red-600 feedback-negative'
               : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)]'
           }`}
         >

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

@@ -0,0 +1,42 @@
+interface FooterProps {
+  docsConfig: {
+    footer?: {
+      links?: Array<{ title: string; url: string }>
+    }
+  }
+}
+
+export function Footer({ docsConfig }: FooterProps) {
+  const links = docsConfig.footer?.links || []
+
+  return (
+    <footer className="border-t border-[var(--color-border)] lg:ml-[var(--sidebar-width)]">
+      <div className="max-w-[var(--content-max-width)] mx-auto px-6 md:px-10 py-6 flex items-center justify-between flex-wrap gap-4">
+        <div className="flex items-center gap-6">
+          {links.map((link) => (
+            <a
+              key={link.url}
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-[0.8125rem] text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] transition-colors"
+            >
+              {link.title}
+            </a>
+          ))}
+        </div>
+        <span className="text-[0.75rem] text-[var(--color-text-tertiary)]">
+          Built with{' '}
+          <a
+            href="https://skrypt.sh"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition-colors"
+          >
+            Skrypt
+          </a>
+        </span>
+      </div>
+    </footer>
+  )
+}