@mdxui/payload 6.0.1

package/src/authkit/theme.ts

@@ -0,0 +1,102 @@
+/**
+ * AuthKit Theme Configuration
+ *
+ * Configures @mdxui/auth widgets theme to match Payload CMS admin styling.
+ * Uses Radix Themes API for customization.
+ */
+
+/**
+ * Theme configuration for WorkOS widgets
+ * Matches Payload CMS admin aesthetic
+ */
+export const payloadAuthKitTheme = {
+  /**
+   * Appearance mode - 'light', 'dark', or 'inherit'
+   * 'inherit' follows system/Payload dark mode setting
+   */
+  appearance: 'inherit' as const,
+
+  /**
+   * Accent color for interactive elements
+   * Payload uses a blue accent by default
+   */
+  accentColor: 'blue' as const,
+
+  /**
+   * Border radius for UI elements
+   * 'medium' matches Payload's rounded corners
+   */
+  radius: 'medium' as const,
+
+  /**
+   * Gray color palette
+   * 'slate' is close to Payload's neutral grays
+   */
+  grayColor: 'slate' as const,
+
+  /**
+   * Scaling factor for UI elements
+   * '100%' maintains standard sizing
+   */
+  scaling: '100%' as const,
+}
+
+/**
+ * CSS custom properties to inject for additional theming
+ * These override Radix Themes defaults to match Payload more closely
+ */
+export const customThemeStyles = `
+  /* Match Payload's font stack */
+  .workos-widgets {
+    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif);
+  }
+
+  /* Adjust card backgrounds for Payload dark mode */
+  [data-theme="dark"] .workos-widgets {
+    --color-background: var(--theme-elevation-100, #1a1a1a);
+    --color-surface: var(--theme-elevation-200, #242424);
+    --color-panel-solid: var(--theme-elevation-150, #1f1f1f);
+  }
+
+  /* Match Payload's button styling */
+  .workos-widgets button[data-accent-color] {
+    font-weight: 500;
+    transition: all 150ms ease;
+  }
+
+  /* Ensure proper contrast in light mode */
+  [data-theme="light"] .workos-widgets {
+    --color-background: var(--theme-elevation-0, #ffffff);
+    --color-surface: var(--theme-elevation-50, #f7f7f7);
+  }
+
+  /* Match Payload's input field styling */
+  .workos-widgets input,
+  .workos-widgets select,
+  .workos-widgets textarea {
+    border-color: var(--theme-elevation-300, #e0e0e0);
+  }
+
+  /* Widget container max-width for better readability */
+  .workos-widget-container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 2rem;
+  }
+`
+
+/**
+ * Inject custom theme styles into document
+ * Call this in your provider component
+ */
+export function injectThemeStyles() {
+  if (typeof document === 'undefined') return
+
+  const styleId = 'workos-widgets-custom-theme'
+  if (document.getElementById(styleId)) return
+
+  const style = document.createElement('style')
+  style.id = styleId
+  style.textContent = customThemeStyles
+  document.head.appendChild(style)
+}

package/src/authkit/useWidgetToken.ts

@@ -0,0 +1,67 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+
+interface UseWidgetTokenResult {
+  token: string | null
+  loading: boolean
+  error: string | null
+  refetch: () => Promise<void>
+}
+
+/**
+ * Hook to fetch authorization tokens for WorkOS widgets
+ *
+ * @param widget - The widget type (user-profile, user-security, etc.)
+ * @param organizationId - Optional organization context
+ * @returns Token state and refetch function
+ *
+ * @example
+ * ```tsx
+ * const { token, loading, error } = useWidgetToken('user-profile')
+ * if (loading) return <Spinner />
+ * if (error) return <Error message={error} />
+ * return <WorkOSWidget authToken={token} />
+ * ```
+ */
+export function useWidgetToken(
+  widget: string,
+  organizationId?: string
+): UseWidgetTokenResult {
+  const [token, setToken] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchToken = useCallback(async () => {
+    try {
+      setLoading(true)
+      setError(null)
+
+      const params = new URLSearchParams({ widget })
+      if (organizationId) {
+        params.set('organizationId', organizationId)
+      }
+
+      const response = await fetch(`/api/workos/widget-token?${params}`)
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to fetch token')
+      }
+
+      setToken(data.token)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Token fetch failed')
+    } finally {
+      setLoading(false)
+    }
+  }, [widget, organizationId])
+
+  useEffect(() => {
+    fetchToken()
+  }, [fetchToken])
+
+  return { token, loading, error, refetch: fetchToken }
+}
+
+export default useWidgetToken

package/src/dev-tools/Browser.tsx

@@ -0,0 +1,364 @@
+'use client'
+
+import React, { useState, useEffect, useCallback, useRef } from 'react'
+
+interface BrowserProps {
+  /** Initial URL to load */
+  initialUrl?: string
+  /** API endpoint base URL */
+  apiUrl?: string
+  /** Height of the browser viewport */
+  height?: string | number
+  /** Width of the browser viewport */
+  width?: string | number
+  /** Show URL bar */
+  showUrlBar?: boolean
+  /** Show controls (back, forward, refresh) */
+  showControls?: boolean
+  /** Called when URL changes */
+  onNavigate?: (url: string) => void
+  /** Called when screenshot is taken */
+  onScreenshot?: (imageData: string) => void
+}
+
+type SessionStatus = 'IDLE' | 'CONNECTING' | 'RUNNING' | 'COMPLETED' | 'ERROR' | 'TIMED_OUT'
+
+export const Browser: React.FC<BrowserProps> = ({
+  initialUrl = 'https://example.com.ai',
+  apiUrl = 'https://api.sb',
+  height = 600,
+  width = '100%',
+  showUrlBar = true,
+  showControls = true,
+  onNavigate,
+  onScreenshot,
+}) => {
+  const [url, setUrl] = useState(initialUrl)
+  const [inputUrl, setInputUrl] = useState(initialUrl)
+  const [sessionId, setSessionId] = useState<string | null>(null)
+  const [status, setStatus] = useState<SessionStatus>('IDLE')
+  const [screenshot, setScreenshot] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [connectUrl, setConnectUrl] = useState<string | null>(null)
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+
+  // Create browser session
+  const createSession = useCallback(async () => {
+    setStatus('CONNECTING')
+    setError(null)
+
+    try {
+      const response = await fetch(`${apiUrl}/rpc`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          method: 'createBrowserSession',
+          params: {
+            browserSettings: {
+              viewport: { width: 1280, height: 720 },
+            },
+            keepAlive: true,
+          },
+        }),
+      })
+
+      const result = await response.json()
+
+      if (result.error) {
+        throw new Error(result.error.message || 'Failed to create session')
+      }
+
+      setSessionId(result.result.id)
+      setStatus('RUNNING')
+
+      // Get connect URL for live view
+      const connectResponse = await fetch(`${apiUrl}/rpc`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          method: 'getBrowserConnectUrl',
+          params: { sessionId: result.result.id },
+        }),
+      })
+
+      const connectResult = await connectResponse.json()
+      if (connectResult.result?.url) {
+        setConnectUrl(connectResult.result.url)
+      }
+
+      return result.result.id
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error')
+      setStatus('ERROR')
+      return null
+    }
+  }, [apiUrl])
+
+  // Take screenshot
+  const takeScreenshot = useCallback(async () => {
+    if (!sessionId) return
+
+    try {
+      const response = await fetch(`${apiUrl}/rpc`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          method: 'runBrowserAction',
+          params: {
+            sessionId,
+            action: 'screenshot',
+            url,
+          },
+        }),
+      })
+
+      const result = await response.json()
+
+      if (result.result?.data) {
+        setScreenshot(result.result.data)
+        onScreenshot?.(result.result.data)
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Screenshot failed')
+    }
+  }, [apiUrl, sessionId, url, onScreenshot])
+
+  // Navigate to URL
+  const navigate = useCallback(async (targetUrl: string) => {
+    if (!sessionId) {
+      const newSessionId = await createSession()
+      if (!newSessionId) return
+    }
+
+    setUrl(targetUrl)
+    setInputUrl(targetUrl)
+    onNavigate?.(targetUrl)
+
+    // Take screenshot after navigation
+    setTimeout(() => takeScreenshot(), 2000)
+  }, [sessionId, createSession, onNavigate, takeScreenshot])
+
+  const handleUrlSubmit = useCallback((e: React.FormEvent) => {
+    e.preventDefault()
+    let targetUrl = inputUrl
+    if (!targetUrl.startsWith('http://') && !targetUrl.startsWith('https://')) {
+      targetUrl = 'https://' + targetUrl
+    }
+    navigate(targetUrl)
+  }, [inputUrl, navigate])
+
+  const handleRefresh = useCallback(() => {
+    takeScreenshot()
+  }, [takeScreenshot])
+
+  // Initialize session on mount
+  useEffect(() => {
+    if (status === 'IDLE') {
+      createSession().then((id) => {
+        if (id) {
+          setTimeout(() => takeScreenshot(), 1000)
+        }
+      })
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div
+      style={{
+        backgroundColor: '#2d2d2d',
+        borderRadius: '8px',
+        overflow: 'hidden',
+        width: typeof width === 'number' ? `${width}px` : width,
+      }}
+    >
+      {/* Browser Chrome */}
+      {(showUrlBar || showControls) && (
+        <div
+          style={{
+            backgroundColor: '#3c3c3c',
+            padding: '8px 12px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            borderBottom: '1px solid #1e1e1e',
+          }}
+        >
+          {/* Traffic lights */}
+          <div style={{ display: 'flex', gap: '6px' }}>
+            <div style={{ width: 12, height: 12, borderRadius: '50%', backgroundColor: '#ff5f57' }} />
+            <div style={{ width: 12, height: 12, borderRadius: '50%', backgroundColor: '#febc2e' }} />
+            <div style={{ width: 12, height: 12, borderRadius: '50%', backgroundColor: '#28c840' }} />
+          </div>
+
+          {/* Controls */}
+          {showControls && (
+            <div style={{ display: 'flex', gap: '4px', marginLeft: '8px' }}>
+              <button
+                onClick={handleRefresh}
+                disabled={status !== 'RUNNING'}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  color: '#888',
+                  cursor: 'pointer',
+                  padding: '4px 8px',
+                  borderRadius: '4px',
+                  fontSize: '14px',
+                }}
+                title="Refresh"
+              >
+                ↻
+              </button>
+            </div>
+          )}
+
+          {/* URL Bar */}
+          {showUrlBar && (
+            <form onSubmit={handleUrlSubmit} style={{ flex: 1 }}>
+              <input
+                type="text"
+                value={inputUrl}
+                onChange={(e) => setInputUrl(e.target.value)}
+                placeholder="Enter URL..."
+                style={{
+                  width: '100%',
+                  backgroundColor: '#1e1e1e',
+                  border: '1px solid #4a4a4a',
+                  borderRadius: '6px',
+                  color: '#d4d4d4',
+                  padding: '6px 12px',
+                  fontSize: '13px',
+                  outline: 'none',
+                }}
+              />
+            </form>
+          )}
+
+          {/* Status indicator */}
+          <div
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: '50%',
+              backgroundColor:
+                status === 'RUNNING' ? '#28c840' :
+                status === 'CONNECTING' ? '#febc2e' :
+                status === 'ERROR' ? '#ff5f57' :
+                '#888',
+            }}
+            title={status}
+          />
+        </div>
+      )}
+
+      {/* Browser Viewport */}
+      <div
+        style={{
+          height: typeof height === 'number' ? `${height}px` : height,
+          backgroundColor: '#fff',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        {status === 'CONNECTING' && (
+          <div
+            style={{
+              position: 'absolute',
+              inset: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: '#1e1e1e',
+              color: '#d4d4d4',
+            }}
+          >
+            <div style={{ textAlign: 'center' }}>
+              <div style={{ fontSize: '24px', marginBottom: '8px' }}>🌐</div>
+              <div>Starting browser session...</div>
+            </div>
+          </div>
+        )}
+
+        {error && (
+          <div
+            style={{
+              position: 'absolute',
+              inset: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: '#1e1e1e',
+              color: '#f14c4c',
+            }}
+          >
+            <div style={{ textAlign: 'center' }}>
+              <div style={{ fontSize: '24px', marginBottom: '8px' }}>⚠️</div>
+              <div>{error}</div>
+              <button
+                onClick={() => {
+                  setError(null)
+                  setStatus('IDLE')
+                  createSession()
+                }}
+                style={{
+                  marginTop: '12px',
+                  padding: '8px 16px',
+                  backgroundColor: '#4a4a4a',
+                  border: 'none',
+                  borderRadius: '4px',
+                  color: '#d4d4d4',
+                  cursor: 'pointer',
+                }}
+              >
+                Retry
+              </button>
+            </div>
+          </div>
+        )}
+
+        {screenshot && status === 'RUNNING' && (
+          <img
+            src={`data:image/png;base64,${screenshot}`}
+            alt="Browser screenshot"
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'contain',
+            }}
+          />
+        )}
+
+        {connectUrl && status === 'RUNNING' && !screenshot && (
+          <iframe
+            ref={iframeRef}
+            src={connectUrl}
+            style={{
+              width: '100%',
+              height: '100%',
+              border: 'none',
+            }}
+            title="Browser Session"
+            sandbox="allow-scripts allow-same-origin"
+          />
+        )}
+      </div>
+
+      {/* Status bar */}
+      <div
+        style={{
+          backgroundColor: '#3c3c3c',
+          padding: '4px 12px',
+          fontSize: '11px',
+          color: '#888',
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+      >
+        <span>{status === 'RUNNING' ? `Session: ${sessionId?.slice(0, 8)}...` : status}</span>
+        <span>{url}</span>
+      </div>
+    </div>
+  )
+}
+
+export default Browser

package/src/dev-tools/DevTools.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Terminal } from './Terminal'
+import { Browser } from './Browser'
+
+interface DevToolsProps {
+  /** API endpoint base URL */
+  apiUrl?: string
+  /** Initial tab to show */
+  defaultTab?: 'terminal' | 'browser' | 'split'
+  /** Height of the dev tools panel */
+  height?: string | number
+}
+
+type Tab = 'terminal' | 'browser' | 'split'
+
+export const DevTools: React.FC<DevToolsProps> = ({
+  apiUrl = 'https://api.sb',
+  defaultTab = 'split',
+  height = 500,
+}) => {
+  const [activeTab, setActiveTab] = useState<Tab>(defaultTab)
+
+  const tabs: { id: Tab; label: string; icon: string }[] = [
+    { id: 'terminal', label: 'Terminal', icon: '⌨️' },
+    { id: 'browser', label: 'Browser', icon: '🌐' },
+    { id: 'split', label: 'Split View', icon: '⬚' },
+  ]
+
+  return (
+    <div
+      style={{
+        backgroundColor: '#1e1e1e',
+        borderRadius: '8px',
+        overflow: 'hidden',
+        border: '1px solid #3c3c3c',
+      }}
+    >
+      {/* Tab bar */}
+      <div
+        style={{
+          backgroundColor: '#2d2d2d',
+          display: 'flex',
+          borderBottom: '1px solid #3c3c3c',
+        }}
+      >
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            style={{
+              padding: '8px 16px',
+              backgroundColor: activeTab === tab.id ? '#1e1e1e' : 'transparent',
+              border: 'none',
+              borderBottom: activeTab === tab.id ? '2px solid #569cd6' : '2px solid transparent',
+              color: activeTab === tab.id ? '#d4d4d4' : '#888',
+              cursor: 'pointer',
+              fontSize: '13px',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '6px',
+              transition: 'all 0.2s',
+            }}
+          >
+            <span>{tab.icon}</span>
+            <span>{tab.label}</span>
+          </button>
+        ))}
+      </div>
+
+      {/* Content */}
+      <div
+        style={{
+          height: typeof height === 'number' ? `${height}px` : height,
+          display: 'flex',
+        }}
+      >
+        {activeTab === 'terminal' && (
+          <div style={{ flex: 1, padding: '8px' }}>
+            <Terminal apiUrl={apiUrl} height="100%" />
+          </div>
+        )}
+
+        {activeTab === 'browser' && (
+          <div style={{ flex: 1, padding: '8px' }}>
+            <Browser apiUrl={apiUrl} height="100%" />
+          </div>
+        )}
+
+        {activeTab === 'split' && (
+          <>
+            <div style={{ flex: 1, padding: '8px', borderRight: '1px solid #3c3c3c' }}>
+              <Terminal apiUrl={apiUrl} height="100%" />
+            </div>
+            <div style={{ flex: 1, padding: '8px' }}>
+              <Browser apiUrl={apiUrl} height="100%" />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default DevTools