@mdxui/payload 6.0.1

package/.turbo/turbo-typecheck.log

@@ -0,0 +1,5 @@
+
+
+> @mdxui/payload@5.0.2 typecheck /Users/chrisrisner/Workspace/dot-do/ui/packages/payload
+> tsc --noEmit
+

package/CHANGELOG.md

@@ -0,0 +1,136 @@
+# @mdxui/payload
+
+## 6.0.1
+
+### Patch Changes
+
+- Updated dependencies [a4337af]
+- Updated dependencies [e485d70]
+- Updated dependencies [9f95ff0]
+  - @mdxui/auth@1.1.0
+  - @mdxui/cockpit@6.0.1
+  - @mdxui/beacon@6.0.1
+
+## 6.0.0
+
+### Patch Changes
+
+- @mdxui/beacon@6.0.0
+- @mdxui/cockpit@6.0.0
+- @mdxui/primitives@6.0.0
+- mdxui@6.0.0
+
+## 5.0.2
+
+### Patch Changes
+
+- @mdxui/beacon@5.0.2
+- @mdxui/cockpit@5.0.2
+- @mdxui/primitives@5.0.2
+- mdxui@5.0.2
+
+## 5.0.1
+
+### Patch Changes
+
+- @mdxui/beacon@5.0.1
+- @mdxui/cockpit@5.0.1
+- @mdxui/primitives@5.0.1
+- mdxui@5.0.1
+
+## 5.0.0
+
+### Patch Changes
+
+- @mdxui/beacon@5.0.0
+- @mdxui/cockpit@5.0.0
+- @mdxui/primitives@5.0.0
+- mdxui@5.0.0
+
+## 4.0.0
+
+### Patch Changes
+
+- @mdxui/beacon@4.0.0
+- @mdxui/cockpit@4.0.0
+- @mdxui/primitives@4.0.0
+- mdxui@4.0.0
+
+## 3.0.1
+
+### Patch Changes
+
+- @mdxui/beacon@3.0.1
+- @mdxui/cockpit@3.0.1
+- @mdxui/primitives@3.0.1
+- mdxui@3.0.1
+
+## 3.0.0
+
+### Patch Changes
+
+- @mdxui/beacon@3.0.0
+- @mdxui/cockpit@3.0.0
+- @mdxui/primitives@3.0.0
+- mdxui@3.0.0
+
+## 2.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - mdxui@2.1.1
+  - @mdxui/beacon@2.1.1
+  - @mdxui/cockpit@2.1.1
+  - @mdxui/primitives@2.1.1
+
+## 2.0.0
+
+### Patch Changes
+
+- Updated dependencies [8101194]
+  - mdxui@2.0.0
+  - @mdxui/beacon@2.0.0
+
+## 1.0.0
+
+### Patch Changes
+
+- Updated dependencies [defc863]
+- Updated dependencies [adb0209]
+  - mdxui@1.0.0
+  - @mdxui/cockpit@1.0.0
+  - @mdxui/beacon@1.0.0
+
+## 0.5.0
+
+### Patch Changes
+
+- Updated dependencies [1e99336]
+  - @mdxui/beacon@0.5.0
+
+## 0.4.1
+
+### Patch Changes
+
+- Updated dependencies [4d0d1a0]
+  - mdxui@0.4.1
+  - @mdxui/primitives@0.4.1
+  - @mdxui/beacon@0.4.0
+  - @mdxui/cockpit@0.4.0
+
+## 0.4.0
+
+### Patch Changes
+
+- Updated dependencies [fccbde8]
+- Updated dependencies [90785e5]
+  - @mdxui/beacon@0.4.0
+  - @mdxui/cockpit@0.4.0
+
+## 0.3.0
+
+### Patch Changes
+
+- Updated dependencies [2a6669a]
+  - @mdxui/beacon@0.3.0

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@mdxui/payload",
+  "version": "6.0.1",
+  "description": "Payload CMS admin components and field UI for mdxui",
+  "type": "module",
+  "sideEffects": false,
+  "license": "MIT",
+  "exports": {
+    ".": "./src/index.ts",
+    "./auth": "./src/auth/index.ts",
+    "./authkit": "./src/authkit/index.ts",
+    "./dev-tools": "./src/dev-tools/index.ts",
+    "./mdx-preview": "./src/mdx-preview/index.ts",
+    "./site-preview": "./src/site-preview/index.ts",
+    "./app-preview": "./src/app-preview/index.ts"
+  },
+  "dependencies": {
+    "@mdx-js/mdx": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@radix-ui/themes": "^3.2.1",
+    "@tanstack/react-query": "^5.90.12",
+    "lucide-react": "^0.561.0",
+    "react": "^19.2.3",
+    "react-error-boundary": "^5.0.0",
+    "shiki": "^3.20.0",
+    "@mdxui/auth": "1.1.0",
+    "@mdxui/beacon": "6.0.1",
+    "@mdxui/cockpit": "6.0.1",
+    "@mdxui/primitives": "6.0.0",
+    "mdxui": "6.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "5.9.3",
+    "@mdxui/typescript-config": "6.0.0"
+  },
+  "peerDependencies": {
+    "@payloadcms/ui": "^3.0.0",
+    "payload": "^3.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@payloadcms/ui": {
+      "optional": true
+    },
+    "payload": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf .turbo node_modules"
+  }
+}

package/src/app-preview/AppPreview.tsx

@@ -0,0 +1,304 @@
+'use client'
+
+import { MDXLiveRenderer } from 'mdxui'
+import type { AppComponents } from 'mdxui'
+
+// Import App components from cockpit
+import {
+  DeveloperDashboard,
+  KeysPage,
+  WebhooksEndpointsPage,
+  OverviewPage,
+  SettingsProfilePage,
+  TeamPage,
+  BillingPage,
+  RequestsPage,
+} from '@mdxui/cockpit/developer'
+
+/**
+ * AppComponents implementation using the cockpit template
+ *
+ * This provides all the App components that can be used in MDX content
+ * for previewing SaaS application components in the Payload admin.
+ */
+const appComponents: Partial<AppComponents> = {
+  // Main dashboard
+  DeveloperDashboard: DeveloperDashboard as any,
+
+  // Page components that map to AppComponents interface
+  Dashboard: OverviewPage as any,
+  Settings: SettingsProfilePage as any,
+
+  // Optional feature components (auto-wire to collections)
+  APIKeys: KeysPage as any,
+  Webhooks: WebhooksEndpointsPage as any,
+  Team: TeamPage as any,
+  Billing: BillingPage as any,
+  Usage: RequestsPage as any,
+}
+
+export interface AppPreviewProps {
+  /**
+   * MDX content to preview
+   */
+  content: string
+
+  /**
+   * Optional additional components to merge with AppComponents
+   */
+  components?: Partial<AppComponents>
+
+  /**
+   * Optional className for the preview wrapper
+   */
+  className?: string
+
+  /**
+   * Debounce delay in milliseconds (default: 300ms)
+   */
+  debounceMs?: number
+
+  /**
+   * Whether to show status indicator (default: false)
+   */
+  showStatus?: boolean
+}
+
+/**
+ * AppPreview - Live preview component for App templates in Payload admin
+ *
+ * This component uses MDXLiveRenderer with AppComponents from the cockpit
+ * template to provide real-time preview of SaaS application components
+ * (Dashboard, Settings, APIKeys, Webhooks, etc.) as users edit content
+ * in the Payload CMS.
+ *
+ * Features:
+ * - Real-time MDX compilation and rendering
+ * - Full AppComponents support (Dashboard, Settings, APIKeys, Webhooks, etc.)
+ * - Debounced updates to prevent excessive re-compilation
+ * - Graceful error handling with user-friendly error messages
+ * - Loading states with visual feedback
+ * - Integrates seamlessly with Payload's admin UI
+ *
+ * @example
+ * ```tsx
+ * // In a Payload field configuration:
+ * {
+ *   name: 'content',
+ *   type: 'textarea',
+ *   admin: {
+ *     components: {
+ *       Field: (props) => (
+ *         <div>
+ *           <TextareaField {...props} />
+ *           <AppPreview content={props.value} />
+ *         </div>
+ *       ),
+ *     },
+ *   },
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Standalone usage:
+ * <AppPreview
+ *   content={mdxContent}
+ *   className="border rounded-lg p-4"
+ *   debounceMs={500}
+ *   showStatus={true}
+ * />
+ * ```
+ */
+export function AppPreview({
+  content,
+  components: additionalComponents = {},
+  className = '',
+  debounceMs = 300,
+  showStatus = false,
+}: AppPreviewProps) {
+  // Merge default app components with any additional components
+  const mergedComponents = {
+    ...appComponents,
+    ...additionalComponents,
+  }
+
+  return (
+    <div className={className}>
+      {showStatus && (
+        <div
+          style={{
+            padding: '0.5rem 1rem',
+            fontSize: '0.875rem',
+            color: '#666',
+            backgroundColor: '#f9fafb',
+            borderBottom: '1px solid #e5e7eb',
+            fontWeight: 500,
+          }}
+        >
+          App Preview
+        </div>
+      )}
+      <MDXLiveRenderer
+        content={content}
+        components={mergedComponents}
+        debounceMs={debounceMs}
+        loadingComponent={<AppPreviewLoading />}
+        errorComponent={AppPreviewError}
+      />
+    </div>
+  )
+}
+
+/**
+ * Loading component for AppPreview
+ */
+function AppPreviewLoading() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '3rem',
+        backgroundColor: '#f9fafb',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '1rem',
+        }}
+      >
+        <div
+          style={{
+            width: '2rem',
+            height: '2rem',
+            border: '3px solid #e5e7eb',
+            borderTopColor: '#3b82f6',
+            borderRadius: '50%',
+            animation: 'spin 1s linear infinite',
+          }}
+        />
+        <style>{`
+          @keyframes spin {
+            to { transform: rotate(360deg); }
+          }
+        `}</style>
+        <p style={{ color: '#6b7280', fontSize: '0.875rem' }}>
+          Compiling App preview...
+        </p>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Error component for AppPreview
+ */
+function AppPreviewError({ error }: { error: Error }) {
+  return (
+    <div
+      style={{
+        padding: '1.5rem',
+        backgroundColor: '#fef2f2',
+        border: '1px solid #fecaca',
+        borderRadius: '0.5rem',
+        margin: '1rem',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'flex-start',
+          gap: '0.75rem',
+        }}
+      >
+        <div
+          style={{
+            flexShrink: 0,
+            width: '1.25rem',
+            height: '1.25rem',
+            color: '#dc2626',
+          }}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </div>
+        <div style={{ flex: 1 }}>
+          <h3
+            style={{
+              margin: '0 0 0.5rem',
+              fontSize: '1rem',
+              fontWeight: 600,
+              color: '#991b1b',
+            }}
+          >
+            MDX Compilation Error
+          </h3>
+          <pre
+            style={{
+              margin: 0,
+              fontSize: '0.875rem',
+              fontFamily: 'ui-monospace, monospace',
+              color: '#7f1d1d',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word',
+              lineHeight: 1.5,
+            }}
+          >
+            {error.message}
+          </pre>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Factory function to create a Payload field component with AppPreview
+ *
+ * This is a convenience function for adding AppPreview to Payload field
+ * configurations without having to manually wire up the field value.
+ *
+ * @example
+ * ```tsx
+ * import { createAppPreviewField } from '@mdxui/payload/app-preview'
+ *
+ * const AppPreviewField = createAppPreviewField({
+ *   className: 'mt-4',
+ *   showStatus: true,
+ * })
+ *
+ * // Use in collection config:
+ * {
+ *   name: 'content',
+ *   type: 'textarea',
+ *   admin: {
+ *     components: {
+ *       afterInput: [AppPreviewField],
+ *     },
+ *   },
+ * }
+ * ```
+ */
+export function createAppPreviewField(
+  defaultProps: Omit<AppPreviewProps, 'content'>
+) {
+  return function AppPreviewField({ value }: { value: string }) {
+    if (!value) return null
+
+    return <AppPreview content={value} {...defaultProps} />
+  }
+}

package/src/app-preview/index.ts

@@ -0,0 +1,16 @@
+/**
+ * AppPreview - Live preview for App templates
+ *
+ * Real-time MDX rendering of App components (Dashboard, Settings, APIKeys, etc.)
+ * for Payload CMS admin panel.
+ *
+ * @example
+ * ```tsx
+ * import { AppPreview } from '@mdxui/payload/app-preview'
+ *
+ * <AppPreview content={mdxContent} showStatus />
+ * ```
+ */
+
+export { AppPreview, createAppPreviewField } from './AppPreview'
+export type { AppPreviewProps } from './AppPreview'

package/src/auth/AdminAuthWrapper.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { ReactNode } from 'react'
+import { AuthProvider } from './AuthProvider'
+
+/**
+ * Wrapper component for Payload admin that handles WorkOS auth refresh.
+ *
+ * This wraps the admin UI with AuthProvider which:
+ * 1. Monitors auth status every minute
+ * 2. Checks auth on window focus
+ * 3. Redirects to auto-login when token expires (oauth.do handles refresh)
+ */
+export function AdminAuthWrapper({ children }: { children: ReactNode }) {
+  return (
+    <AuthProvider checkInterval={30000}>
+      {children}
+    </AuthProvider>
+  )
+}