feat: integrate sync eng

apps/web/client/src/app/project/[id]/_components/canvas/frame/gesture.tsx

@@ -8,7 +8,7 @@ import { cn } from '@onlook/ui/utils';
 import throttle from 'lodash/throttle';
 import { observer } from 'mobx-react-lite';
 import { useCallback, useEffect, useMemo } from 'react';
-import { RightClickMenu } from './right-click';
+import { RightClickMenu } from '../../right-click-menu';
 
 export const GestureScreen = observer(({ frame, isResizing }: { frame: Frame, isResizing: boolean }) => {
     const editorEngine = useEditorEngine();

apps/web/client/src/app/project/[id]/_components/canvas/frame/index.tsx

@@ -6,9 +6,9 @@ import { colors } from '@onlook/ui/tokens';
 import { debounce } from 'lodash';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useRef, useState } from 'react';
+import { RightClickMenu } from '../../right-click-menu';
 import { GestureScreen } from './gesture';
 import { ResizeHandles } from './resize-handles';
-import { RightClickMenu } from './right-click';
 import { TopBar } from './top-bar';
 import { FrameComponent, type IFrameView } from './view';
 
@@ -20,11 +20,12 @@ export const FrameView = observer(({ frame, isInDragSelection = false }: { frame
     const [hasTimedOut, setHasTimedOut] = useState(false);
     const isSelected = editorEngine.frames.isSelected(frame.id);
 
-    // Check if sandbox is connecting for this frame's branch
     const branchData = editorEngine.branches.getBranchDataById(frame.branchId);
-    const isConnecting = branchData?.sandbox?.session?.isConnecting || branchData?.sandbox?.isIndexing || false;
+    const isConnecting = branchData?.sandbox?.session?.isConnecting ?? false;
+
+    const preloadScriptReady = branchData?.sandbox?.preloadScriptInjected ?? false;
+    const isFrameReady = preloadScriptReady && !(isConnecting && !hasTimedOut);
 
-    // Timeout for connection attempts
     useEffect(() => {
         if (!isConnecting) {
             setHasTimedOut(false);
@@ -33,7 +34,7 @@ export const FrameView = observer(({ frame, isInDragSelection = false }: { frame
 
         const timeoutId = setTimeout(() => {
             const currentBranchData = editorEngine.branches.getBranchDataById(frame.branchId);
-            const stillConnecting = currentBranchData?.sandbox?.session?.isConnecting || currentBranchData?.sandbox?.isIndexing || false;
+            const stillConnecting = currentBranchData?.sandbox?.session?.isConnecting ?? false;
 
             if (stillConnecting) {
                 setHasTimedOut(true);
@@ -70,12 +71,12 @@ export const FrameView = observer(({ frame, isInDragSelection = false }: { frame
                 <FrameComponent key={reloadKey} frame={frame} reloadIframe={reloadIframe} isInDragSelection={isInDragSelection} ref={iFrameRef} />
                 <GestureScreen frame={frame} isResizing={isResizing} />
 
-                {isConnecting && !hasTimedOut && (
+                {!isFrameReady && (
                     <div
                         className="absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-50 rounded-md"
                         style={{ width: frame.dimension.width, height: frame.dimension.height }}
                     >
-                        <div className="flex flex-col items-center gap-3 text-foreground" style={{ transform: `scale(${1 / editorEngine.canvas.scale})` }}>
+                        <div className="flex items-center gap-3 text-foreground" style={{ transform: `scale(${1 / editorEngine.canvas.scale})` }}>
                             <Icons.LoadingSpinner className="animate-spin h-8 w-8" />
                         </div>
                     </div>

apps/web/client/src/app/project/[id]/_components/canvas/frame/top-bar/page-selector.tsx

@@ -10,7 +10,7 @@ import {
 import { Icons } from '@onlook/ui/icons';
 import { Separator } from '@onlook/ui/separator';
 import { cn } from '@onlook/ui/utils';
-import { inferPageFromUrl } from '@onlook/utility';
+import { inferPageFromUrl, pathsEqual } from '@onlook/utility';
 import { observer } from 'mobx-react-lite';
 import React, { useMemo, useState } from 'react';
 import { HoverOnlyTooltip } from '../../../editor-bar/hover-tooltip';
@@ -53,7 +53,7 @@ export const PageSelector = observer(({ frame, className, tooltipSide = "top", s
         const framePathname = new URL(frame.url).pathname;
         return allPages.find(page => {
             const pagePath = page.path === '/' ? '' : page.path;
-            return framePathname === pagePath || framePathname === page.path;
+            return pathsEqual(framePathname, pagePath) || pathsEqual(framePathname, page.path);
         });
     }, [frame.url, allPages]);
 

apps/web/client/src/app/project/[id]/_components/canvas/frame/view.tsx

@@ -125,6 +125,7 @@ export const FrameComponent = observer(
                     messenger,
                     methods: {
                         getFrameId: () => frame.id,
+                        getBranchId: () => frame.branchId,
                         onWindowMutated: () => {
                             editorEngine.frameEvent.handleWindowMutated();
                         },
@@ -158,6 +159,7 @@ export const FrameComponent = observer(
                         const remote = child as unknown as PenpalChildMethods;
                         setPenpalChild(remote);
                         remote.setFrameId(frame.id);
+                        remote.setBranchId(frame.branchId);
                         remote.handleBodyReady();
                         remote.processDom();
                         console.log(`${PENPAL_PARENT_CHANNEL} (${frame.id}) - Penpal connection set `);
@@ -200,6 +202,7 @@ export const FrameComponent = observer(
                 getElementAtLoc: promisifyMethod(penpalChild?.getElementAtLoc),
                 getElementByDomId: promisifyMethod(penpalChild?.getElementByDomId),
                 setFrameId: promisifyMethod(penpalChild?.setFrameId),
+                setBranchId: promisifyMethod(penpalChild?.setBranchId),
                 getElementIndex: promisifyMethod(penpalChild?.getElementIndex),
                 getComputedStyleByDomId: promisifyMethod(penpalChild?.getComputedStyleByDomId),
                 updateElementInstance: promisifyMethod(penpalChild?.updateElementInstance),

apps/web/client/src/app/project/[id]/_components/canvas/index.tsx

@@ -62,7 +62,7 @@ export const Canvas = observer(() => {
             }
 
             // Switch to chat mode when clicking on empty canvas space during code editing
-            if (editorEngine.state.rightPanelTab === EditorTabValue.DEV) {
+            if (editorEngine.state.rightPanelTab === EditorTabValue.CODE) {
                 editorEngine.state.rightPanelTab = EditorTabValue.CHAT;
             }
         } else {

apps/web/client/src/app/project/[id]/_components/canvas/overlay/elements/buttons/code.tsx

@@ -6,7 +6,7 @@ import { observer } from 'mobx-react-lite';
 
 export const OverlayOpenCode = observer(({ isInputting }: { isInputting: boolean }) => {
     const editorEngine = useEditorEngine();
-    const isDevMode = editorEngine.state.rightPanelTab === EditorTabValue.DEV;
+    const isDevMode = editorEngine.state.rightPanelTab === EditorTabValue.CODE;
     const oid = editorEngine.elements.selected[0]?.oid;
 
     if (isDevMode || isInputting || !oid) {

apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/font/font-family-selector.tsx

@@ -7,11 +7,11 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@onlook/
 import { Icons } from '@onlook/ui/icons';
 import { toNormalCase } from '@onlook/utility';
 import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useDropdownControl } from '../../hooks/use-dropdown-manager';
-import { ToolbarButton } from '../../toolbar-button';
 import { useTextControl } from '../../hooks/use-text-control';
 import { HoverOnlyTooltip } from '../../hover-tooltip';
+import { ToolbarButton } from '../../toolbar-button';
 import { FontFamily } from './font-family';
 
 export const FontFamilySelector = observer(() => {
@@ -26,6 +26,14 @@ export const FontFamilySelector = observer(() => {
         font.family.toLowerCase().includes(search.toLowerCase()),
     );
 
+    // TODO: use file system like code tab
+    useEffect(() => {
+        if (!editorEngine.activeSandbox.session.provider) {
+            return;
+        }
+        editorEngine.font.init();
+    }, [editorEngine.activeSandbox.session.provider]);
+
     const handleClose = () => {
         onOpenChange(false);
         editorEngine.state.brandTab = null;

apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/font-panel/index.tsx

@@ -28,6 +28,11 @@ const FontPanel = observer(() => {
         setIsUploadModalOpen(true);
     };
 
+    // TODO: use file system like code tab
+    useEffect(() => {
+        editorEngine.font.init();
+    }, [editorEngine.activeSandbox.session.provider]);
+
     const handleFontUpload = async (fonts: FontFile[]) => {
         try {
             const success = await fontManager.uploadFonts(fonts);