Skip to content

feat(editor): stage overlay slot + pro capture overlay for studio #465

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wass08 merged 3 commits into from
Jul 6, 2026
Merged

feat(editor): stage overlay slot + pro capture overlay for studio #465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c52fd83
feat(editor): stage overlay slot, preselectable snapshot crop, pro ca…
wass08 Jul 3, 2026
c00945b
feat(editor): standard-capture aspect presets, capture scrim, caption…
wass08 Jul 3, 2026
73fffe3
feat(editor): standard-capture aspect preselect via CaptureMode
wass08 Jul 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/core/src/events/bus.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,11 @@ export interface ThumbnailGenerateEvent {
projectId: string
captureMode?: 'standard' | 'viewport' | 'area'
cropRegion?: { x: number; y: number; width: number; height: number }
/**
* Output size for `standard` captures (center-crop target). Defaults to
* 1920×1080; the capture overlay passes other aspect presets (9:16, 4:3…).
*/
standardSize?: { w: number; h: number }
/**
* When true, snap levels to their true positions before capturing (for a
* consistent auto-thumbnail angle) and defer the capture if the tab is
Expand Down
9 changes: 9 additions & 0 deletions packages/editor/src/components/editor/editor-layout-v2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,11 +150,13 @@ function RightColumn({
toolbarRight,
children,
overlays,
stageOverlay,
}: {
toolbarLeft?: ReactNode
toolbarRight?: ReactNode
children: ReactNode
overlays?: ReactNode
stageOverlay?: ReactNode
}) {
return (
<div
Expand All @@ -174,6 +176,10 @@ function RightColumn({
)}
{/* Canvas area */}
<div className="relative flex-1 overflow-hidden">{children}</div>
{/* Stage overlay — replaces the canvas visually (e.g. studio gallery)
while keeping it mounted. Sits below the viewer toolbar (z-20) so
the stage switch stays reachable. */}
{stageOverlay && <div className="absolute inset-0 z-10">{stageOverlay}</div>}
{/* Overlays scoped to the viewer column. `data-viewer-bounds` marks the
draggable region the floating inspector clamps itself to. */}
{overlays && (
Expand All @@ -200,6 +206,7 @@ export interface EditorLayoutV2Props {
viewerToolbarRight?: ReactNode
viewerContent: ReactNode
overlays?: ReactNode
stageOverlay?: ReactNode
}

export function EditorLayoutV2({
Expand All @@ -211,6 +218,7 @@ export function EditorLayoutV2({
viewerToolbarRight,
viewerContent,
overlays,
stageOverlay,

@cursor cursor Bot Jul 6, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mobile v2 drops stageOverlay

Medium Severity

When EditorLayoutV2 renders for mobile, it calls EditorLayoutMobile without passing the stageOverlay prop. This prevents the stage overlay from appearing and also inadvertently hides the FloatingLevelSelector, leaving mobile users without either.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 73fffe3. Configure here.

}: EditorLayoutV2Props) {
const isCaptureMode = useEditor((s) => s.isCaptureMode)
const isMobile = useIsMobile()
Expand Down Expand Up @@ -246,6 +254,7 @@ export function EditorLayoutV2({
)}
<RightColumn
overlays={overlays}
stageOverlay={stageOverlay}
toolbarLeft={isCaptureMode ? undefined : viewerToolbarLeft}
toolbarRight={isCaptureMode ? undefined : viewerToolbarRight}
>
Expand Down
10 changes: 9 additions & 1 deletion packages/editor/src/components/editor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,12 @@ export interface EditorProps {
sidebarTabs?: (SidebarTab & { component: React.ComponentType })[]
viewerToolbarLeft?: ReactNode
viewerToolbarRight?: ReactNode
/**
* Full-bleed surface swapped in over the 3D canvas (v2) — e.g. the studio
* gallery. The canvas stays mounted underneath (no WebGL re-init) and the
* viewer toolbar stays on top so the host's stage switch remains reachable.
*/
stageOverlay?: ReactNode
/**
* Docked below the node inspector (v2). Hosts mount the "save as preset"
* affordance here so it reads as part of the inspector surface and shows
Expand Down Expand Up @@ -1077,6 +1083,7 @@ export default function Editor({
sidebarTabs,
viewerToolbarLeft,
viewerToolbarRight,
stageOverlay,
inspectorFooter,
projectId,
onLoad,
Expand Down Expand Up @@ -1364,7 +1371,7 @@ export default function Editor({
navbarSlot={navbarSlot}
overlays={
<>
{!isCaptureMode && <FloatingLevelSelector />}
{!(isCaptureMode || stageOverlay) && <FloatingLevelSelector />}
{!(isVersionPreviewMode || isCaptureMode || isStudioMode) && (
<div className="pointer-events-auto">
<ActionMenu />
Expand Down Expand Up @@ -1392,6 +1399,7 @@ export default function Editor({
renderTabContent={renderTabContent}
sidebarOverlay={sidebarOverlay}
sidebarTabs={tabBarTabs}
stageOverlay={stageOverlay}
viewerContent={viewerCanvas}
viewerToolbarLeft={viewerToolbarLeft}
viewerToolbarRight={viewerToolbarRight}
Expand Down
Loading
Loading