Deploy

src/components/VulaSandboxBoundary.tsx

@@ -0,0 +1,43 @@
+'use client'
+import { Component, ErrorInfo, ReactNode } from 'react'
+
+interface Props { children: ReactNode }
+interface State { hasError: boolean; error: string }
+
+export class VulaSandboxBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false, error: '' }
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error: error.message }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    try {
+      const parent = typeof window !== 'undefined' && window !== window.parent ? window.parent : null
+      if (parent) {
+        parent.postMessage(
+          { type: 'VULA_SANDBOX_ERROR', error: error.message, stack: error.stack, componentStack: info.componentStack },
+          '*'
+        )
+      }
+    } catch (_) { /* cross-origin postMessage can throw — swallow */ }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b', color: '#71717a', fontFamily: 'system-ui, -apple-system, sans-serif', padding: '2rem', textAlign: 'center' }}>
+          <div>
+            <div style={{ fontSize: '2rem', marginBottom: '0.75rem' }}>⚡</div>
+            <p style={{ color: '#f97316', fontWeight: 600, margin: '0 0 0.5rem' }}>Fixing detected issue…</p>
+            <p style={{ fontSize: '0.75rem', color: '#52525b', maxWidth: '28rem', margin: '0 auto' }}>{this.state.error}</p>
+          </div>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}