@@ -10,6 +10,8 @@ import {
1010 screenshotZoomAtom ,
1111 configAtom ,
1212 orientationAtom ,
13+ gradientOptionsAtom ,
14+ isAnalyzingColorsAtom ,
1315 type Orientation ,
1416} from "@/hooks/atoms" ;
1517import {
@@ -42,7 +44,6 @@ interface PlaygroundWorkspaceProps {
4244 onEmptyStateClick : ( ) => void ;
4345 canvasWidth : number ;
4446 canvasHeight : number ;
45- isAnalyzingColors : boolean ;
4647 showFocusHint : boolean ;
4748 hasScreenshot : boolean ;
4849}
@@ -56,19 +57,22 @@ export function PlaygroundWorkspace({
5657 onEmptyStateClick,
5758 canvasHeight,
5859 canvasWidth,
59- isAnalyzingColors,
6060 showFocusHint,
6161 hasScreenshot,
6262} : PlaygroundWorkspaceProps ) {
6363 const [ screenshotZoom , setScreenshotZoom ] = useAtom ( screenshotZoomAtom ) ;
6464 const [ orientation , setOrientation ] = useAtom ( orientationAtom ) ;
6565 const config = useAtomValue ( configAtom ) ;
6666 const setConfig = useSetAtom ( configAtom ) ;
67+ const gradientOptions = useAtomValue ( gradientOptionsAtom ) ;
68+ const isAnalyzingColors = useAtomValue ( isAnalyzingColorsAtom ) ;
6769 const [ bottomWhitespace , setBottomWhitespace ] = useState ( 0 ) ;
6870 const isMobile = useMobileDetection ( ) ;
6971 const hasAutoSetOrientation = useRef ( false ) ;
7072
71- const isBackdropLayout = config . layoutId === "adaptive-stage" || config . layoutId === "full-visual" ;
73+ const isBackdropLayout =
74+ config . layoutId === "adaptive-stage" || config . layoutId === "full-visual" ;
75+ const shouldHoldCanvas = hasScreenshot && ( isAnalyzingColors || gradientOptions . length === 0 ) ;
7276
7377 // Set mobile as default orientation on mobile devices
7478 useEffect ( ( ) => {
@@ -81,15 +85,12 @@ export function PlaygroundWorkspace({
8185 hasAutoSetOrientation . current = true ;
8286 } , [ isMobile , orientation , setOrientation ] ) ;
8387
84- const handleViewportMetricsChange = useCallback (
85- ( metrics : { bottomWhitespace : number } ) => {
86- const nextValue = Math . round ( metrics . bottomWhitespace ) ;
87- setBottomWhitespace ( ( previousValue ) =>
88- previousValue === nextValue ? previousValue : nextValue
89- ) ;
90- } ,
91- [ ]
92- ) ;
88+ const handleViewportMetricsChange = useCallback ( ( metrics : { bottomWhitespace : number } ) => {
89+ const nextValue = Math . round ( metrics . bottomWhitespace ) ;
90+ setBottomWhitespace ( ( previousValue ) =>
91+ previousValue === nextValue ? previousValue : nextValue ,
92+ ) ;
93+ } , [ ] ) ;
9394
9495 const handleOrientationChange = ( newOrientation : Orientation ) => {
9596 // Check if current layout supports new orientation
@@ -125,8 +126,8 @@ export function PlaygroundWorkspace({
125126 fontSize : config . fontSize ,
126127 screenshotFrame : config . screenshotFrame ,
127128 } ,
128- { preserveEmptyText : true }
129- )
129+ { preserveEmptyText : true } ,
130+ ) ,
130131 ) ;
131132 layoutChanged = compatibleLayout . id !== previousLayoutId ;
132133 newLayoutId = compatibleLayout . id ;
@@ -156,7 +157,7 @@ export function PlaygroundWorkspace({
156157 "h-7 w-7 rounded transition-colors" ,
157158 orientation === "mobile"
158159 ? "bg-foreground text-background shadow-sm"
159- : "text-muted-foreground hover:text-foreground"
160+ : "text-muted-foreground hover:text-foreground" ,
160161 ) }
161162 >
162163 < Smartphone className = "h-3.5 w-3.5" />
@@ -172,7 +173,7 @@ export function PlaygroundWorkspace({
172173 "h-7 w-7 rounded transition-colors" ,
173174 orientation === "desktop"
174175 ? "bg-foreground text-background shadow-sm"
175- : "text-muted-foreground hover:text-foreground"
176+ : "text-muted-foreground hover:text-foreground" ,
176177 ) }
177178 >
178179 < Monitor className = "h-3.5 w-3.5" />
@@ -191,7 +192,7 @@ export function PlaygroundWorkspace({
191192 "h-7 w-7 rounded transition-colors" ,
192193 orientation === "desktop"
193194 ? "bg-foreground text-background shadow-sm"
194- : "text-muted-foreground hover:text-foreground"
195+ : "text-muted-foreground hover:text-foreground" ,
195196 ) }
196197 >
197198 < Monitor className = "h-3.5 w-3.5" />
@@ -207,7 +208,7 @@ export function PlaygroundWorkspace({
207208 "h-7 w-7 rounded transition-colors" ,
208209 orientation === "mobile"
209210 ? "bg-foreground text-background shadow-sm"
210- : "text-muted-foreground hover:text-foreground"
211+ : "text-muted-foreground hover:text-foreground" ,
211212 ) }
212213 >
213214 < Smartphone className = "h-3.5 w-3.5" />
@@ -231,8 +232,8 @@ export function PlaygroundWorkspace({
231232 : "border-border text-muted-foreground hover:border-foreground/50 hover:text-foreground" ,
232233 ) }
233234 >
234- { isAspectLocked
235- ? `Locked · ${ orientation === "mobile" ? "Mobile" : "16:9" }
235+ { isAspectLocked
236+ ? `Locked · ${ orientation === "mobile" ? "Mobile" : "16:9" }
236237 : `Lock to ${ orientation === "mobile" ? "Mobile" : "16:9" } }
237238 </ Button >
238239 ) : null }
@@ -243,15 +244,20 @@ export function PlaygroundWorkspace({
243244 className = { orientation === "mobile" ? "max-h-[85%]" : undefined }
244245 surfaceWidth = { canvasWidth }
245246 surfaceHeight = { canvasHeight }
246- isLoading = { isAnalyzingColors }
247- loadingText = "Analyzing colors..."
248247 onViewportMetricsChange = { handleViewportMetricsChange }
249248 >
250- < CoverPreview
251- showEmptyState = { showEmptyState }
252- showLoadingState = { showLoadingState }
253- onEmptyStateClick = { onEmptyStateClick }
254- />
249+ < div
250+ className = { cn (
251+ "transition-opacity duration-300" ,
252+ shouldHoldCanvas ? "opacity-0 pointer-events-none" : "opacity-100" ,
253+ ) }
254+ >
255+ < CoverPreview
256+ showEmptyState = { showEmptyState }
257+ showLoadingState = { showLoadingState }
258+ onEmptyStateClick = { onEmptyStateClick }
259+ />
260+ </ div >
255261 </ PreviewViewport >
256262 { showFocusHint ? (
257263 < div className = "pointer-events-none absolute inset-x-0 top-4 flex justify-center" >
@@ -262,13 +268,11 @@ export function PlaygroundWorkspace({
262268 ) : null }
263269 </ div >
264270
265- { hasScreenshot ? (
271+ { hasScreenshot && ! shouldHoldCanvas ? (
266272 < div className = "relative z-10" >
267273 < div
268274 style = {
269- bottomWhitespace
270- ? { transform : `translateY(-${ bottomWhitespace } }
271- : undefined
275+ bottomWhitespace ? { transform : `translateY(-${ bottomWhitespace } } : undefined
272276 }
273277 >
274278 < ScreenshotZoomSlider
0 commit comments