@bycrux/editor 0.7.2 → 0.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bycrux/editor",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "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,8 +109,10 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
 
   // ── 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">
+    // 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">
         <div className="w-[96vw] h-[96vh] bg-[var(--editor-bg)] border border-[var(--editor-border)] rounded-2xl shadow-2xl flex overflow-hidden">
 
           {/* Left — slide gallery */}
@@ -135,7 +138,7 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
                       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-[var(--editor-text)] font-mono flex justify-between">
+                    <div className="absolute bottom-0 left-0 right-0 px-2 py-1.5 bg-black text-[11px] text-[var(--editor-text)] font-mono flex justify-between">
                       <span>#{String(i + 1).padStart(2, '0')}</span>
                       <span className="text-[var(--editor-text)]/60">{file}</span>
                     </div>
@@ -172,13 +175,14 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
             </div>
           </div>
         </div>
-      </div>
+      </div>,
+      document.body,
     )
   }
 
   // ── Running / error state — log readout ─────────────────────────────────
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black">
       <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">
 
         <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--editor-border)]">
@@ -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,8 +106,10 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
     onClose()
   }
 
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
+  // 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">
       <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">
 
         {/* Header */}
@@ -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,8 +132,12 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
   }
 
   if (status === 'done' && outputPath) {
-    return (
-      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-md">
+    // 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">
         <div className="w-[96vw] h-[96vh] bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-2xl shadow-2xl flex overflow-hidden">
 
           {/* Left — video */}
@@ -179,12 +184,13 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
             </div>
           </div>
         </div>
-      </div>
+      </div>,
+      document.body,
     )
   }
 
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black">
       <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">
 
         {/* Header */}
@@ -247,6 +253,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
           )}
         </div>
       </div>
-    </div>
+    </div>,
+    document.body,
   )
 }