skrypt-ai 0.1.0

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

@@ -0,0 +1,322 @@
+'use client'
+
+import {
+  SandpackProvider,
+  SandpackLayout,
+  SandpackCodeEditor,
+  SandpackPreview,
+  SandpackConsole,
+  useSandpack,
+  type SandpackTheme,
+} from '@codesandbox/sandpack-react'
+import { useState, useEffect } from 'react'
+import { RotateCcw, Download, Play, Pause } from 'lucide-react'
+
+// Custom themes that match our CSS variables
+const lightTheme: SandpackTheme = {
+  colors: {
+    surface1: '#f8fafc',
+    surface2: '#f1f5f9',
+    surface3: '#e2e8f0',
+    clickable: '#64748b',
+    base: '#0f172a',
+    disabled: '#94a3b8',
+    hover: '#475569',
+    accent: '#3b82f6',
+    error: '#ef4444',
+    errorSurface: '#fef2f2',
+  },
+  syntax: {
+    plain: '#0f172a',
+    comment: { color: '#94a3b8', fontStyle: 'italic' },
+    keyword: '#8b5cf6',
+    tag: '#3b82f6',
+    punctuation: '#64748b',
+    definition: '#0f172a',
+    property: '#0891b2',
+    static: '#059669',
+    string: '#16a34a',
+  },
+  font: {
+    body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+    size: '14px',
+    lineHeight: '1.6',
+  },
+}
+
+const darkTheme: SandpackTheme = {
+  colors: {
+    surface1: '#1e293b',
+    surface2: '#334155',
+    surface3: '#475569',
+    clickable: '#94a3b8',
+    base: '#f8fafc',
+    disabled: '#64748b',
+    hover: '#cbd5e1',
+    accent: '#60a5fa',
+    error: '#f87171',
+    errorSurface: '#450a0a',
+  },
+  syntax: {
+    plain: '#e2e8f0',
+    comment: { color: '#64748b', fontStyle: 'italic' },
+    keyword: '#c4b5fd',
+    tag: '#93c5fd',
+    punctuation: '#94a3b8',
+    definition: '#f8fafc',
+    property: '#67e8f9',
+    static: '#6ee7b7',
+    string: '#86efac',
+  },
+  font: {
+    body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+    size: '14px',
+    lineHeight: '1.6',
+  },
+}
+
+// Hook to detect dark mode
+function useDarkMode(): boolean {
+  const [isDark, setIsDark] = useState(false)
+
+  useEffect(() => {
+    // Check initial state
+    const checkDark = () => {
+      const root = document.documentElement
+      const hasDarkClass = root.classList.contains('dark')
+      const prefersLight = root.classList.contains('light')
+      const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+
+      return hasDarkClass || (!prefersLight && systemDark)
+    }
+
+    setIsDark(checkDark())
+
+    // Listen for class changes on document
+    const observer = new MutationObserver(() => {
+      setIsDark(checkDark())
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+
+    // Listen for system preference changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleChange = () => setIsDark(checkDark())
+    mediaQuery.addEventListener('change', handleChange)
+
+    return () => {
+      observer.disconnect()
+      mediaQuery.removeEventListener('change', handleChange)
+    }
+  }, [])
+
+  return isDark
+}
+
+type Template = 'react' | 'react-ts' | 'vanilla' | 'vanilla-ts' | 'node'
+
+interface CodePlaygroundProps {
+  code: string
+  template?: Template
+  showPreview?: boolean
+  showConsole?: boolean
+  editable?: boolean
+  dependencies?: Record<string, string>
+  filename?: string
+  autoRun?: boolean
+}
+
+// Toolbar component with reset/download
+function PlaygroundToolbar({ originalCode, filename, autoRun, onAutoRunChange }: {
+  originalCode: string
+  filename: string
+  autoRun: boolean
+  onAutoRunChange: (v: boolean) => void
+}) {
+  const { sandpack } = useSandpack()
+
+  const handleReset = () => {
+    sandpack.resetAllFiles()
+  }
+
+  const handleDownload = () => {
+    const code = sandpack.files[filename]?.code || originalCode
+    const blob = new Blob([code], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = filename.replace('/', '')
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  return (
+    <div className="flex items-center gap-1 px-2 py-1 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border)]">
+      <button
+        onClick={handleReset}
+        className="p-1.5 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] rounded"
+        title="Reset code"
+      >
+        <RotateCcw size={14} />
+      </button>
+      <button
+        onClick={handleDownload}
+        className="p-1.5 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] rounded"
+        title="Download code"
+      >
+        <Download size={14} />
+      </button>
+      <button
+        onClick={() => onAutoRunChange(!autoRun)}
+        className={`p-1.5 rounded ${autoRun ? 'text-emerald-500' : 'text-[var(--color-text-tertiary)]'} hover:text-[var(--color-text)]`}
+        title={autoRun ? 'Auto-run enabled' : 'Auto-run disabled'}
+      >
+        {autoRun ? <Play size={14} /> : <Pause size={14} />}
+      </button>
+    </div>
+  )
+}
+
+const templateConfig: Record<Template, { files: (code: string, filename?: string) => Record<string, string>, entry: string }> = {
+  'react': {
+    files: (code, filename) => ({
+      [filename || '/App.js']: code,
+    }),
+    entry: '/App.js',
+  },
+  'react-ts': {
+    files: (code, filename) => ({
+      [filename || '/App.tsx']: code,
+    }),
+    entry: '/App.tsx',
+  },
+  'vanilla': {
+    files: (code, filename) => ({
+      [filename || '/index.js']: code,
+      '/index.html': `<!DOCTYPE html>
+<html>
+<head><title>Preview</title></head>
+<body>
+<div id="app"></div>
+<script src="${filename || '/index.js'}"></script>
+</body>
+</html>`,
+    }),
+    entry: '/index.js',
+  },
+  'vanilla-ts': {
+    files: (code, filename) => ({
+      [filename || '/index.ts']: code,
+      '/index.html': `<!DOCTYPE html>
+<html>
+<head><title>Preview</title></head>
+<body>
+<div id="app"></div>
+<script src="${filename || '/index.ts'}"></script>
+</body>
+</html>`,
+    }),
+    entry: '/index.ts',
+  },
+  'node': {
+    files: (code, filename) => ({
+      [filename || '/index.js']: code,
+    }),
+    entry: '/index.js',
+  },
+}
+
+export function CodePlayground({
+  code,
+  template = 'react-ts',
+  showPreview = true,
+  showConsole = false,
+  editable = true,
+  dependencies = {},
+  filename,
+  autoRun: initialAutoRun = true,
+}: CodePlaygroundProps) {
+  const [activeTab, setActiveTab] = useState<'preview' | 'console'>('preview')
+  const [autoRun, setAutoRun] = useState(initialAutoRun)
+  const isDark = useDarkMode()
+  const config = templateConfig[template]
+  const files = config.files(code, filename)
+  const entryFile = filename || config.entry
+
+  return (
+    <div className="my-6 rounded-lg border border-[var(--color-border)] overflow-hidden">
+      <SandpackProvider
+        template={template === 'node' ? 'node' : template}
+        theme={isDark ? darkTheme : lightTheme}
+        files={files}
+        customSetup={{
+          dependencies,
+        }}
+        options={{
+          externalResources: [],
+          recompileMode: autoRun ? 'delayed' : 'immediate',
+          recompileDelay: 500,
+          autorun: autoRun,
+        }}
+      >
+        <PlaygroundToolbar
+          originalCode={code}
+          filename={entryFile}
+          autoRun={autoRun}
+          onAutoRunChange={setAutoRun}
+        />
+        <SandpackLayout>
+          <SandpackCodeEditor
+            showTabs
+            showLineNumbers
+            showInlineErrors
+            wrapContent
+            readOnly={!editable}
+            style={{ minHeight: 300 }}
+          />
+          {(showPreview || showConsole) && (
+            <div className="flex flex-col w-full">
+              {showPreview && showConsole && (
+                <div className="flex border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+                  <button
+                    onClick={() => setActiveTab('preview')}
+                    className={`px-4 py-2 text-sm font-medium ${
+                      activeTab === 'preview'
+                        ? 'text-blue-600 border-b-2 border-blue-600'
+                        : 'text-gray-600 dark:text-gray-400'
+                    }`}
+                  >
+                    Preview
+                  </button>
+                  <button
+                    onClick={() => setActiveTab('console')}
+                    className={`px-4 py-2 text-sm font-medium ${
+                      activeTab === 'console'
+                        ? 'text-blue-600 border-b-2 border-blue-600'
+                        : 'text-gray-600 dark:text-gray-400'
+                    }`}
+                  >
+                    Console
+                  </button>
+                </div>
+              )}
+              {showPreview && (!showConsole || activeTab === 'preview') && (
+                <SandpackPreview
+                  showNavigator={false}
+                  showRefreshButton
+                  style={{ minHeight: 300 }}
+                />
+              )}
+              {showConsole && (!showPreview || activeTab === 'console') && (
+                <SandpackConsole style={{ minHeight: 300 }} />
+              )}
+            </div>
+          )}
+        </SandpackLayout>
+      </SandpackProvider>
+    </div>
+  )
+}
+
+export default CodePlayground

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

@@ -0,0 +1,235 @@
+'use client'
+
+import { useState, useRef, useCallback } from 'react'
+import { Play, RotateCcw, Download, Loader2, ExternalLink } from 'lucide-react'
+
+interface GoPlaygroundProps {
+  code: string
+  filename?: string
+}
+
+type OutputLine = {
+  type: 'stdout' | 'stderr' | 'error'
+  content: string
+}
+
+const GO_PLAYGROUND_URL = 'https://go.dev/_/compile'
+
+export function GoPlayground({
+  code: initialCode,
+  filename = 'main.go',
+}: GoPlaygroundProps) {
+  const [code, setCode] = useState(initialCode)
+  const [output, setOutput] = useState<OutputLine[]>([])
+  const [isRunning, setIsRunning] = useState(false)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  const runCode = useCallback(async () => {
+    if (isRunning) return
+
+    setIsRunning(true)
+    setOutput([])
+
+    // Create abort controller with 30s timeout
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), 30000)
+
+    try {
+      // Use Go Playground API
+      const response = await fetch(GO_PLAYGROUND_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: new URLSearchParams({
+          version: '2',
+          body: code,
+          withVet: 'true',
+        }),
+        signal: controller.signal,
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`)
+      }
+
+      const result = await response.json()
+
+      const lines: OutputLine[] = []
+
+      if (result.Errors) {
+        lines.push({ type: 'error', content: result.Errors })
+      }
+
+      if (result.Events) {
+        for (const event of result.Events) {
+          if (event.Kind === 'stdout') {
+            lines.push({ type: 'stdout', content: event.Message })
+          } else if (event.Kind === 'stderr') {
+            lines.push({ type: 'stderr', content: event.Message })
+          }
+        }
+      }
+
+      if (result.VetErrors) {
+        lines.push({ type: 'stderr', content: `Vet: ${result.VetErrors}` })
+      }
+
+      setOutput(lines.length > 0 ? lines : [{ type: 'stdout', content: '(no output)' }])
+    } catch (err: unknown) {
+      let message: string
+      if (err instanceof Error) {
+        if (err.name === 'AbortError') {
+          message = 'Request timed out after 30 seconds. Try the Go Playground directly.'
+        } else {
+          message = `Failed to run: ${err.message}. Try the Go Playground directly.`
+        }
+      } else {
+        message = `Failed to run: ${String(err)}. Try the Go Playground directly.`
+      }
+      setOutput([{ type: 'error', content: message }])
+    } finally {
+      clearTimeout(timeoutId)
+      setIsRunning(false)
+    }
+  }, [code, isRunning])
+
+  const handleReset = () => {
+    setCode(initialCode)
+    setOutput([])
+  }
+
+  const handleDownload = () => {
+    const blob = new Blob([code], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = filename
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const openInPlayground = () => {
+    // Encode code for Go Playground URL
+    const encoded = btoa(unescape(encodeURIComponent(code)))
+    window.open(`https://go.dev/play/p/?source=${encoded}`, '_blank')
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    // Run on Ctrl/Cmd + Enter
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      e.preventDefault()
+      runCode()
+    }
+
+    // Tab handling
+    if (e.key === 'Tab') {
+      e.preventDefault()
+      const start = textareaRef.current?.selectionStart || 0
+      const end = textareaRef.current?.selectionEnd || 0
+      const newCode = code.slice(0, start) + '\t' + code.slice(end)
+      setCode(newCode)
+      setTimeout(() => {
+        if (textareaRef.current) {
+          textareaRef.current.selectionStart = textareaRef.current.selectionEnd = start + 1
+        }
+      }, 0)
+    }
+  }
+
+  return (
+    <div className="my-6 rounded-lg border border-[var(--color-border)] overflow-hidden">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between px-3 py-2 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border)]">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-medium text-[var(--color-text-secondary)]">
+            🐹 Go
+          </span>
+          <span className="text-xs text-[var(--color-text-tertiary)]">
+            {filename}
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={handleReset}
+            className="p-1.5 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] rounded"
+            title="Reset code"
+          >
+            <RotateCcw size={14} />
+          </button>
+          <button
+            onClick={handleDownload}
+            className="p-1.5 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] rounded"
+            title="Download code"
+          >
+            <Download size={14} />
+          </button>
+          <button
+            onClick={openInPlayground}
+            className="p-1.5 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] rounded"
+            title="Open in Go Playground"
+          >
+            <ExternalLink size={14} />
+          </button>
+          <button
+            onClick={runCode}
+            disabled={isRunning}
+            className="flex items-center gap-1 px-2 py-1 text-xs font-medium bg-cyan-600 text-white rounded hover:bg-cyan-700 disabled:opacity-50 disabled:cursor-not-allowed"
+            title="Run (Ctrl+Enter)"
+          >
+            {isRunning ? (
+              <>
+                <Loader2 size={12} className="animate-spin" />
+                Running
+              </>
+            ) : (
+              <>
+                <Play size={12} />
+                Run
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Code editor */}
+      <div className="relative">
+        <textarea
+          ref={textareaRef}
+          value={code}
+          onChange={(e) => setCode(e.target.value)}
+          onKeyDown={handleKeyDown}
+          spellCheck={false}
+          className="w-full min-h-[200px] p-4 font-mono text-sm bg-[var(--color-bg)] text-[var(--color-text)] resize-none focus:outline-none"
+          style={{
+            tabSize: 4,
+          }}
+        />
+        <div className="absolute top-2 right-2 text-xs text-[var(--color-text-tertiary)]">
+          Ctrl+Enter to run
+        </div>
+      </div>
+
+      {/* Output */}
+      {output.length > 0 && (
+        <div className="border-t border-[var(--color-border)] bg-[var(--color-code-bg)] text-[var(--color-code-text)] p-4 font-mono text-sm max-h-[300px] overflow-auto">
+          <div className="text-xs text-[var(--color-text-tertiary)] mb-2">Output:</div>
+          {output.map((line, i) => (
+            <pre
+              key={i}
+              className={`whitespace-pre-wrap ${
+                line.type === 'stderr' || line.type === 'error'
+                  ? 'text-red-400'
+                  : ''
+              }`}
+            >
+              {line.content}
+            </pre>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default GoPlayground

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

@@ -0,0 +1,37 @@
+'use client'
+
+import { Link2 } from 'lucide-react'
+import { ReactNode, createElement } from 'react'
+
+interface HeadingProps {
+  level: 1 | 2 | 3 | 4 | 5 | 6
+  children: ReactNode
+  id?: string
+}
+
+export function Heading({ level, children, id }: HeadingProps) {
+  const Tag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  const headingId = id || (typeof children === 'string'
+    ? children.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '')
+    : undefined)
+
+  return (
+    <Tag id={headingId} className="group relative scroll-mt-20">
+      {children}
+      {headingId && (
+        <a
+          href={`#${headingId}`}
+          className="absolute -left-6 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity p-1 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)]"
+          aria-label="Link to this section"
+        >
+          <Link2 size={16} />
+        </a>
+      )}
+    </Tag>
+  )
+}
+
+export const H1 = (props: Omit<HeadingProps, 'level'>) => <Heading level={1} {...props} />
+export const H2 = (props: Omit<HeadingProps, 'level'>) => <Heading level={2} {...props} />
+export const H3 = (props: Omit<HeadingProps, 'level'>) => <Heading level={3} {...props} />
+export const H4 = (props: Omit<HeadingProps, 'level'>) => <Heading level={4} {...props} />

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

@@ -0,0 +1,89 @@
+'use client'
+
+import { useState, useEffect, useContext, ReactNode, isValidElement, Children } from 'react'
+import { Copy, Check } from 'lucide-react'
+import { highlight, DEFAULT_THEME, type ThemeName } from '@/lib/highlight'
+
+// Import the context directly to use useContext safely
+import { SyntaxThemeContext } from '@/contexts/syntax-theme'
+
+interface HighlightedCodeProps {
+  children: ReactNode
+  className?: string
+}
+
+export function HighlightedCode({ children, className }: HighlightedCodeProps) {
+  const [copied, setCopied] = useState(false)
+  const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null)
+
+  // Use context safely - fallback to default if not available
+  const syntaxContext = useContext(SyntaxThemeContext)
+  const theme: ThemeName = syntaxContext?.theme ?? DEFAULT_THEME
+
+  // Extract code text and language from children
+  let codeText = ''
+  let language = 'text'
+
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.type === 'code') {
+      const props = child.props as { children?: string; className?: string }
+      codeText = props.children || ''
+      // Extract language from className like "language-typescript"
+      const classMatch = props.className?.match(/language-(\w+)/)
+      if (classMatch) {
+        language = classMatch[1]
+      }
+    }
+  })
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function doHighlight() {
+      if (!codeText) return
+
+      try {
+        const html = await highlight(codeText, language, theme)
+        if (!cancelled) {
+          setHighlightedHtml(html)
+        }
+      } catch (err) {
+        console.error('Highlight failed:', err)
+      }
+    }
+
+    doHighlight()
+
+    return () => {
+      cancelled = true
+    }
+  }, [codeText, language, theme])
+
+  async function handleCopy() {
+    await navigator.clipboard.writeText(codeText)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="relative group my-4">
+      {highlightedHtml ? (
+        <div
+          className="[&>pre]:rounded-lg [&>pre]:p-4 [&>pre]:overflow-x-auto"
+          dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+        />
+      ) : (
+        <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/index.tsx

@@ -0,0 +1,15 @@
+export { Card, CardGroup } from './card'
+export { Tabs, TabList, Tab, TabPanel } from './tabs'
+export { CodeGroup } from './code-group'
+export { CodeBlock } from './code-block'
+export { HighlightedCode } from './highlighted-code'
+export { Callout, Info, Warning, Success, Error, Tip, Note } from './callout'
+export { Accordion, AccordionGroup } from './accordion'
+export { Steps, Step } from './steps'
+export { CodePlayground } from './code-playground'
+export { PythonPlayground } from './python-playground'
+export { GoPlayground } from './go-playground'
+export { H1, H2, H3, H4 } from './heading'
+export { ParamTable, Schema } from './param-table'
+export { Changelog, ChangelogEntry, Change } from './changelog'
+export { MethodBadge, StatusBadge, Endpoint } from './api-badge'