@devbycrux/editor 0.1.0

package/src/carousel/CarouselRenderModal.tsx

@@ -0,0 +1,243 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import type { EditorAdapter, Project } from '../types'
+
+interface CarouselRenderModalProps {
+  projectId: string
+  /** Adapter drives the render stream and path→URL resolution. */
+  adapter: EditorAdapter<Project>
+  /** Number of slides in the project — drives the gallery row count. */
+  slidesCount: number
+  /** Slide resolution [width, height] — drives thumbnail aspect ratio. */
+  resolution: [number, number]
+  /** Fired when the modal closes from a finished or errored state. */
+  onClose: () => void
+  /** Fired when the user cancels an in-progress render. Falls back to onClose. */
+  onCancel?: () => void
+  /**
+   * Host-supplied export controls (e.g. a "Download all (.zip)" link). Rendered
+   * in the done-state info panel. The package no longer hardcodes host URLs.
+   */
+  exportActions?: ReactNode
+}
+
+function slideFile(index: number): string {
+  return `slide_${String(index + 1).padStart(2, '0')}.png`
+}
+
+function LogLine({ text }: { text: string }) {
+  const t = text.replace(/^\[render\]\s*/, '')
+  let color = 'text-gray-400'
+  if (/done|complete|→/i.test(t))           color = 'text-green-400'
+  else if (/rendering|launching|bundling/i.test(t)) color = 'text-sky-400'
+  else if (/error|fail/i.test(t))           color = 'text-red-400'
+
+  const prefix = text.startsWith('[render]')
+    ? <span className="text-gray-600">[render] </span>
+    : null
+
+  return (
+    <span className={`leading-relaxed whitespace-pre-wrap break-all ${color}`}>
+      {prefix}{t}
+    </span>
+  )
+}
+
+export default function CarouselRenderModal({ projectId, adapter, slidesCount, resolution, onClose, onCancel, exportActions }: CarouselRenderModalProps) {
+  const [logs, setLogs]         = useState<string[]>([])
+  const [status, setStatus]     = useState<'running' | 'done' | 'error'>('running')
+  const [outputDir, setOutDir]  = useState<string | null>(null)
+  const [errorMsg, setError]    = useState<string | null>(null)
+  const logRef                  = useRef<HTMLDivElement>(null)
+  const cancelledRef            = useRef(false)
+  const unmountedRef            = useRef(false)
+  const cleanupTimerRef         = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    // StrictMode-safe render trigger — see RenderModal.tsx for the long-form
+    // comment.
+    if (cleanupTimerRef.current !== null) {
+      clearTimeout(cleanupTimerRef.current)
+      cleanupTimerRef.current = null
+      unmountedRef.current = false
+      return scheduleCleanup
+    }
+
+    unmountedRef.current = false
+    cancelledRef.current = false
+    ;(async () => {
+      try {
+        for await (const ev of adapter.render(projectId)) {
+          if (cancelledRef.current || unmountedRef.current) break
+          if (ev.type === 'log') setLogs(l => [...l, ev.message])
+          else if (ev.type === 'done') { setOutDir(ev.outputPath); setStatus('done') }
+          else if (ev.type === 'error') { setError(ev.message); setStatus('error') }
+        }
+      } catch (e) {
+        if (!cancelledRef.current && !unmountedRef.current) {
+          setError(String(e)); setStatus('error')
+        }
+      }
+    })()
+    return scheduleCleanup
+
+    function scheduleCleanup() {
+      cleanupTimerRef.current = setTimeout(() => {
+        cleanupTimerRef.current = null
+        unmountedRef.current = true
+        cancelledRef.current = true
+      }, 0)
+    }
+  }, [projectId, adapter])
+
+  useEffect(() => {
+    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight
+  }, [logs])
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && status !== 'running') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [status, onClose])
+
+  function handleCancel() {
+    cancelledRef.current = true
+    ;(onCancel ?? onClose)()
+  }
+
+  // ── Done state — gallery + zip download ─────────────────────────────────
+  if (status === 'done' && outputDir) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-md">
+        <div className="w-[96vw] h-[96vh] bg-gray-950 border border-gray-800 rounded-2xl shadow-2xl flex overflow-hidden">
+
+          {/* Left — slide gallery */}
+          <div className="flex-1 bg-black flex items-center justify-center overflow-auto p-8">
+            <div
+              className="grid gap-4 w-full max-w-6xl"
+              style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))' }}
+            >
+              {Array.from({ length: slidesCount }).map((_, i) => {
+                const file = slideFile(i)
+                const url = adapter.fileUrl(`${outputDir}/${file}`)
+                return (
+                  <a
+                    key={i}
+                    href={url}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="group relative block rounded-lg overflow-hidden border border-gray-800 hover:border-gray-600 transition-colors bg-gray-900"
+                  >
+                    <img
+                      src={url}
+                      alt={file}
+                      className="block w-full h-auto"
+                      style={{ aspectRatio: `${resolution[0]} / ${resolution[1]}` }}
+                    />
+                    <div className="absolute bottom-0 left-0 right-0 px-2 py-1.5 bg-black/70 backdrop-blur-sm text-[11px] text-gray-300 font-mono flex justify-between">
+                      <span>#{String(i + 1).padStart(2, '0')}</span>
+                      <span className="text-gray-500">{file}</span>
+                    </div>
+                  </a>
+                )
+              })}
+            </div>
+          </div>
+
+          {/* Right — info panel */}
+          <div className="w-72 shrink-0 flex flex-col border-l border-gray-800">
+            <div className="flex items-center justify-between px-5 py-4 border-b border-gray-800">
+              <div className="flex items-center gap-2.5">
+                <span className="w-2 h-2 rounded-full bg-green-400" />
+                <div>
+                  <p className="text-sm font-semibold text-white">Render complete</p>
+                  <p className="text-xs text-gray-400">
+                    {slidesCount} slide{slidesCount === 1 ? '' : 's'} ready.
+                  </p>
+                </div>
+              </div>
+              <button onClick={onClose} className="text-gray-500 hover:text-white transition-colors text-lg leading-none">×</button>
+            </div>
+
+            <div className="flex flex-col gap-3 p-5 flex-1">
+              <p className="text-xs font-mono text-gray-500 break-all leading-relaxed">{outputDir}</p>
+              {exportActions}
+              <button
+                onClick={onClose}
+                className="w-full text-center text-sm px-4 py-2.5 rounded-lg bg-gray-800 border border-gray-700 text-gray-300 hover:bg-gray-700 transition-colors"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // ── Running / error state — log readout ─────────────────────────────────
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
+      <div className="w-full max-w-3xl bg-gray-900 border border-gray-700 rounded-xl shadow-2xl flex flex-col overflow-hidden">
+
+        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-800">
+          <div className="flex items-center gap-2.5">
+            {status === 'running' && <span className="w-2 h-2 rounded-full bg-amber-400 animate-pulse" />}
+            {status === 'error'   && <span className="w-2 h-2 rounded-full bg-red-400" />}
+            <div className="flex flex-col gap-0.5">
+              <h2 className="text-sm font-semibold text-white">
+                {status === 'running' ? 'Rendering slides…' : 'Render failed'}
+              </h2>
+            </div>
+          </div>
+          {status !== 'running' && (
+            <button onClick={onClose} className="text-gray-500 hover:text-white transition-colors text-lg leading-none">×</button>
+          )}
+        </div>
+
+        <div className="relative">
+          <button
+            onClick={() => navigator.clipboard.writeText(logs.join('\n') + (errorMsg ? '\n' + errorMsg : ''))}
+            className="absolute top-2 right-2 z-10 text-[10px] px-2 py-0.5 rounded bg-gray-800 border border-gray-700 text-gray-400 hover:text-white hover:border-gray-500 transition-colors"
+            title="Copy logs"
+          >
+            Copy
+          </button>
+          <div
+            ref={logRef}
+            className="h-96 overflow-y-auto px-4 py-3 font-mono text-[11px] text-gray-300 bg-gray-950 flex flex-col gap-0.5"
+          >
+            {logs.length === 0 && status === 'running' && (
+              <span className="text-gray-600 italic">Starting render engine…</span>
+            )}
+            {logs.map((line, i) => (
+              <LogLine key={i} text={line} />
+            ))}
+            {status === 'error' && errorMsg && (
+              <span className="text-red-400 mt-1">{errorMsg}</span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-gray-800">
+          {status === 'running' ? (
+            <button
+              onClick={handleCancel}
+              className="text-sm px-4 py-1.5 rounded-md bg-gray-800 border border-gray-700 text-gray-300 hover:bg-red-900/40 hover:border-red-700 hover:text-red-300 transition-colors"
+            >
+              Cancel
+            </button>
+          ) : (
+            <button
+              onClick={onClose}
+              className="text-sm px-4 py-1.5 rounded-md bg-gray-800 border border-gray-700 text-white hover:bg-gray-700 transition-colors"
+            >
+              Close
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/carousel/OverlayErrorBoundary.tsx

@@ -0,0 +1,99 @@
+/**
+ * OverlayErrorBoundary — catches render-phase errors thrown by compiled overlay JSX
+ * so a single broken overlay can't crash the whole editor.
+ *
+ * overlay-eval's try/catch only wraps the synchronous factory call. If the factory
+ * returns an element whose component is undefined (e.g. `Ph.CircuitBoard` — not a real
+ * Phosphor name), React throws minified error #130 during reconciliation, escaping
+ * the factory's try/catch and unmounting the entire app tree. This boundary contains
+ * that fault and shows the broken overlay's filename instead.
+ *
+ * Auto-recovery:
+ *   - `watchPath` + `watchFile`: when the host injects a `watchFile` watcher, the
+ *     boundary subscribes to `watchPath` and clears the error on file change, so
+ *     editing the overlay's source recovers the preview without a page reload.
+ *     The package opens NO transport itself — without `watchFile` it simply
+ *     doesn't watch (a non-Montaj host gets a no-op, not an `/api/files/stream`
+ *     EventSource).
+ *   - `resetKey`: clears the error whenever this value changes between renders. Use
+ *     for non-path-backed sources like caption styles or template ids.
+ */
+
+import { Component, type ErrorInfo, type ReactNode } from 'react'
+
+interface Props {
+  /** Filename or label shown in the fallback UI. */
+  label: string
+  /** Optional host path to watch — clears the error on file change (needs `watchFile`). */
+  watchPath?: string
+  /**
+   * Optional host file watcher (from the adapter). Subscribes to `watchPath` and
+   * returns an unsubscribe. Absent → no watch is opened.
+   */
+  watchFile?: (path: string, onChange: () => void) => () => void
+  /** Optional reset key — clears the error when its value changes between renders. */
+  resetKey?: string | number
+  children: ReactNode
+}
+
+interface State {
+  error: Error | null
+}
+
+export default class OverlayErrorBoundary extends Component<Props, State> {
+  private unwatch: (() => void) | null = null
+  state: State = { error: null }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.warn(`[OverlayErrorBoundary] ${this.props.label} (render):`, error, info.componentStack)
+  }
+
+  componentDidMount() {
+    this.openWatcher()
+  }
+
+  componentDidUpdate(prev: Props) {
+    if (prev.watchPath !== this.props.watchPath || prev.watchFile !== this.props.watchFile) {
+      this.closeWatcher()
+      this.openWatcher()
+    }
+    if (this.state.error && prev.resetKey !== this.props.resetKey) {
+      this.setState({ error: null })
+    }
+  }
+
+  componentWillUnmount() {
+    this.closeWatcher()
+  }
+
+  private openWatcher() {
+    const { watchPath, watchFile } = this.props
+    if (!watchPath || !watchFile) return
+    this.unwatch = watchFile(watchPath, () => {
+      if (this.state.error) this.setState({ error: null })
+    })
+  }
+
+  private closeWatcher() {
+    this.unwatch?.()
+    this.unwatch = null
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div className="absolute inset-0 flex items-end justify-center p-2 pointer-events-none z-50">
+          <div className="bg-red-950/85 border border-red-700 text-red-300 text-[11px] px-3 py-2 rounded font-mono max-w-full">
+            <div className="truncate">overlay error: {this.props.label}</div>
+            <div className="truncate opacity-75">{this.state.error.message}</div>
+          </div>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}

package/src/carousel/OverlayPicker.tsx

@@ -0,0 +1,145 @@
+import { useEffect, useRef, useState } from 'react'
+import type { Project, OverlayElement, GlobalOverlay, EditorAdapter } from '../types'
+
+// TODO (v2): live thumbnail rendering for each overlay card
+// TODO (v2): respect overlay staticFrame when rendering thumbnails — requires API extension
+
+interface Props {
+  open: boolean
+  onClose: () => void
+  project: Project
+  adapter: EditorAdapter<Project>
+  onPick: (element: OverlayElement) => void
+}
+
+export default function OverlayPicker({ open, onClose, project, adapter, onPick }: Props) {
+  const [overlays, setOverlays] = useState<GlobalOverlay[]>([])
+  const [loaded, setLoaded] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  // fetchingRef prevents concurrent fetches; loaded state prevents re-fetch after success
+  const fetchingRef = useRef(false)
+
+  useEffect(() => {
+    if (!open || loaded || fetchingRef.current) return
+    fetchingRef.current = true
+    setLoading(true)
+    setError(null)
+
+    const promises: Promise<GlobalOverlay[]>[] = [adapter.listGlobalOverlays()]
+    if (project.profile) {
+      promises.push(adapter.listProfileOverlays?.(project.profile) ?? Promise.resolve([]))
+    }
+
+    Promise.all(promises)
+      .then(results => {
+        // Combine and dedupe by jsxPath
+        const seen = new Set<string>()
+        const combined: GlobalOverlay[] = []
+        for (const list of results) {
+          for (const o of list) {
+            if (!seen.has(o.jsxPath)) {
+              seen.add(o.jsxPath)
+              combined.push(o)
+            }
+          }
+        }
+        setOverlays(combined)
+        setLoaded(true)
+      })
+      .catch(e => setError(e instanceof Error ? e.message : String(e)))
+      // fetchingRef reset in finally so a failed fetch can be retried on next open
+      .finally(() => { fetchingRef.current = false; setLoading(false) })
+  }, [open, loaded, project.profile])
+
+  // Reset loaded state when closed so next open re-fetches fresh data
+  useEffect(() => {
+    if (!open) setLoaded(false)
+  }, [open])
+
+  // Escape key to close
+  useEffect(() => {
+    if (!open) return
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [open, onClose])
+
+  if (!open) return null
+
+  function handlePick(overlay: GlobalOverlay) {
+    const [w, h] = project.settings.resolution
+    const elementW = 800
+    const elementH = 200
+    const durationProp = overlay.props.find(p => p.name === 'duration')
+    const duration = typeof durationProp?.default === 'number' ? durationProp.default : 60
+    const props = Object.fromEntries(
+      overlay.props
+        .filter(p => p.default !== undefined)
+        .map(p => [p.name, p.default])
+    )
+    const element: OverlayElement = {
+      id: crypto.randomUUID(),
+      type: 'overlay',
+      overlay: { template: overlay.jsxPath, props },
+      frame: Math.max(0, duration - 1),
+      x: Math.round(w / 2 - elementW / 2),
+      y: Math.round(h / 2 - elementH / 2),
+      w: elementW,
+      h: elementH,
+      rotation: 0,
+    }
+    onPick(element)
+    onClose()
+  }
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose() }}
+    >
+      <div className="bg-gray-900 border border-gray-700 rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col overflow-hidden">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-800">
+          <h2 className="text-sm font-semibold text-white">Add Overlay</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-500 hover:text-white transition-colors text-lg leading-none"
+          >
+            ×
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-4">
+          {loading && (
+            <div className="text-center text-gray-500 text-sm py-8">Loading overlays…</div>
+          )}
+          {error && (
+            <div className="text-center text-red-400 text-sm py-8">{error}</div>
+          )}
+          {!loading && !error && overlays.length === 0 && (
+            <div className="text-center text-gray-500 text-sm py-8">No overlays available</div>
+          )}
+          {!loading && !error && overlays.length > 0 && (
+            <div className="grid grid-cols-3 gap-3">
+              {overlays.map(overlay => (
+                <button
+                  key={overlay.jsxPath}
+                  onClick={() => handlePick(overlay)}
+                  className="text-left p-3 bg-gray-800 hover:bg-gray-700 border border-gray-700 hover:border-gray-500 rounded-lg transition-colors"
+                >
+                  <div className="text-sm font-medium text-white truncate">{overlay.name}</div>
+                  {overlay.group && (
+                    <div className="text-xs text-blue-400 mt-0.5 truncate">{overlay.group}</div>
+                  )}
+                  {overlay.description && (
+                    <div className="text-xs text-gray-400 mt-1 line-clamp-2">{overlay.description}</div>
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}