skrypt-ai 0.1.0

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

@@ -0,0 +1,52 @@
+'use client'
+
+import { useState } from 'react'
+import { ThumbsUp, ThumbsDown, Check } from 'lucide-react'
+
+export function Feedback() {
+  const [submitted, setSubmitted] = useState(false)
+  const [selection, setSelection] = useState<'yes' | 'no' | null>(null)
+
+  async function handleFeedback(helpful: boolean) {
+    setSelection(helpful ? 'yes' : 'no')
+    // TODO: Send to analytics
+    setTimeout(() => setSubmitted(true), 500)
+  }
+
+  if (submitted) {
+    return (
+      <div className="flex items-center gap-2 text-[13px] text-[var(--color-text-tertiary)]">
+        <Check size={16} className="text-emerald-500" />
+        Thanks for your feedback!
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center gap-3">
+      <span className="text-[13px] text-[var(--color-text-tertiary)]">Was this helpful?</span>
+      <div className="flex items-center gap-1">
+        <button
+          onClick={() => handleFeedback(true)}
+          className={`p-1.5 rounded-md transition-colors ${
+            selection === 'yes'
+              ? 'bg-emerald-100 text-emerald-600'
+              : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)]'
+          }`}
+        >
+          <ThumbsUp size={16} />
+        </button>
+        <button
+          onClick={() => handleFeedback(false)}
+          className={`p-1.5 rounded-md transition-colors ${
+            selection === 'no'
+              ? 'bg-red-100 text-red-600'
+              : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)]'
+          }`}
+        >
+          <ThumbsDown size={16} />
+        </button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,66 @@
+'use client'
+
+import Link from 'next/link'
+import { Search, Menu, X } from 'lucide-react'
+import { useState } from 'react'
+import { SearchDialog } from './search-dialog'
+import { ThemeToggle } from './theme-toggle'
+import { SyntaxThemeSelector } from './syntax-theme-selector'
+
+interface HeaderProps {
+  onMenuToggle?: () => void
+  menuOpen?: boolean
+}
+
+export function Header({ onMenuToggle, menuOpen }: HeaderProps) {
+  const [searchOpen, setSearchOpen] = useState(false)
+
+  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">
+            {/* Mobile menu button */}
+            <button
+              onClick={onMenuToggle}
+              className="md:hidden p-2 -ml-2 text-[var(--color-text-secondary)] hover:text-[var(--color-text)]"
+              aria-label={menuOpen ? 'Close menu' : 'Open menu'}
+              aria-expanded={menuOpen}
+            >
+              {menuOpen ? <X size={20} /> : <Menu size={20} />}
+            </button>
+
+            <Link href="/" className="font-semibold text-lg">
+              Docs
+            </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)]">
+                Documentation
+              </Link>
+              <Link href="/docs/api" className="text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)]">
+                API Reference
+              </Link>
+            </nav>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <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"
+            >
+              <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
+              </kbd>
+            </button>
+            <SyntaxThemeSelector />
+            <ThemeToggle />
+          </div>
+        </div>
+      </header>
+
+      <SearchDialog open={searchOpen} onClose={() => setSearchOpen(false)} />
+    </>
+  )
+}

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

@@ -0,0 +1,48 @@
+'use client'
+
+import { useState, ReactNode } from 'react'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface AccordionProps {
+  title: string
+  defaultOpen?: boolean
+  children: ReactNode
+}
+
+export function Accordion({ title, defaultOpen = false, children }: AccordionProps) {
+  const [open, setOpen] = useState(defaultOpen)
+
+  return (
+    <div className="border border-[var(--color-border)] rounded-lg my-4">
+      <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"
+      >
+        {title}
+        <ChevronDown
+          size={20}
+          className={cn(
+            'text-[var(--color-text-tertiary)] transition-transform',
+            open && 'rotate-180'
+          )}
+        />
+      </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)]">
+            {children}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface AccordionGroupProps {
+  children: ReactNode
+}
+
+export function AccordionGroup({ children }: AccordionGroupProps) {
+  return <div className="my-6 space-y-2">{children}</div>
+}

package/dist/template/src/components/mdx/api-badge.tsx

@@ -0,0 +1,57 @@
+type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'
+type Status = 'stable' | 'beta' | 'deprecated' | 'experimental'
+
+const methodColors: Record<Method, string> = {
+  GET: 'bg-emerald-100 text-emerald-700 border-emerald-200',
+  POST: 'bg-blue-100 text-blue-700 border-blue-200',
+  PUT: 'bg-amber-100 text-amber-700 border-amber-200',
+  PATCH: 'bg-purple-100 text-purple-700 border-purple-200',
+  DELETE: 'bg-red-100 text-red-700 border-red-200',
+}
+
+const statusColors: Record<Status, string> = {
+  stable: 'bg-emerald-100 text-emerald-700',
+  beta: 'bg-blue-100 text-blue-700',
+  deprecated: 'bg-red-100 text-red-700',
+  experimental: 'bg-purple-100 text-purple-700',
+}
+
+interface MethodBadgeProps {
+  method: Method
+}
+
+export function MethodBadge({ method }: MethodBadgeProps) {
+  return (
+    <span className={`inline-block px-2 py-0.5 text-[11px] font-bold uppercase rounded border ${methodColors[method]}`}>
+      {method}
+    </span>
+  )
+}
+
+interface StatusBadgeProps {
+  status: Status
+}
+
+export function StatusBadge({ status }: StatusBadgeProps) {
+  return (
+    <span className={`inline-block px-2 py-0.5 text-[11px] font-medium uppercase rounded ${statusColors[status]}`}>
+      {status}
+    </span>
+  )
+}
+
+interface EndpointProps {
+  method: Method
+  path: string
+  status?: Status
+}
+
+export function Endpoint({ method, path, status }: EndpointProps) {
+  return (
+    <div className="flex items-center gap-3 my-4 p-3 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg">
+      <MethodBadge method={method} />
+      <code className="text-[14px] font-semibold">{path}</code>
+      {status && <StatusBadge status={status} />}
+    </div>
+  )
+}

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

@@ -0,0 +1,111 @@
+import { cn } from '@/lib/utils'
+import {
+  Info as InfoIcon,
+  AlertTriangle,
+  CheckCircle,
+  XCircle,
+  Lightbulb
+} from 'lucide-react'
+import { ReactNode } from 'react'
+
+type CalloutType = 'info' | 'warning' | 'success' | 'error' | 'tip' | 'note'
+
+interface CalloutProps {
+  type?: CalloutType
+  title?: string
+  children: ReactNode
+}
+
+const config: Record<CalloutType, {
+  icon: typeof InfoIcon
+  bg: string
+  border: string
+  title: string
+  text: 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',
+  },
+  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',
+  },
+  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',
+  },
+  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',
+  },
+  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',
+  },
+  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',
+  },
+}
+
+export function Callout({ type = 'info', title, children }: CalloutProps) {
+  const { icon: Icon, bg, border, title: titleColor, text } = config[type]
+
+  return (
+    <div className={cn('my-6 p-4 border rounded-lg', bg, border)}>
+      <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>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Convenience components
+export function Info(props: Omit<CalloutProps, 'type'>) {
+  return <Callout type="info" {...props} />
+}
+
+export function Warning(props: Omit<CalloutProps, 'type'>) {
+  return <Callout type="warning" {...props} />
+}
+
+export function Success(props: Omit<CalloutProps, 'type'>) {
+  return <Callout type="success" {...props} />
+}
+
+export function Error(props: Omit<CalloutProps, 'type'>) {
+  return <Callout type="error" {...props} />
+}
+
+export function Tip(props: Omit<CalloutProps, 'type'>) {
+  return <Callout type="tip" {...props} />
+}
+
+export function Note(props: Omit<CalloutProps, 'type'>) {
+  return <Callout type="note" {...props} />
+}

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

@@ -0,0 +1,62 @@
+import Link from 'next/link'
+import { cn } from '@/lib/utils'
+import * as Icons from 'lucide-react'
+
+interface CardProps {
+  title: string
+  icon?: keyof typeof Icons
+  href?: string
+  children?: React.ReactNode
+}
+
+export function Card({ title, icon, href, children }: CardProps) {
+  const Icon = icon ? Icons[icon] as React.ComponentType<{ size?: number; className?: string }> : null
+
+  const content = (
+    <div className={cn(
+      'p-4 border border-[var(--color-border)] rounded-lg transition-colors',
+      href && 'hover:border-[var(--color-primary)] hover:bg-[var(--color-bg-secondary)] cursor-pointer'
+    )}>
+      <div className="flex items-start gap-3">
+        {Icon && (
+          <div className="p-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] rounded-lg">
+            <Icon size={20} />
+          </div>
+        )}
+        <div>
+          <h3 className="font-medium text-[var(--color-text)]">{title}</h3>
+          {children && (
+            <p className="mt-1 text-sm text-[var(--color-text-secondary)]">
+              {children}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+
+  if (href) {
+    return <Link href={href}>{content}</Link>
+  }
+
+  return content
+}
+
+interface CardGroupProps {
+  cols?: 1 | 2 | 3
+  children: React.ReactNode
+}
+
+export function CardGroup({ cols = 2, children }: CardGroupProps) {
+  const gridCols = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 md:grid-cols-2',
+    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+  }
+
+  return (
+    <div className={cn('grid gap-4 my-6', gridCols[cols])}>
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,57 @@
+import { ReactNode } from 'react'
+
+interface ChangelogEntryProps {
+  version: string
+  date: string
+  children: ReactNode
+}
+
+export function ChangelogEntry({ version, date, children }: ChangelogEntryProps) {
+  return (
+    <div className="relative pl-6 pb-8 border-l-2 border-[var(--color-border)] last:pb-0">
+      <div className="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-[var(--color-primary)] border-2 border-[var(--color-bg)]" />
+      <div className="flex items-center gap-3 mb-2">
+        <span className="font-semibold text-[15px]">v{version}</span>
+        <span className="text-[13px] text-[var(--color-text-tertiary)]">{date}</span>
+      </div>
+      <div className="text-[14px] text-[var(--color-text-secondary)]">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+interface ChangelogProps {
+  children: ReactNode
+}
+
+export function Changelog({ children }: ChangelogProps) {
+  return (
+    <div className="my-8">
+      {children}
+    </div>
+  )
+}
+
+// Change type badges
+type ChangeType = 'added' | 'changed' | 'deprecated' | 'removed' | 'fixed' | 'security'
+
+const typeColors: Record<ChangeType, string> = {
+  added: 'bg-emerald-100 text-emerald-700',
+  changed: 'bg-blue-100 text-blue-700',
+  deprecated: 'bg-yellow-100 text-yellow-700',
+  removed: 'bg-red-100 text-red-700',
+  fixed: 'bg-purple-100 text-purple-700',
+  security: 'bg-orange-100 text-orange-700',
+}
+
+export function Change({ type, children }: { type: ChangeType; children: ReactNode }) {
+  return (
+    <div className="flex items-start gap-2 my-1">
+      <span className={`px-1.5 py-0.5 text-[11px] font-medium uppercase rounded ${typeColors[type]}`}>
+        {type}
+      </span>
+      <span>{children}</span>
+    </div>
+  )
+}

package/dist/template/src/components/mdx/code-block.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useState, ReactNode, isValidElement, Children } from 'react'
+import { Copy, Check } from 'lucide-react'
+
+interface CodeBlockProps {
+  children: ReactNode
+  className?: string
+}
+
+export function CodeBlock({ children, className }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false)
+
+  // Extract code text from children
+  let codeText = ''
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.type === 'code') {
+      codeText = (child.props as { children?: string }).children || ''
+    }
+  })
+
+  async function handleCopy() {
+    await navigator.clipboard.writeText(codeText)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="relative group my-4">
+      <pre className={className}>
+        {children}
+      </pre>
+      <button
+        onClick={handleCopy}
+        className="absolute top-2 right-2 p-1.5 rounded bg-[var(--color-bg-tertiary)]/80 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] opacity-0 group-hover:opacity-100 transition-opacity"
+        title={copied ? 'Copied!' : 'Copy code'}
+      >
+        {copied ? <Check size={14} /> : <Copy size={14} />}
+      </button>
+    </div>
+  )
+}

package/dist/template/src/components/mdx/code-group.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import { useState, Children, isValidElement, ReactNode, ReactElement } from 'react'
+import { cn } from '@/lib/utils'
+import { Copy, Check } from 'lucide-react'
+
+interface CodeGroupProps {
+  children: ReactNode
+}
+
+interface CodeBlockInfo {
+  language: string
+  filename?: string
+  code: string
+}
+
+interface PreProps {
+  children?: ReactElement<CodeProps>
+}
+
+interface CodeProps {
+  className?: string
+  children?: string
+  'data-filename'?: string
+}
+
+function extractCodeBlocks(children: ReactNode): CodeBlockInfo[] {
+  const blocks: CodeBlockInfo[] = []
+
+  Children.forEach(children, (child) => {
+    if (isValidElement<PreProps>(child) && child.type === 'pre') {
+      const codeElement = child.props.children
+      if (isValidElement<CodeProps>(codeElement) && codeElement.type === 'code') {
+        const className = codeElement.props.className || ''
+        const match = className.match(/language-(\w+)/)
+        const language = match ? match[1] : 'text'
+
+        const filename = codeElement.props['data-filename'] ||
+          codeElement.props.children?.toString().match(/^\/\/ (.+)\n/)?.[1]
+
+        blocks.push({
+          language,
+          filename,
+          code: codeElement.props.children?.toString() || '',
+        })
+      }
+    }
+  })
+
+  return blocks
+}
+
+export function CodeGroup({ children }: CodeGroupProps) {
+  const blocks = extractCodeBlocks(children)
+  const [activeIndex, setActiveIndex] = useState(0)
+  const [copied, setCopied] = useState(false)
+
+  if (blocks.length === 0) {
+    return <div>{children}</div>
+  }
+
+  const activeBlock = blocks[activeIndex]
+
+  const copyToClipboard = async () => {
+    await navigator.clipboard.writeText(activeBlock.code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const getLanguageLabel = (lang: string, filename?: string) => {
+    if (filename) return filename
+    const labels: Record<string, string> = {
+      typescript: 'TypeScript',
+      javascript: 'JavaScript',
+      python: 'Python',
+      bash: 'Bash',
+      shell: 'Shell',
+      json: 'JSON',
+      yaml: 'YAML',
+      go: 'Go',
+      rust: 'Rust',
+    }
+    return labels[lang] || lang
+  }
+
+  return (
+    <div className="my-6 border border-[var(--color-border)] rounded-lg overflow-hidden">
+      {/* Tab bar */}
+      <div className="flex items-center justify-between bg-[var(--color-bg-secondary)] border-b border-[var(--color-border)]">
+        <div className="flex">
+          {blocks.map((block, index) => (
+            <button
+              key={`${block.language}-${block.filename || index}`}
+              onClick={() => setActiveIndex(index)}
+              className={cn(
+                'px-4 py-2 text-sm font-medium transition-colors',
+                index === activeIndex
+                  ? 'bg-[var(--color-code-bg)] text-[var(--color-code-text)]'
+                  : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text)]'
+              )}
+            >
+              {getLanguageLabel(block.language, block.filename)}
+            </button>
+          ))}
+        </div>
+        <button
+          onClick={copyToClipboard}
+          className="p-2 mr-2 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] transition-colors"
+          title="Copy code"
+        >
+          {copied ? <Check size={16} /> : <Copy size={16} />}
+        </button>
+      </div>
+
+      {/* Code content */}
+      <div className="bg-[var(--color-code-bg)]">
+        <pre className="!m-0 !rounded-none">
+          <code className={`language-${activeBlock.language}`}>
+            {activeBlock.code}
+          </code>
+        </pre>
+      </div>
+    </div>
+  )
+}