skrypt-ai 0.1.0

package/dist/template/src/components/mdx/param-table.tsx

@@ -0,0 +1,71 @@
+import { ReactNode } from 'react'
+
+interface Param {
+  name: string
+  type: string
+  required?: boolean
+  default?: string
+  description: ReactNode
+}
+
+interface ParamTableProps {
+  params: Param[]
+}
+
+export function ParamTable({ params }: ParamTableProps) {
+  return (
+    <div className="my-6 overflow-x-auto">
+      <table className="w-full text-[14px]">
+        <thead>
+          <tr className="border-b border-[var(--color-border)]">
+            <th className="py-2 pr-4 text-left font-semibold">Parameter</th>
+            <th className="py-2 pr-4 text-left font-semibold">Type</th>
+            <th className="py-2 text-left font-semibold">Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {params.map((param) => (
+            <tr key={param.name} className="border-b border-[var(--color-border)]">
+              <td className="py-3 pr-4 align-top">
+                <code className="text-[13px] font-semibold">{param.name}</code>
+                {param.required && (
+                  <span className="ml-1.5 text-[11px] text-red-500 font-medium">required</span>
+                )}
+              </td>
+              <td className="py-3 pr-4 align-top">
+                <code className="text-[13px] text-[var(--color-text-secondary)]">{param.type}</code>
+                {param.default && (
+                  <span className="block text-[12px] text-[var(--color-text-tertiary)]">
+                    Default: <code>{param.default}</code>
+                  </span>
+                )}
+              </td>
+              <td className="py-3 align-top text-[var(--color-text-secondary)]">
+                {param.description}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+// Response/Request schema display
+interface SchemaProps {
+  type: 'request' | 'response'
+  schema: Record<string, any>
+}
+
+export function Schema({ type, schema }: SchemaProps) {
+  return (
+    <div className="my-4 rounded-lg border border-[var(--color-border)] overflow-hidden">
+      <div className="px-4 py-2 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border)]">
+        <span className="text-[13px] font-medium capitalize">{type} Schema</span>
+      </div>
+      <pre className="!m-0 !rounded-none p-4 text-[13px] overflow-x-auto">
+        <code>{JSON.stringify(schema, null, 2)}</code>
+      </pre>
+    </div>
+  )
+}

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

@@ -0,0 +1,293 @@
+'use client'
+
+import { useState, useRef, useCallback, useEffect } from 'react'
+import { Play, RotateCcw, Download, Loader2, Square } from 'lucide-react'
+
+interface PythonPlaygroundProps {
+  code: string
+  filename?: string
+  packages?: string[]
+}
+
+type OutputLine = {
+  type: 'stdout' | 'stderr' | 'result'
+  content: string
+}
+
+export function PythonPlayground({
+  code: initialCode,
+  filename = 'main.py',
+  packages = [],
+}: PythonPlaygroundProps) {
+  const [code, setCode] = useState(initialCode)
+  const [output, setOutput] = useState<OutputLine[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [isRunning, setIsRunning] = useState(false)
+  const [pyodideReady, setPyodideReady] = useState(false)
+  const pyodideRef = useRef<any>(null)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  // Load Pyodide on mount
+  useEffect(() => {
+    const loadPyodide = async () => {
+      if (pyodideRef.current) return
+
+      setIsLoading(true)
+      try {
+        // @ts-ignore - Pyodide loaded via script
+        const pyodide = await window.loadPyodide({
+          indexURL: 'https://cdn.jsdelivr.net/pyodide/v0.24.1/full/',
+        })
+        pyodideRef.current = pyodide
+
+        // Install micropip for package management
+        await pyodide.loadPackage('micropip')
+
+        // Install requested packages
+        if (packages.length > 0) {
+          const micropip = pyodide.pyimport('micropip')
+          for (const pkg of packages) {
+            try {
+              await micropip.install(pkg)
+            } catch (e) {
+              console.warn(`Failed to install ${pkg}:`, e)
+            }
+          }
+        }
+
+        setPyodideReady(true)
+      } catch (err) {
+        setOutput([{ type: 'stderr', content: `Failed to load Python: ${err}` }])
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    // Check if Pyodide script is loaded
+    if (typeof window !== 'undefined') {
+      if ((window as any).loadPyodide) {
+        loadPyodide()
+      } else {
+        // Load Pyodide script
+        const script = document.createElement('script')
+        script.src = 'https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js'
+        script.onload = loadPyodide
+        script.onerror = () => {
+          setIsLoading(false)
+          setOutput([{ type: 'stderr', content: 'Failed to load Python runtime. Check your network connection.' }])
+        }
+        document.head.appendChild(script)
+      }
+    }
+  }, [packages])
+
+  const runCode = useCallback(async () => {
+    if (!pyodideRef.current || isRunning) return
+
+    setIsRunning(true)
+    setOutput([])
+
+    try {
+      const pyodide = pyodideRef.current
+
+      // Capture stdout/stderr
+      pyodide.runPython(`
+import sys
+from io import StringIO
+
+class CaptureOutput:
+    def __init__(self):
+        self.stdout = StringIO()
+        self.stderr = StringIO()
+
+    def get_output(self):
+        return self.stdout.getvalue(), self.stderr.getvalue()
+
+    def clear(self):
+        self.stdout = StringIO()
+        self.stderr = StringIO()
+
+_capture = CaptureOutput()
+sys.stdout = _capture.stdout
+sys.stderr = _capture.stderr
+`)
+
+      // Run the user's code
+      let result
+      try {
+        result = pyodide.runPython(code)
+      } catch (err: unknown) {
+        const message = err instanceof Error ? err.message : String(err)
+        setOutput([{ type: 'stderr', content: message }])
+        setIsRunning(false)
+        return
+      }
+
+      // Get captured output
+      const [stdout, stderr] = pyodide.runPython('_capture.get_output()').toJs()
+
+      const lines: OutputLine[] = []
+
+      if (stdout) {
+        lines.push({ type: 'stdout', content: stdout })
+      }
+
+      if (stderr) {
+        lines.push({ type: 'stderr', content: stderr })
+      }
+
+      if (result !== undefined && result !== null) {
+        const resultStr = typeof result === 'object' && result.toJs
+          ? JSON.stringify(result.toJs(), null, 2)
+          : String(result)
+        if (resultStr && resultStr !== 'undefined') {
+          lines.push({ type: 'result', content: resultStr })
+        }
+      }
+
+      // Reset stdout/stderr
+      pyodide.runPython('_capture.clear()')
+
+      setOutput(lines.length > 0 ? lines : [{ type: 'stdout', content: '(no output)' }])
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : String(err)
+      setOutput([{ type: 'stderr', content: message }])
+    } finally {
+      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 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) + '    ' + code.slice(end)
+      setCode(newCode)
+      // Reset cursor position
+      setTimeout(() => {
+        if (textareaRef.current) {
+          textareaRef.current.selectionStart = textareaRef.current.selectionEnd = start + 4
+        }
+      }, 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)]">
+            🐍 Python
+          </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={runCode}
+            disabled={!pyodideReady || isRunning}
+            className="flex items-center gap-1 px-2 py-1 text-xs font-medium bg-emerald-600 text-white rounded hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed"
+            title="Run (Ctrl+Enter)"
+          >
+            {isLoading ? (
+              <>
+                <Loader2 size={12} className="animate-spin" />
+                Loading...
+              </>
+            ) : isRunning ? (
+              <>
+                <Square size={12} />
+                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'
+                  ? 'text-red-400'
+                  : line.type === 'result'
+                  ? 'text-emerald-400'
+                  : ''
+              }`}
+            >
+              {line.content}
+            </pre>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default PythonPlayground

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

@@ -0,0 +1,43 @@
+import { ReactNode, Children, isValidElement } from 'react'
+
+interface StepsProps {
+  children: ReactNode
+}
+
+export function Steps({ children }: StepsProps) {
+  const items = Children.toArray(children).filter(isValidElement)
+
+  return (
+    <div className="my-6 space-y-6">
+      {items.map((child, index) => (
+        <div key={`step-${index}`} className="flex gap-4">
+          <div className="flex flex-col items-center">
+            <div className="flex items-center justify-center w-8 h-8 rounded-full bg-[var(--color-primary)] text-white text-sm font-medium">
+              {index + 1}
+            </div>
+            {index < items.length - 1 && (
+              <div className="flex-1 w-px bg-[var(--color-border)] mt-2" />
+            )}
+          </div>
+          <div className="flex-1 pb-6">
+            {child}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+interface StepProps {
+  title: string
+  children: ReactNode
+}
+
+export function Step({ title, children }: StepProps) {
+  return (
+    <div>
+      <h3 className="font-medium text-[var(--color-text)] mb-2">{title}</h3>
+      <div className="text-[var(--color-text-secondary)]">{children}</div>
+    </div>
+  )
+}

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

@@ -0,0 +1,81 @@
+'use client'
+
+import { createContext, useContext, useState, ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+interface TabsContextValue {
+  activeTab: string
+  setActiveTab: (tab: string) => void
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null)
+
+interface TabsProps {
+  defaultValue: string
+  children: ReactNode
+}
+
+export function Tabs({ defaultValue, children }: TabsProps) {
+  const [activeTab, setActiveTab] = useState(defaultValue)
+
+  return (
+    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
+      <div className="my-6">{children}</div>
+    </TabsContext.Provider>
+  )
+}
+
+interface TabListProps {
+  children: ReactNode
+}
+
+export function TabList({ children }: TabListProps) {
+  return (
+    <div className="flex border-b border-[var(--color-border)]">
+      {children}
+    </div>
+  )
+}
+
+interface TabProps {
+  value: string
+  children: ReactNode
+}
+
+export function Tab({ value, children }: TabProps) {
+  const context = useContext(TabsContext)
+  if (!context) throw new Error('Tab must be used within Tabs')
+
+  const { activeTab, setActiveTab } = context
+  const isActive = activeTab === value
+
+  return (
+    <button
+      onClick={() => setActiveTab(value)}
+      className={cn(
+        'px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px',
+        isActive
+          ? 'border-[var(--color-primary)] text-[var(--color-primary)]'
+          : 'border-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text)]'
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+interface TabPanelProps {
+  value: string
+  children: ReactNode
+}
+
+export function TabPanel({ value, children }: TabPanelProps) {
+  const context = useContext(TabsContext)
+  if (!context) throw new Error('TabPanel must be used within Tabs')
+
+  const { activeTab } = context
+
+  if (activeTab !== value) return null
+
+  return <div className="pt-4">{children}</div>
+}

package/dist/template/src/components/rate-limit-display.tsx

@@ -0,0 +1,183 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Activity, AlertTriangle, CheckCircle } from 'lucide-react'
+
+interface RateLimitInfo {
+  limit: number
+  remaining: number
+  reset: Date
+  used: number
+}
+
+interface RateLimitDisplayProps {
+  /** API endpoint to check rate limits for */
+  endpoint?: string
+  /** API key header name */
+  apiKeyHeader?: string
+  /** Refresh interval in ms (default: 30000) */
+  refreshInterval?: number
+  /** Show compact view */
+  compact?: boolean
+}
+
+/**
+ * Display current API rate limit status
+ * Parses standard rate limit headers (X-RateLimit-*, RateLimit-*)
+ */
+export function RateLimitDisplay({
+  endpoint = '/api/rate-limit',
+  apiKeyHeader = 'Authorization',
+  refreshInterval = 30000,
+  compact = false,
+}: RateLimitDisplayProps) {
+  const [rateLimit, setRateLimit] = useState<RateLimitInfo | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const fetchRateLimit = async () => {
+      try {
+        const response = await fetch(endpoint, {
+          method: 'HEAD',
+        })
+
+        // Parse rate limit headers
+        const limit = parseInt(
+          response.headers.get('X-RateLimit-Limit') ||
+          response.headers.get('RateLimit-Limit') ||
+          response.headers.get('X-Rate-Limit-Limit') ||
+          '1000'
+        )
+
+        const remaining = parseInt(
+          response.headers.get('X-RateLimit-Remaining') ||
+          response.headers.get('RateLimit-Remaining') ||
+          response.headers.get('X-Rate-Limit-Remaining') ||
+          '1000'
+        )
+
+        const resetTimestamp = parseInt(
+          response.headers.get('X-RateLimit-Reset') ||
+          response.headers.get('RateLimit-Reset') ||
+          response.headers.get('X-Rate-Limit-Reset') ||
+          String(Math.floor(Date.now() / 1000) + 3600)
+        )
+
+        setRateLimit({
+          limit,
+          remaining,
+          reset: new Date(resetTimestamp * 1000),
+          used: limit - remaining,
+        })
+        setError(null)
+      } catch (err) {
+        setError('Unable to fetch rate limit info')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchRateLimit()
+    const interval = setInterval(fetchRateLimit, refreshInterval)
+    return () => clearInterval(interval)
+  }, [endpoint, refreshInterval])
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 text-sm text-[var(--color-text-tertiary)]">
+        <Activity size={14} className="animate-pulse" />
+        <span>Loading rate limits...</span>
+      </div>
+    )
+  }
+
+  if (error || !rateLimit) {
+    return (
+      <div className="flex items-center gap-2 text-sm text-yellow-600 dark:text-yellow-400">
+        <AlertTriangle size={14} />
+        <span>{error || 'Rate limit info unavailable'}</span>
+      </div>
+    )
+  }
+
+  const percentUsed = (rateLimit.used / rateLimit.limit) * 100
+  const isWarning = percentUsed > 80
+  const isCritical = percentUsed > 95
+
+  const statusColor = isCritical
+    ? 'text-red-600 dark:text-red-400'
+    : isWarning
+    ? 'text-yellow-600 dark:text-yellow-400'
+    : 'text-emerald-600 dark:text-emerald-400'
+
+  const barColor = isCritical
+    ? 'bg-red-500'
+    : isWarning
+    ? 'bg-yellow-500'
+    : 'bg-emerald-500'
+
+  const timeUntilReset = Math.max(0, Math.floor((rateLimit.reset.getTime() - Date.now()) / 1000 / 60))
+
+  if (compact) {
+    return (
+      <div className="flex items-center gap-2 text-sm">
+        <div className={statusColor}>
+          {isCritical ? <AlertTriangle size={14} /> : <CheckCircle size={14} />}
+        </div>
+        <span className={statusColor}>
+          {rateLimit.remaining}/{rateLimit.limit}
+        </span>
+        <span className="text-[var(--color-text-tertiary)]">
+          (resets in {timeUntilReset}m)
+        </span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-secondary)]">
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <Activity size={16} className={statusColor} />
+          <span className="font-medium text-[var(--color-text)]">Rate Limit Status</span>
+        </div>
+        <div className={`text-sm font-medium ${statusColor}`}>
+          {rateLimit.remaining} remaining
+        </div>
+      </div>
+
+      {/* Progress bar */}
+      <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden mb-3">
+        <div
+          className={`h-full transition-all ${barColor}`}
+          style={{ width: `${Math.min(100, percentUsed)}%` }}
+        />
+      </div>
+
+      <div className="grid grid-cols-3 gap-4 text-sm">
+        <div>
+          <div className="text-[var(--color-text-tertiary)]">Used</div>
+          <div className="font-medium text-[var(--color-text)]">{rateLimit.used}</div>
+        </div>
+        <div>
+          <div className="text-[var(--color-text-tertiary)]">Limit</div>
+          <div className="font-medium text-[var(--color-text)]">{rateLimit.limit}</div>
+        </div>
+        <div>
+          <div className="text-[var(--color-text-tertiary)]">Resets in</div>
+          <div className="font-medium text-[var(--color-text)]">{timeUntilReset} min</div>
+        </div>
+      </div>
+
+      {isCritical && (
+        <div className="mt-3 p-2 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 text-sm rounded">
+          <AlertTriangle size={14} className="inline mr-1" />
+          Rate limit nearly exhausted. Requests may be throttled.
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default RateLimitDisplay