@bycrux/editor 0.7.2 → 0.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bycrux/editor",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "private": false,
   "type": "module",
   "exports": {

package/src/carousel/CarouselRenderModal.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
 import type { EditorAdapter, Project } from '../types'
 
 interface CarouselRenderModalProps {
@@ -108,7 +109,9 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
 
   // ── Done state — gallery + zip download ─────────────────────────────────
   if (status === 'done' && outputDir) {
-    return (
+    // Portal to document.body (see RenderModal): a transformed host ancestor
+    // would otherwise trap this `fixed` overlay and center the panel off-screen.
+    return createPortal(
       <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-[var(--editor-bg)] border border-[var(--editor-border)] rounded-2xl shadow-2xl flex overflow-hidden">
 
@@ -172,12 +175,13 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
             </div>
           </div>
         </div>
-      </div>
+      </div>,
+      document.body,
     )
   }
 
   // ── Running / error state — log readout ─────────────────────────────────
-  return (
+  return createPortal(
     <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-[var(--editor-surface)] border border-[var(--editor-border)] rounded-xl shadow-2xl flex flex-col overflow-hidden">
 
@@ -238,6 +242,7 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
           )}
         </div>
       </div>
-    </div>
+    </div>,
+    document.body,
   )
 }

package/src/video/CaptionRegenModal.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import type { EditorAdapter, Project } from '../types'
 import type { Captions } from '../schema'
 
@@ -105,7 +106,9 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
     onClose()
   }
 
-  return (
+  // Portal to document.body so a transformed host ancestor can't trap this
+  // `fixed` overlay and push the panel off-screen (see RenderModal).
+  return createPortal(
     <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-[var(--editor-surface)] border border-[var(--editor-border)] rounded-xl shadow-2xl flex flex-col overflow-hidden">
 
@@ -172,6 +175,7 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
           )}
         </div>
       </div>
-    </div>
+    </div>,
+    document.body,
   )
 }

package/src/video/RenderModal.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
 import type { EditorAdapter, Project } from '../types'
 
 interface RenderModalProps<P extends Project = Project> {
@@ -131,7 +132,11 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
   }
 
   if (status === 'done' && outputPath) {
-    return (
+    // Portal to document.body: a transformed/filtered host ancestor (e.g. the
+    // Los Parceros app-shell wrapper) would otherwise become the containing
+    // block for this `fixed` overlay, sizing it to the scrolled page height and
+    // centering the panel off-screen below the fold.
+    return createPortal(
       <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-[var(--editor-surface)] border border-[var(--editor-border)] rounded-2xl shadow-2xl flex overflow-hidden">
 
@@ -179,11 +184,12 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
             </div>
           </div>
         </div>
-      </div>
+      </div>,
+      document.body,
     )
   }
 
-  return (
+  return createPortal(
     <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-[var(--editor-surface)] border border-[var(--editor-border)] rounded-xl shadow-2xl flex flex-col overflow-hidden">
 
@@ -247,6 +253,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
           )}
         </div>
       </div>
-    </div>
+    </div>,
+    document.body,
   )
 }