@mdxui/payload 6.0.1

package/src/dev-tools/Terminal.tsx

@@ -0,0 +1,216 @@
+'use client'
+
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+
+interface TerminalProps {
+  /** Initial working directory */
+  cwd?: string
+  /** API endpoint base URL */
+  apiUrl?: string
+  /** Session ID for persistent sessions */
+  sessionId?: string
+  /** Height of the terminal */
+  height?: string | number
+  /** Called when command is executed */
+  onCommand?: (command: string, output: string) => void
+}
+
+interface TerminalLine {
+  type: 'input' | 'output' | 'error'
+  content: string
+  timestamp: Date
+}
+
+export const Terminal: React.FC<TerminalProps> = ({
+  cwd = '~',
+  apiUrl = 'https://api.sb',
+  sessionId,
+  height = 400,
+  onCommand,
+}) => {
+  const [lines, setLines] = useState<TerminalLine[]>([
+    { type: 'output', content: `Connected to sandbox. Type 'help' for commands.`, timestamp: new Date() },
+  ])
+  const [input, setInput] = useState('')
+  const [currentDir, _setCurrentDir] = useState(cwd)
+  const [isLoading, setIsLoading] = useState(false)
+  const [history, setHistory] = useState<string[]>([])
+  const [historyIndex, setHistoryIndex] = useState(-1)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [currentSessionId, setCurrentSessionId] = useState(sessionId)
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight
+    }
+  }, [lines])
+
+  // Focus input on click
+  const handleContainerClick = useCallback(() => {
+    inputRef.current?.focus()
+  }, [])
+
+  const executeCommand = useCallback(async (command: string) => {
+    if (!command.trim()) return
+
+    // Add to history
+    setHistory(prev => [...prev, command])
+    setHistoryIndex(-1)
+
+    // Show input line
+    setLines(prev => [...prev, { type: 'input', content: `${currentDir} $ ${command}`, timestamp: new Date() }])
+    setInput('')
+    setIsLoading(true)
+
+    try {
+      // Handle built-in commands
+      if (command === 'clear') {
+        setLines([])
+        setIsLoading(false)
+        return
+      }
+
+      if (command === 'help') {
+        setLines(prev => [...prev, {
+          type: 'output',
+          content: `Available commands:
+  clear     - Clear terminal
+  help      - Show this help
+  exit      - Close session
+
+All other commands are executed in the sandbox environment.`,
+          timestamp: new Date(),
+        }])
+        setIsLoading(false)
+        return
+      }
+
+      // Execute via API
+      const response = await fetch(`${apiUrl}/rpc`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          method: 'executeSandbox',
+          params: {
+            sessionId: currentSessionId,
+            command,
+            cwd: currentDir,
+          },
+        }),
+      })
+
+      const result = await response.json()
+
+      if (result.error) {
+        setLines(prev => [...prev, { type: 'error', content: result.error.message || 'Command failed', timestamp: new Date() }])
+      } else {
+        const output = result.result?.stdout || result.result?.stderr || ''
+        if (output) {
+          setLines(prev => [...prev, { type: 'output', content: output, timestamp: new Date() }])
+        }
+
+        // Update session ID if new session was created
+        if (result.result?.sessionId && !currentSessionId) {
+          setCurrentSessionId(result.result.sessionId)
+        }
+      }
+
+      onCommand?.(command, result.result?.stdout || '')
+    } catch (error) {
+      setLines(prev => [...prev, {
+        type: 'error',
+        content: `Error: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        timestamp: new Date()
+      }])
+    } finally {
+      setIsLoading(false)
+    }
+  }, [apiUrl, currentDir, currentSessionId, onCommand])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && !isLoading) {
+      executeCommand(input)
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      if (history.length > 0) {
+        const newIndex = historyIndex === -1 ? history.length - 1 : Math.max(0, historyIndex - 1)
+        setHistoryIndex(newIndex)
+        setInput(history[newIndex])
+      }
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      if (historyIndex !== -1) {
+        const newIndex = historyIndex + 1
+        if (newIndex >= history.length) {
+          setHistoryIndex(-1)
+          setInput('')
+        } else {
+          setHistoryIndex(newIndex)
+          setInput(history[newIndex])
+        }
+      }
+    } else if (e.key === 'c' && e.ctrlKey) {
+      setInput('')
+      setLines(prev => [...prev, { type: 'input', content: `${currentDir} $ ^C`, timestamp: new Date() }])
+    }
+  }, [input, isLoading, executeCommand, history, historyIndex, currentDir])
+
+  return (
+    <div
+      ref={containerRef}
+      onClick={handleContainerClick}
+      style={{
+        backgroundColor: '#1e1e1e',
+        color: '#d4d4d4',
+        fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+        fontSize: '13px',
+        lineHeight: '1.5',
+        padding: '12px',
+        borderRadius: '8px',
+        height: typeof height === 'number' ? `${height}px` : height,
+        overflowY: 'auto',
+        cursor: 'text',
+      }}
+    >
+      {lines.map((line, i) => (
+        <div
+          key={i}
+          style={{
+            color: line.type === 'error' ? '#f14c4c' : line.type === 'input' ? '#569cd6' : '#d4d4d4',
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-all',
+          }}
+        >
+          {line.content}
+        </div>
+      ))}
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <span style={{ color: '#569cd6' }}>{currentDir} $&nbsp;</span>
+        <input
+          ref={inputRef}
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          disabled={isLoading}
+          autoFocus
+          style={{
+            backgroundColor: 'transparent',
+            border: 'none',
+            color: '#d4d4d4',
+            fontFamily: 'inherit',
+            fontSize: 'inherit',
+            outline: 'none',
+            flex: 1,
+            caretColor: '#d4d4d4',
+          }}
+        />
+        {isLoading && <span style={{ color: '#6a9955' }}>⏳</span>}
+      </div>
+    </div>
+  )
+}
+
+export default Terminal

package/src/dev-tools/index.ts

@@ -0,0 +1,4 @@
+// Dev tools components for Payload CMS admin
+export { Terminal } from './Terminal'
+export { Browser } from './Browser'
+export { DevTools } from './DevTools'

package/src/index.ts

@@ -0,0 +1,39 @@
+/**
+ * @mdxui/payload - Payload CMS admin components and field UI
+ *
+ * This package provides components for extending Payload CMS admin UI:
+ * - Authentication wrappers and auto-login
+ * - WorkOS AuthKit integration widgets
+ * - Dev tools (Terminal, Browser)
+ * - MDX preview components
+ * - Site and App preview components
+ *
+ * @example
+ * ```tsx
+ * // Auth components
+ * import { AdminAuthWrapper, useAuth } from '@mdxui/payload/auth'
+ *
+ * // WorkOS AuthKit widgets
+ * import { UserProfile, UserSecurity, ApiKeys } from '@mdxui/payload/authkit'
+ *
+ * // Dev tools
+ * import { DevTools, Terminal, Browser } from '@mdxui/payload/dev-tools'
+ *
+ * // MDX preview
+ * import { MDXPreview, MDXProvider } from '@mdxui/payload/mdx-preview'
+ *
+ * // Site preview (uses @mdxui/beacon components)
+ * import { SitePreview, PayloadSiteField } from '@mdxui/payload/site-preview'
+ *
+ * // App preview (uses @mdxui/cockpit components)
+ * import { AppPreview, createAppPreviewField } from '@mdxui/payload/app-preview'
+ * ```
+ */
+
+// Re-export from submodules for convenience
+export * from './auth'
+export * from './authkit'
+export * from './dev-tools'
+export * from './mdx-preview'
+export * from './site-preview'
+export * from './app-preview'

package/src/mdx-preview/MDXPreview.tsx

@@ -0,0 +1,183 @@
+'use client'
+
+import React, { useMemo } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+import { useMDXCompiler } from './useMDXCompiler'
+import { useMDXComponents } from './MDXProvider'
+import type { MDXComponents } from './MDXProvider'
+
+export interface MDXPreviewProps {
+  /** MDX source code to render */
+  source: string
+  /** Component overrides (merged with provider components) */
+  components?: MDXComponents
+  /** Debounce delay in milliseconds (default: 300) */
+  debounceMs?: number
+  /** Custom error fallback component */
+  errorFallback?: React.ComponentType<{ error: Error; resetErrorBoundary: () => void }>
+  /** Custom loading component */
+  loadingComponent?: React.ReactNode
+  /** Whether to show compilation status (default: false) */
+  showStatus?: boolean
+  /** Development mode (default: true) */
+  development?: boolean
+}
+
+/**
+ * Default error fallback component
+ */
+function DefaultErrorFallback({ error, resetErrorBoundary }: { error: Error; resetErrorBoundary: () => void }) {
+  return (
+    <div
+      style={{
+        padding: '1rem',
+        backgroundColor: '#fee',
+        border: '1px solid #c00',
+        borderRadius: '0.25rem',
+        fontFamily: 'monospace',
+      }}
+    >
+      <h3 style={{ margin: '0 0 0.5rem 0', color: '#c00' }}>
+        MDX Compilation Error
+      </h3>
+      <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+        {error.message}
+      </pre>
+      <button
+        onClick={resetErrorBoundary}
+        style={{
+          marginTop: '0.5rem',
+          padding: '0.25rem 0.5rem',
+          backgroundColor: '#fff',
+          border: '1px solid #c00',
+          borderRadius: '0.25rem',
+          cursor: 'pointer',
+        }}
+      >
+        Retry
+      </button>
+    </div>
+  )
+}
+
+/**
+ * Default loading component
+ */
+function DefaultLoadingComponent() {
+  return (
+    <div
+      style={{
+        padding: '1rem',
+        color: '#666',
+        fontStyle: 'italic',
+      }}
+    >
+      Compiling MDX...
+    </div>
+  )
+}
+
+/**
+ * MDX live preview component that renders MDX source in real-time.
+ *
+ * @example
+ * ```tsx
+ * import { MDXPreview } from '@mdxui/payload/mdx-preview'
+ * import { Hero, Features } from '@mdxui/beacon'
+ *
+ * <MDXPreview
+ *   source={mdxSource}
+ *   components={{ Hero, Features }}
+ *   debounceMs={300}
+ * />
+ * ```
+ */
+export function MDXPreview({
+  source,
+  components: propsComponents = {},
+  debounceMs = 300,
+  errorFallback: ErrorFallback = DefaultErrorFallback,
+  loadingComponent = <DefaultLoadingComponent />,
+  showStatus = false,
+  development = true,
+}: MDXPreviewProps) {
+  const contextComponents = useMDXComponents()
+  const { code, error: compileError, isCompiling } = useMDXCompiler({
+    source,
+    debounceMs,
+    development,
+  })
+
+  // Merge components from context and props
+  const mergedComponents = useMemo(
+    () => ({ ...contextComponents, ...propsComponents }),
+    [contextComponents, propsComponents]
+  )
+
+  // Render compilation error
+  if (compileError) {
+    return <ErrorFallback error={compileError} resetErrorBoundary={() => {}} />
+  }
+
+  // Render loading state
+  if (isCompiling) {
+    return <>{loadingComponent}</>
+  }
+
+  // Render empty state
+  if (!code) {
+    return null
+  }
+
+  // Render compiled MDX
+  return (
+    <div>
+      {showStatus && (
+        <div
+          style={{
+            padding: '0.25rem 0.5rem',
+            fontSize: '0.75rem',
+            color: '#666',
+            borderBottom: '1px solid #e0e0e0',
+          }}
+        >
+          {isCompiling ? 'Compiling...' : 'Ready'}
+        </div>
+      )}
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <MDXContent code={code} components={mergedComponents} />
+      </ErrorBoundary>
+    </div>
+  )
+}
+
+/**
+ * Component that executes and renders compiled MDX code
+ */
+function MDXContent({ code, components }: { code: string; components: MDXComponents }) {
+  const Content = useMemo(() => {
+    try {
+      // Create a function from the compiled code
+      // The compiled code expects certain globals to be available
+      const fn = new Function(
+        'React',
+        ...Object.keys(components),
+        code
+      )
+
+      // Execute the function with React and components as arguments
+      const { default: MDXComponent } = fn(React, ...Object.values(components))
+
+      return MDXComponent
+    } catch (error) {
+      console.error('Error executing MDX code:', error)
+      throw error
+    }
+  }, [code, components])
+
+  if (!Content) {
+    return null
+  }
+
+  return <Content components={components} />
+}

package/src/mdx-preview/MDXProvider.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import React, { createContext, useContext, useMemo } from 'react'
+import { MDXProvider as BaseMDXProvider } from '@mdx-js/react'
+import type { SiteComponents, AppComponents } from 'mdxui'
+
+/**
+ * Combined components type that accepts both Site and App components
+ */
+export type MDXComponents = Partial<SiteComponents & AppComponents> & {
+  // Allow additional custom components
+  [key: string]: React.ComponentType<any>
+}
+
+interface MDXContextValue {
+  components: MDXComponents
+}
+
+const MDXContext = createContext<MDXContextValue | null>(null)
+
+export interface MDXProviderProps {
+  /** Component overrides for MDX rendering */
+  components?: MDXComponents
+  /** Child elements */
+  children: React.ReactNode
+}
+
+/**
+ * Provider for MDX components.
+ * Wraps the application and provides component overrides to MDX content.
+ *
+ * @example
+ * ```tsx
+ * import { Hero, Features } from '@mdxui/beacon'
+ *
+ * <MDXProvider components={{ Hero, Features }}>
+ *   <MDXPreview source={mdxSource} />
+ * </MDXProvider>
+ * ```
+ */
+export function MDXProvider({ components = {}, children }: MDXProviderProps) {
+  const value = useMemo(() => ({ components }), [components])
+
+  return (
+    <MDXContext.Provider value={value}>
+      <BaseMDXProvider components={components}>
+        {children}
+      </BaseMDXProvider>
+    </MDXContext.Provider>
+  )
+}
+
+/**
+ * Hook to access MDX components from context.
+ */
+export function useMDXComponents(): MDXComponents {
+  const context = useContext(MDXContext)
+  if (!context) {
+    return {}
+  }
+  return context.components
+}

package/src/mdx-preview/PayloadMDXField.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+import { useField } from '@payloadcms/ui'
+import { MDXPreview } from './MDXPreview'
+import type { MDXComponents } from './MDXProvider'
+
+export interface PayloadMDXFieldProps {
+  /** Field path in Payload document */
+  path: string
+  /** Component overrides for MDX rendering */
+  components?: MDXComponents
+  /** Whether to show the preview (default: true) */
+  showPreview?: boolean
+  /** Custom label for the preview section */
+  previewLabel?: string
+}
+
+/**
+ * Payload CMS custom field component with live MDX preview.
+ *
+ * Use this as a custom component in your Payload field configuration.
+ *
+ * @example
+ * ```tsx
+ * // In your Payload collection config:
+ * {
+ *   name: 'content',
+ *   type: 'textarea',
+ *   admin: {
+ *     components: {
+ *       Field: (props) => (
+ *         <PayloadMDXField
+ *           {...props}
+ *           components={{ Hero, Features }}
+ *         />
+ *       ),
+ *     },
+ *   },
+ * }
+ * ```
+ */
+export function PayloadMDXField({
+  path,
+  components,
+  showPreview = true,
+  previewLabel = 'Preview',
+}: PayloadMDXFieldProps) {
+  const { value } = useField<string>({ path })
+
+  if (!showPreview || !value) {
+    return null
+  }
+
+  return (
+    <div
+      style={{
+        marginTop: '1rem',
+        border: '1px solid #e0e0e0',
+        borderRadius: '0.25rem',
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          padding: '0.5rem 1rem',
+          backgroundColor: '#f5f5f5',
+          borderBottom: '1px solid #e0e0e0',
+          fontWeight: 600,
+          fontSize: '0.875rem',
+        }}
+      >
+        {previewLabel}
+      </div>
+      <div
+        style={{
+          padding: '1rem',
+          backgroundColor: '#fff',
+        }}
+      >
+        <MDXPreview
+          source={value}
+          components={components}
+          showStatus={true}
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Factory function to create a Payload field component with preset components.
+ *
+ * @example
+ * ```tsx
+ * import { Hero, Features } from '@mdxui/beacon'
+ *
+ * const SiteMDXField = createPayloadMDXField({
+ *   components: { Hero, Features },
+ *   previewLabel: 'Site Preview',
+ * })
+ *
+ * // Use in collection config:
+ * {
+ *   name: 'content',
+ *   type: 'textarea',
+ *   admin: {
+ *     components: {
+ *       Field: SiteMDXField,
+ *     },
+ *   },
+ * }
+ * ```
+ */
+export function createPayloadMDXField(
+  defaultProps: Omit<PayloadMDXFieldProps, 'path'>
+) {
+  return function PayloadMDXFieldComponent(props: { path: string }) {
+    return <PayloadMDXField {...defaultProps} {...props} />
+  }
+}

package/src/mdx-preview/index.ts

@@ -0,0 +1,28 @@
+/**
+ * MDX Live Preview Components
+ *
+ * Real-time MDX rendering for Payload CMS admin panel.
+ *
+ * @example
+ * ```tsx
+ * import { MDXProvider, MDXPreview } from '@mdxui/payload/mdx-preview'
+ * import { Hero, Features } from '@mdxui/beacon'
+ *
+ * // Wrap your app with MDXProvider
+ * <MDXProvider components={{ Hero, Features }}>
+ *   <MDXPreview source={mdxSource} />
+ * </MDXProvider>
+ * ```
+ */
+
+export { MDXPreview } from './MDXPreview'
+export type { MDXPreviewProps } from './MDXPreview'
+
+export { MDXProvider, useMDXComponents } from './MDXProvider'
+export type { MDXProviderProps, MDXComponents } from './MDXProvider'
+
+export { useMDXCompiler } from './useMDXCompiler'
+export type { MDXCompilerOptions, MDXCompilerResult } from './useMDXCompiler'
+
+export { PayloadMDXField, createPayloadMDXField } from './PayloadMDXField'
+export type { PayloadMDXFieldProps } from './PayloadMDXField'