Add NotebookCell component

packages/mdxe/package.json

@@ -14,7 +14,8 @@
     "dist",
     "src/app",
     "src/config",
-    "src/payload"
+    "src/payload",
+    "src/components"
   ],
   "scripts": {
     "build": "tsc && chmod +x bin/mdxe.js",
@@ -44,6 +45,8 @@
     "react-dom": "^19.1.0",
     "sqlite3": "^5.1.6",
     "tailwindcss": "^3.4.1",
+    "@monaco-editor/react": "^4.5.1",
+    "monaco-editor": "^0.38.0",
     "undici": "^7.8.0",
     "vitest": "^3.1.3"
   },

packages/mdxe/src/components/NotebookCell.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import Editor from '@monaco-editor/react'
+import { useDebouncedValue } from './useDebouncedValue'
+
+export interface NotebookCellProps {
+  initialCode?: string
+  language?: string
+  className?: string
+  debounce?: number
+}
+
+export const NotebookCell = ({ initialCode = '', language = 'javascript', className, debounce = 300 }: NotebookCellProps) => {
+  const [code, setCode] = useState(initialCode)
+  const [output, setOutput] = useState('')
+
+  const debouncedCode = useDebouncedValue(code, debounce)
+
+  useEffect(() => {
+    try {
+      const result = new Function(debouncedCode)()
+      if (result instanceof Promise) {
+        result.then((res) => setOutput(String(res))).catch((err) => setOutput(String(err)))
+      } else {
+        setOutput(String(result))
+      }
+    } catch (err) {
+      setOutput(String(err))
+    }
+  }, [debouncedCode])
+
+  return (
+    <div className={`notebook-cell border rounded-md my-4 ${className ?? ''}`.trim()}>
+      <Editor height='200px' defaultLanguage={language} value={code} onChange={(value) => setCode(value || '')} options={{ minimap: { enabled: false } }} />
+      <div className='preview p-2 bg-gray-50 border-t whitespace-pre-wrap font-mono text-sm'>{output}</div>
+    </div>
+  )
+}
+
+export default NotebookCell

packages/mdxe/src/components/notebookCell.css

@@ -0,0 +1,3 @@
+.notebook-cell .monaco-editor {
+  border-bottom: 1px solid #e5e7eb; /* tailwind gray-200 */
+}

packages/mdxe/src/components/useDebouncedValue.ts

@@ -0,0 +1,12 @@
+import { useState, useEffect } from 'react'
+
+export function useDebouncedValue<T>(value: T, delay: number): T {
+  const [debounced, setDebounced] = useState(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delay)
+    return () => clearTimeout(timer)
+  }, [value, delay])
+
+  return debounced
+}

packages/mdxe/src/index.ts

@@ -2,15 +2,11 @@ export const version = '0.1.0'
 
 export { useMDXComponents } from './app/mdx-components'
 
+export { NotebookCell } from './components/NotebookCell'
+export { useDebouncedValue } from './components/useDebouncedValue'
+
 export { types } from './config/types.js'
 
 // export { createPayloadClient, getPayloadConfig } from './payload'
 
-export { 
-  isDirectory, 
-  isMarkdownFile, 
-  findIndexFile, 
-  resolvePath, 
-  getAllMarkdownFiles, 
-  filePathToRoutePath 
-} from './utils/file-resolution.js'
+export { isDirectory, isMarkdownFile, findIndexFile, resolvePath, getAllMarkdownFiles, filePathToRoutePath } from './utils/file-resolution.js'