skrypt-ai 0.3.3 → 0.4.0

package/dist/template/src/app/not-found.tsx

@@ -0,0 +1,35 @@
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <main className="min-h-screen flex flex-col items-center justify-center px-6">
+      <div className="text-center max-w-md">
+        <p className="text-[5rem] font-bold text-[var(--color-primary)] leading-none mb-4">404</p>
+        <h1 className="text-2xl font-bold text-[var(--color-text)] mb-3">
+          Page not found
+        </h1>
+        <p className="text-[var(--color-text-secondary)] mb-8 leading-relaxed">
+          The page you are looking for does not exist or may have been moved.
+          Try searching the documentation or return to the homepage.
+        </p>
+        <div className="flex items-center justify-center gap-3">
+          <Link
+            href="/docs"
+            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"
+          >
+            Go to Docs
+          </Link>
+          <Link
+            href="/"
+            className="inline-flex items-center gap-2 px-5 py-2.5 border border-[var(--color-border)] text-[var(--color-text)] rounded-lg font-medium text-[0.875rem] hover:bg-[var(--color-bg-secondary)] hover:no-underline transition-colors"
+          >
+            Homepage
+          </Link>
+        </div>
+        <p className="mt-8 text-[0.8125rem] text-[var(--color-text-tertiary)]">
+          Tip: Use <kbd className="px-1.5 py-0.5 text-[0.75rem] bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded">Ctrl+K</kbd> to search the documentation.
+        </p>
+      </div>
+    </main>
+  )
+}

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

@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import { readFileSync } from 'fs'
 import { join } from 'path'
+import { ArrowRight, BookOpen, Zap, Code } from 'lucide-react'
 
 function getDocsConfig() {
   const configPath = join(process.cwd(), 'docs.json')
@@ -10,19 +11,102 @@ function getDocsConfig() {
 
 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 items-center justify-center p-8">
-      <h1 className="text-4xl font-bold mb-4">{docsConfig.name} Documentation</h1>
-      <p className="text-[var(--color-text-secondary)] mb-8 text-center max-w-xl">
-        {docsConfig.description}
-      </p>
-      <Link
-        href="/docs"
-        className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg font-medium hover:bg-[var(--color-primary-dark)] transition-colors"
-      >
-        Get Started
-      </Link>
+    <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">
+          {docsConfig.name}
+        </Link>
+      </header>
+
+      {/* 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 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="relative text-lg text-[var(--color-text-secondary)] mb-8 max-w-lg mx-auto leading-relaxed">
+            {docsConfig.description}
+          </p>
+          <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-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} />
+            </Link>
+            <Link
+              href="/docs"
+              className="inline-flex items-center gap-2 px-5 py-2.5 border border-[var(--color-border)] text-[var(--color-text)] rounded-lg font-medium text-[0.875rem] hover:bg-[var(--color-bg-secondary)] hover:no-underline transition-colors"
+            >
+              Documentation
+            </Link>
+          </div>
+        </div>
+
+        {/* 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>
     </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

@@ -2,17 +2,61 @@
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { ChevronRight, Home } from 'lucide-react'
+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())
 
@@ -20,17 +64,17 @@ export function Breadcrumbs() {
   })
 
   return (
-    <nav className="flex items-center gap-1.5 text-[13px] text-[var(--color-text-tertiary)] mb-4">
-      <Link href="/" className="hover:text-[var(--color-text)]">
-        <Home size={14} />
+    <nav className="flex items-center gap-1 text-[0.8125rem] text-[var(--color-text-tertiary)] mb-6">
+      <Link href="/" className="hover:text-[var(--color-text)] hover:no-underline">
+        Docs
       </Link>
-      {crumbs.map((crumb, i) => (
-        <span key={crumb.href} className="flex items-center gap-1.5">
-          <ChevronRight size={14} />
-          {i === crumbs.length - 1 ? (
-            <span className="text-[var(--color-text)]">{crumb.label}</span>
+      {crumbs.slice(1).map((crumb, i) => (
+        <span key={crumb.href} className="flex items-center gap-1">
+          <ChevronRight size={12} className="text-[var(--color-text-tertiary)]" />
+          {i === crumbs.length - 2 ? (
+            <span className="text-[var(--color-text-secondary)]">{crumb.label}</span>
           ) : (
-            <Link href={crumb.href} className="hover:text-[var(--color-text)]">
+            <Link href={crumb.href} className="hover:text-[var(--color-text)] hover:no-underline">
               {crumb.label}
             </Link>
           )}

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 (