skrypt-ai 0.3.3 → 0.4.0

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

@@ -1,43 +1,237 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+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
+  }
 }
 
-export function DocsLayout({ children, docsConfig }: { children: React.ReactNode; docsConfig: DocsConfig }) {
+function getAllPages(config: DocsConfig): Array<{ title: string; path: string }> {
+  return config.navigation.flatMap((group) => group.pages)
+}
+
+function PrevNextNav({ docsConfig }: { docsConfig: DocsConfig }) {
+  const pathname = usePathname()
+  const allPages = getAllPages(docsConfig)
+  const currentIndex = allPages.findIndex((p) => p.path === pathname)
+
+  if (currentIndex === -1) return null
+
+  const prev = currentIndex > 0 ? allPages[currentIndex - 1] : null
+  const next = currentIndex < allPages.length - 1 ? allPages[currentIndex + 1] : null
+
+  if (!prev && !next) return null
+
+  return (
+    <div className="mt-12 pt-6 border-t border-[var(--color-border)] grid grid-cols-2 gap-4">
+      {prev ? (
+        <Link
+          href={prev.path}
+          className="group flex flex-col gap-1 p-4 rounded-xl border border-[var(--color-border)] hover:border-[var(--color-border-strong)] hover:bg-[var(--color-bg-secondary)] hover:no-underline transition-all"
+        >
+          <span className="flex items-center gap-1 text-xs text-[var(--color-text-tertiary)]">
+            <ChevronLeft size={12} />
+            Previous
+          </span>
+          <span className="text-sm font-medium text-[var(--color-text)] group-hover:text-[var(--color-primary)]">
+            {prev.title}
+          </span>
+        </Link>
+      ) : (
+        <div />
+      )}
+      {next && (
+        <Link
+          href={next.path}
+          className="group flex flex-col items-end gap-1 p-4 rounded-xl border border-[var(--color-border)] hover:border-[var(--color-border-strong)] hover:bg-[var(--color-bg-secondary)] hover:no-underline transition-all"
+        >
+          <span className="flex items-center gap-1 text-xs text-[var(--color-text-tertiary)]">
+            Next
+            <ChevronRight size={12} />
+          </span>
+          <span className="text-sm font-medium text-[var(--color-text)] group-hover:text-[var(--color-primary)]">
+            {next.title}
+          </span>
+        </Link>
+      )}
+    </div>
+  )
+}
+
+/** 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-4 md:px-8 py-6 md:ml-[var(--sidebar-width)] xl:mr-[var(--toc-width)]">
-          <div className="max-w-3xl mx-auto">
-            <Breadcrumbs />
+        <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 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>
+  )
+}

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

@@ -2,7 +2,7 @@
 
 import Link from 'next/link'
 import { Search, Menu, X } from 'lucide-react'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { SearchDialog } from './search-dialog'
 import { ThemeToggle } from './theme-toggle'
 import { SyntaxThemeSelector } from './syntax-theme-selector'
@@ -10,48 +10,84 @@ import { SyntaxThemeSelector } from './syntax-theme-selector'
 interface HeaderProps {
   onMenuToggle?: () => void
   menuOpen?: boolean
+  siteName?: string
+  navLinks?: Array<{ title: string; path: string }>
+  logo?: string
 }
 
-export function Header({ onMenuToggle, menuOpen }: HeaderProps) {
+export function Header({ onMenuToggle, menuOpen, siteName = 'Docs', navLinks, logo }: HeaderProps) {
   const [searchOpen, setSearchOpen] = useState(false)
+  const [isMac, setIsMac] = useState(true)
+
+  useEffect(() => {
+    setIsMac(
+      navigator.platform?.toLowerCase().includes('mac') ||
+      navigator.userAgent?.toLowerCase().includes('mac')
+    )
+  }, [])
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        setSearchOpen(prev => !prev)
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [])
 
   return (
     <>
-      <header className="sticky top-0 z-50 border-b border-[var(--color-border)] bg-[var(--color-bg)]/95 backdrop-blur">
-        <div className="flex items-center justify-between h-16 px-4 md:px-6">
-          <div className="flex items-center gap-4">
+      <header className="sticky top-0 z-50 h-[var(--header-height)] border-b border-[var(--color-border)] bg-[var(--color-bg)]/80 backdrop-blur-xl">
+        <div className="flex items-center justify-between h-full px-4 md:px-6">
+          <div className="flex items-center gap-6">
             {/* Mobile menu button */}
             <button
               onClick={onMenuToggle}
-              className="md:hidden p-2 -ml-2 text-[var(--color-text-secondary)] hover:text-[var(--color-text)]"
+              className="md:hidden p-1.5 -ml-1.5 rounded-lg text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)]"
               aria-label={menuOpen ? 'Close menu' : 'Open menu'}
               aria-expanded={menuOpen}
             >
-              {menuOpen ? <X size={20} /> : <Menu size={20} />}
+              {menuOpen ? <X size={18} /> : <Menu size={18} />}
             </button>
 
-            <Link href="/" className="font-semibold text-lg">
-              Docs
+            <Link href="/" className="flex items-center gap-2 font-semibold text-[0.9375rem] tracking-tight text-[var(--color-text)] hover:no-underline">
+              {logo ? (
+                <img src={logo} alt={siteName} className="h-6 w-auto" />
+              ) : (
+                siteName
+              )}
             </Link>
-            <nav className="hidden md:flex items-center gap-4">
-              <Link href="/docs" className="text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)]">
+
+            <nav className="hidden md:flex items-center gap-1">
+              <Link
+                href="/docs"
+                className="px-3 py-1.5 text-[0.8125rem] text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] rounded-lg hover:no-underline"
+              >
                 Documentation
               </Link>
-              <Link href="/docs/api" className="text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)]">
-                API Reference
-              </Link>
+              {navLinks?.map((link) => (
+                <Link
+                  key={link.path}
+                  href={link.path}
+                  className="px-3 py-1.5 text-[0.8125rem] text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] rounded-lg hover:no-underline"
+                >
+                  {link.title}
+                </Link>
+              ))}
             </nav>
           </div>
 
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1.5">
             <button
               onClick={() => setSearchOpen(true)}
-              className="flex items-center gap-2 px-3 py-1.5 text-sm text-[var(--color-text-tertiary)] bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg hover:border-[var(--color-border-strong)] transition-colors"
+              className="flex items-center gap-2 px-3 py-1.5 text-[0.8125rem] text-[var(--color-text-tertiary)] bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg hover:border-[var(--color-border-strong)] hover:text-[var(--color-text-secondary)]"
             >
-              <Search size={16} />
-              <span className="hidden sm:inline">Search docs...</span>
-              <kbd className="hidden sm:inline px-1.5 py-0.5 text-xs bg-[var(--color-bg-tertiary)] rounded">
-                ⌘K
+              <Search size={14} />
+              <span className="hidden sm:inline">Search...</span>
+              <kbd className="hidden sm:inline ml-2 px-1.5 py-0.5 text-[0.6875rem] font-medium bg-[var(--color-bg)] border border-[var(--color-border)] rounded">
+                {isMac ? '⌘K' : 'Ctrl+K'}
               </kbd>
             </button>
             <SyntaxThemeSelector />

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState, ReactNode } from 'react'
-import { ChevronDown } from 'lucide-react'
+import { ChevronRight } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
 interface AccordionProps {
@@ -14,27 +14,31 @@ export function Accordion({ title, defaultOpen = false, children }: AccordionPro
   const [open, setOpen] = useState(defaultOpen)
 
   return (
-    <div className="border border-[var(--color-border)] rounded-lg my-4">
+    <div className="border-b border-[var(--color-border)] last:border-b-0">
       <button
         onClick={() => setOpen(!open)}
-        className="flex items-center justify-between w-full px-4 py-3 text-left font-medium hover:bg-[var(--color-bg-secondary)] transition-colors"
+        aria-expanded={open}
+        className="flex items-center gap-2 w-full py-3.5 text-left text-[0.875rem] font-medium text-[var(--color-text)] hover:text-[var(--color-primary)] transition-colors"
       >
-        {title}
-        <ChevronDown
-          size={20}
+        <ChevronRight
+          size={14}
           className={cn(
-            'text-[var(--color-text-tertiary)] transition-transform',
-            open && 'rotate-180'
+            'text-[var(--color-text-tertiary)] transition-transform duration-200 shrink-0',
+            open && 'rotate-90'
           )}
         />
+        {title}
       </button>
-      {open && (
-        <div className="px-4 pb-4 pt-0 border-t border-[var(--color-border)]">
-          <div className="pt-3 text-[var(--color-text-secondary)]">
+      <div
+        className="grid transition-all duration-200"
+        style={{ gridTemplateRows: open ? '1fr' : '0fr' }}
+      >
+        <div className="overflow-hidden">
+          <div className="pl-5 pb-4 text-[0.8125rem] text-[var(--color-text-secondary)] leading-relaxed">
             {children}
           </div>
         </div>
-      )}
+      </div>
     </div>
   )
 }
@@ -44,5 +48,5 @@ interface AccordionGroupProps {
 }
 
 export function AccordionGroup({ children }: AccordionGroupProps) {
-  return <div className="my-6 space-y-2">{children}</div>
+  return <div className="my-6 border-t border-[var(--color-border)]">{children}</div>
 }

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

@@ -18,74 +18,87 @@ interface CalloutProps {
 
 const config: Record<CalloutType, {
   icon: typeof InfoIcon
-  bg: string
-  border: string
-  title: string
-  text: string
+  borderColor: string
+  iconColor: string
+  bgColor: string
+  titleColor: string
+  textColor: string
+  defaultTitle: string
 }> = {
   info: {
     icon: InfoIcon,
-    bg: 'bg-blue-50 dark:bg-blue-950/30',
-    border: 'border-blue-200 dark:border-blue-800',
-    title: 'text-blue-800 dark:text-blue-300',
-    text: 'text-blue-700 dark:text-blue-400',
+    borderColor: 'border-l-blue-500',
+    iconColor: 'text-blue-500',
+    bgColor: 'bg-blue-500/5',
+    titleColor: 'text-blue-600 dark:text-blue-400',
+    textColor: 'text-[var(--color-text-secondary)]',
+    defaultTitle: 'Info',
   },
   warning: {
     icon: AlertTriangle,
-    bg: 'bg-amber-50 dark:bg-amber-950/30',
-    border: 'border-amber-200 dark:border-amber-800',
-    title: 'text-amber-800 dark:text-amber-300',
-    text: 'text-amber-700 dark:text-amber-400',
+    borderColor: 'border-l-amber-500',
+    iconColor: 'text-amber-500',
+    bgColor: 'bg-amber-500/5',
+    titleColor: 'text-amber-600 dark:text-amber-400',
+    textColor: 'text-[var(--color-text-secondary)]',
+    defaultTitle: 'Warning',
   },
   success: {
     icon: CheckCircle,
-    bg: 'bg-green-50 dark:bg-green-950/30',
-    border: 'border-green-200 dark:border-green-800',
-    title: 'text-green-800 dark:text-green-300',
-    text: 'text-green-700 dark:text-green-400',
+    borderColor: 'border-l-emerald-500',
+    iconColor: 'text-emerald-500',
+    bgColor: 'bg-emerald-500/5',
+    titleColor: 'text-emerald-600 dark:text-emerald-400',
+    textColor: 'text-[var(--color-text-secondary)]',
+    defaultTitle: 'Success',
   },
   error: {
     icon: XCircle,
-    bg: 'bg-red-50 dark:bg-red-950/30',
-    border: 'border-red-200 dark:border-red-800',
-    title: 'text-red-800 dark:text-red-300',
-    text: 'text-red-700 dark:text-red-400',
+    borderColor: 'border-l-red-500',
+    iconColor: 'text-red-500',
+    bgColor: 'bg-red-500/5',
+    titleColor: 'text-red-600 dark:text-red-400',
+    textColor: 'text-[var(--color-text-secondary)]',
+    defaultTitle: 'Error',
   },
   tip: {
     icon: Lightbulb,
-    bg: 'bg-purple-50 dark:bg-purple-950/30',
-    border: 'border-purple-200 dark:border-purple-800',
-    title: 'text-purple-800 dark:text-purple-300',
-    text: 'text-purple-700 dark:text-purple-400',
+    borderColor: 'border-l-violet-500',
+    iconColor: 'text-violet-500',
+    bgColor: 'bg-violet-500/5',
+    titleColor: 'text-violet-600 dark:text-violet-400',
+    textColor: 'text-[var(--color-text-secondary)]',
+    defaultTitle: 'Tip',
   },
   note: {
     icon: InfoIcon,
-    bg: 'bg-gray-50 dark:bg-gray-900/50',
-    border: 'border-gray-200 dark:border-gray-700',
-    title: 'text-gray-800 dark:text-gray-200',
-    text: 'text-gray-700 dark:text-gray-300',
+    borderColor: 'border-l-[var(--color-border-strong)]',
+    iconColor: 'text-[var(--color-text-tertiary)]',
+    bgColor: 'bg-[var(--color-bg-secondary)]',
+    titleColor: 'text-[var(--color-text)]',
+    textColor: 'text-[var(--color-text-secondary)]',
+    defaultTitle: 'Note',
   },
 }
 
 export function Callout({ type = 'info', title, children }: CalloutProps) {
-  const { icon: Icon, bg, border, title: titleColor, text } = config[type]
+  const { icon: Icon, borderColor, iconColor, bgColor, titleColor, textColor, defaultTitle } = config[type]
 
   return (
-    <div className={cn('my-6 p-4 border rounded-lg', bg, border)}>
+    <div className={cn('my-6 rounded-lg border-l-4 py-3 px-4', borderColor, bgColor)}>
       <div className="flex gap-3">
-        <Icon className={cn('w-5 h-5 mt-0.5 flex-shrink-0', titleColor)} />
-        <div>
-          {title && (
-            <div className={cn('font-medium mb-1', titleColor)}>{title}</div>
-          )}
-          <div className={cn('text-sm', text)}>{children}</div>
+        <Icon className={cn('w-[18px] h-[18px] mt-0.5 flex-shrink-0', iconColor)} />
+        <div className="min-w-0">
+          <div className={cn('text-[0.8125rem] font-semibold mb-0.5', titleColor)}>
+            {title || defaultTitle}
+          </div>
+          <div className={cn('text-[0.8125rem] leading-relaxed [&>p]:my-1', textColor)}>{children}</div>
         </div>
       </div>
     </div>
   )
 }
 
-// Convenience components
 export function Info(props: Omit<CalloutProps, 'type'>) {
   return <Callout type="info" {...props} />
 }