feat: add branching

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

@@ -1,7 +1,7 @@
 import { useEditorEngine } from '@/components/store/editor';
 import type { FrameData } from '@/components/store/editor/frames';
 import { getRelativeMousePositionToFrameView } from '@/components/store/editor/overlay/utils';
-import type { DomElement, ElementPosition, WebFrame } from '@onlook/models';
+import type { DomElement, ElementPosition, Frame } from '@onlook/models';
 import { EditorMode, MouseAction } from '@onlook/models';
 import { toast } from '@onlook/ui/sonner';
 import { cn } from '@onlook/ui/utils';
@@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite';
 import { useCallback, useEffect, useMemo } from 'react';
 import { RightClickMenu } from './right-click';
 
-export const GestureScreen = observer(({ frame, isResizing }: { frame: WebFrame, isResizing: boolean }) => {
+export const GestureScreen = observer(({ frame, isResizing }: { frame: Frame, isResizing: boolean }) => {
     const editorEngine = useEditorEngine();
 
     const getFrameData: () => FrameData | undefined = useCallback(() => {
@@ -94,19 +94,19 @@ export const GestureScreen = observer(({ frame, isResizing }: { frame: WebFrame,
         () =>
             throttle(async (e: React.MouseEvent<HTMLDivElement>) => {
 
-            if (editorEngine.move.shouldDrag) {
-                await editorEngine.move.drag(e, getRelativeMousePosition);
-            } else if (
-                editorEngine.state.editorMode === EditorMode.DESIGN ||
-                ((editorEngine.state.editorMode === EditorMode.INSERT_DIV ||
-                    editorEngine.state.editorMode === EditorMode.INSERT_TEXT ||
-                    editorEngine.state.editorMode === EditorMode.INSERT_IMAGE) &&
-                    !editorEngine.insert.isDrawing)
-            ) {
-                await handleMouseEvent(e, MouseAction.MOVE);
-            } else if (editorEngine.insert.isDrawing) {
-                editorEngine.insert.draw(e);
-            }
+                if (editorEngine.move.shouldDrag) {
+                    await editorEngine.move.drag(e, getRelativeMousePosition);
+                } else if (
+                    editorEngine.state.editorMode === EditorMode.DESIGN ||
+                    ((editorEngine.state.editorMode === EditorMode.INSERT_DIV ||
+                        editorEngine.state.editorMode === EditorMode.INSERT_TEXT ||
+                        editorEngine.state.editorMode === EditorMode.INSERT_IMAGE) &&
+                        !editorEngine.insert.isDrawing)
+                ) {
+                    await handleMouseEvent(e, MouseAction.MOVE);
+                } else if (editorEngine.insert.isDrawing) {
+                    editorEngine.insert.draw(e);
+                }
             }, 16),
         [editorEngine, getRelativeMousePosition, handleMouseEvent],
     );
@@ -148,9 +148,9 @@ export const GestureScreen = observer(({ frame, isResizing }: { frame: WebFrame,
         if (!frameData) {
             return;
         }
-        
+
         editorEngine.move.cancelDragPreparation();
-        
+
         await editorEngine.move.end(e);
         await editorEngine.insert.end(e, frameData.view);
     }

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

@@ -1,14 +1,13 @@
-import { FrameType, type Frame, type WebFrame } from '@onlook/models';
+import { type Frame } from '@onlook/models';
 import { observer } from 'mobx-react-lite';
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import { GestureScreen } from './gesture';
 import { ResizeHandles } from './resize-handles';
 import { RightClickMenu } from './right-click';
 import { TopBar } from './top-bar';
-import { WebFrameComponent, type WebFrameView } from './web-frame';
+import { FrameComponent } from './view';
 
 export const FrameView = observer(({ frame }: { frame: Frame }) => {
-    const webFrameRef = useRef<WebFrameView>(null);
     const [isResizing, setIsResizing] = useState(false);
 
     return (
@@ -17,14 +16,12 @@ export const FrameView = observer(({ frame }: { frame: Frame }) => {
             style={{ transform: `translate(${frame.position.x}px, ${frame.position.y}px)` }}
         >
             <RightClickMenu>
-                <TopBar frame={frame as WebFrame} />
+                <TopBar frame={frame} />
             </RightClickMenu>
             <div className="relative">
                 <ResizeHandles frame={frame} setIsResizing={setIsResizing} />
-                {frame.type === FrameType.WEB && (
-                    <WebFrameComponent frame={frame as WebFrame} ref={webFrameRef} />
-                )}
-                <GestureScreen frame={frame as WebFrame} isResizing={isResizing} />
+                <FrameComponent frame={frame} />
+                <GestureScreen frame={frame} isResizing={isResizing} />
             </div>
         </div>
     );

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

@@ -1,5 +1,5 @@
 import { useEditorEngine } from '@/components/store/editor';
-import { LeftPanelTabValue, type PageNode, type WebFrame } from '@onlook/models';
+import { LeftPanelTabValue, type Frame, type PageNode } from '@onlook/models';
 import { Button } from '@onlook/ui/button';
 import {
     DropdownMenu,
@@ -16,7 +16,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { PageModal } from '../../left-panel/page-tab/page-modal';
 
 interface PageSelectorProps {
-    frame: WebFrame;
+    frame: Frame;
     className?: string;
 }
 

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

@@ -1,5 +1,5 @@
 import { useEditorEngine } from '@/components/store/editor';
-import type { WebFrame } from '@onlook/models';
+import type { Frame } from '@onlook/models';
 import { Button } from '@onlook/ui/button';
 import { Icons } from '@onlook/ui/icons';
 import { cn } from '@onlook/ui/utils';
@@ -10,7 +10,7 @@ import { HoverOnlyTooltip } from '../../editor-bar/hover-tooltip';
 import { PageSelector } from './page-selector';
 
 export const TopBar = observer(
-    ({ frame }: { frame: WebFrame }) => {
+    ({ frame }: { frame: Frame }) => {
         const editorEngine = useEditorEngine();
         const isSelected = editorEngine.frames.isSelected(frame.id);
         const topBarRef = useRef<HTMLDivElement>(null);

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEditorEngine } from '@/components/store/editor';
-import type { WebFrame } from '@onlook/models';
+import type { Frame } from '@onlook/models';
 import {
     PENPAL_PARENT_CHANNEL,
     type PenpalChildMethods,
@@ -22,19 +22,19 @@ import {
     type IframeHTMLAttributes,
 } from 'react';
 
-export type WebFrameView = HTMLIFrameElement & {
+export type FrameView = HTMLIFrameElement & {
     setZoomLevel: (level: number) => void;
     supportsOpenDevTools: () => boolean;
     reload: () => void;
     isLoading: () => boolean;
 } & PromisifiedPendpalChildMethods;
 
-interface WebFrameViewProps extends IframeHTMLAttributes<HTMLIFrameElement> {
-    frame: WebFrame;
+interface FrameViewProps extends IframeHTMLAttributes<HTMLIFrameElement> {
+    frame: Frame;
 }
 
-export const WebFrameComponent = observer(
-    forwardRef<WebFrameView, WebFrameViewProps>(({ frame, ...props }, ref) => {
+export const FrameComponent = observer(
+    forwardRef<FrameView, FrameViewProps>(({ frame, ...props }, ref) => {
         const editorEngine = useEditorEngine();
         const iframeRef = useRef<HTMLIFrameElement>(null);
         const zoomLevel = useRef(1);
@@ -229,11 +229,11 @@ export const WebFrameComponent = observer(
             };
         }, [penpalChild]);
 
-        useImperativeHandle(ref, (): WebFrameView => {
+        useImperativeHandle(ref, (): FrameView => {
             const iframe = iframeRef.current;
             if (!iframe) {
                 console.error(`${PENPAL_PARENT_CHANNEL} (${frame.id}) - Iframe - Not found`);
-                return {} as WebFrameView;
+                return {} as FrameView;
             }
 
             const syncMethods = {
@@ -252,11 +252,11 @@ export const WebFrameComponent = observer(
                 console.warn(
                     `${PENPAL_PARENT_CHANNEL} (${frame.id}) - Failed to setup penpal connection: iframeRemote is null`,
                 );
-                return Object.assign(iframe, syncMethods, remoteMethods) as WebFrameView;
+                return Object.assign(iframe, syncMethods, remoteMethods) as FrameView;
             }
 
             // Register the iframe with the editor engine
-            editorEngine.frames.registerView(frame, iframe as WebFrameView);
+            editorEngine.frames.registerView(frame, iframe as FrameView);
 
             return Object.assign(iframe, {
                 ...syncMethods,

apps/web/client/src/app/project/[id]/_hooks/use-start-project.tsx

@@ -40,7 +40,7 @@ export const useStartProject = () => {
     useEffect(() => {
         if (project) {
             startSandbox(project);
-            editorEngine.screenshot.lastScreenshotAt = project.metadata.updatedPreviewImgAt;
+            editorEngine.screenshot.lastScreenshotAt = project.metadata.previewImg?.updatedAt ?? null;
         }
     }, [project]);
 

apps/web/client/src/app/projects/_components/select/index.tsx

@@ -42,8 +42,8 @@ export const SelectProject = ({ externalSearchQuery }: { externalSearchQuery?: s
     const [spacing] = useState<number>(24);
 
     // Templates
-    const projects = fetchedProjects?.filter(project => !project.tags?.includes(Tags.TEMPLATE)) ?? [];
-    const templateProjects = fetchedProjects?.filter(project => project.tags?.includes(Tags.TEMPLATE)) ?? [];
+    const projects = fetchedProjects?.filter(project => !project.metadata.tags.includes(Tags.TEMPLATE)) ?? [];
+    const templateProjects = fetchedProjects?.filter(project => project.metadata.tags.includes(Tags.TEMPLATE)) ?? [];
     const shouldShowTemplate = templateProjects.length > 0;
     const [selectedTemplate, setSelectedTemplate] = useState<Project | null>(null);
     const [isTemplateModalOpen, setIsTemplateModalOpen] = useState(false);

apps/web/client/src/app/projects/_components/settings.tsx

@@ -37,7 +37,7 @@ export function Settings({ project, refetch }: { project: Project; refetch: () =
     const [showRenameDialog, setShowRenameDialog] = useState(false);
     const [projectName, setProjectName] = useState(project.name);
     const isProjectNameEmpty = useMemo(() => projectName.length === 0, [projectName]);
-    const isTemplate = project.tags?.includes(Tags.TEMPLATE) || false;
+    const isTemplate = project.metadata.tags.includes(Tags.TEMPLATE) || false;
 
     useEffect(() => {
         setProjectName(project.name);

apps/web/client/src/components/store/editor/chat/conversation.ts

@@ -1,5 +1,5 @@
 import { api } from '@/trpc/client';
-import { fromMessage } from '@onlook/db';
+import { toDbMessage } from '@onlook/db';
 import type { GitCommit } from '@onlook/git';
 import { ChatMessageRole, MessageCheckpointType, type ChatConversation, type ChatMessage, type MessageContext, type UserChatMessage } from '@onlook/models';
 import { makeAutoObservable } from 'mobx';
@@ -211,7 +211,7 @@ export class ConversationManager {
     }
 
     async upsertMessageInStorage(message: ChatMessage) {
-        await api.chat.message.upsert.mutate({ message: fromMessage(message) });
+        await api.chat.message.upsert.mutate({ message: toDbMessage(message) });
     }
 
     clear() {

apps/web/client/src/components/store/editor/frames/manager.ts

@@ -1,7 +1,7 @@
-import type { WebFrameView } from '@/app/project/[id]/_components/canvas/frame/web-frame.tsx';
+import type { FrameView } from '@/app/project/[id]/_components/canvas/frame/view';
 import { api } from '@/trpc/client';
-import { fromFrame, fromPartialFrame } from '@onlook/db';
-import { FrameType, type Frame, type WebFrame } from '@onlook/models';
+import { toDbFrame, toDbPartialFrame } from '@onlook/db';
+import { type Frame } from '@onlook/models';
 import { debounce } from 'lodash';
 import { makeAutoObservable } from 'mobx';
 import { v4 as uuid } from 'uuid';
@@ -10,11 +10,11 @@ import { FrameNavigationManager } from './navigation';
 
 export interface FrameData {
     frame: Frame;
-    view: WebFrameView | null;
+    view: FrameView | null;
     selected: boolean;
 }
 
-function roundDimensions(frame: WebFrame): WebFrame {
+function roundDimensions(frame: Frame): Frame {
     return {
         ...frame,
         position: {
@@ -67,7 +67,7 @@ export class FramesManager {
         return this._frameIdToData.get(id);
     }
 
-    registerView(frame: Frame, view: WebFrameView) {
+    registerView(frame: Frame, view: FrameView) {
         const isSelected = this.isSelected(frame.id);
         this._frameIdToData.set(frame.id, { frame, view, selected: isSelected });
         const framePathname = new URL(view.src).pathname;
@@ -211,8 +211,8 @@ export class FramesManager {
         }
     }
 
-    async create(frame: WebFrame) {
-        const success = await api.frame.create.mutate(fromFrame(roundDimensions(frame)));
+    async create(frame: Frame) {
+        const success = await api.frame.create.mutate(toDbFrame(roundDimensions(frame)));
 
         if (success) {
             this._frameIdToData.set(frame.id, { frame, view: null, selected: false });
@@ -228,14 +228,8 @@ export class FramesManager {
             return;
         }
 
-        // Force to webframe for now, later we can support other frame types
-        if (frameData.frame.type !== FrameType.WEB) {
-            console.error('No handler for this frame type', frameData.frame.type);
-            return;
-        }
-
-        const frame = frameData.frame as WebFrame;
-        const newFrame: WebFrame = {
+        const frame = frameData.frame
+        const newFrame: Frame = {
             ...frame,
             id: uuid(),
             position: {
@@ -247,7 +241,7 @@ export class FramesManager {
         await this.create(newFrame);
     }
 
-    async updateAndSaveToStorage(frameId: string, frame: Partial<WebFrame>) {
+    async updateAndSaveToStorage(frameId: string, frame: Partial<Frame>) {
         const existingFrame = this.get(frameId);
         if (existingFrame) {
             const newFrame = { ...existingFrame.frame, ...frame };
@@ -262,9 +256,9 @@ export class FramesManager {
 
     saveToStorage = debounce(this.undebouncedSaveToStorage.bind(this), 1000);
 
-    async undebouncedSaveToStorage(frameId: string, frame: Partial<WebFrame>) {
+    async undebouncedSaveToStorage(frameId: string, frame: Partial<Frame>) {
         try {
-            const frameToUpdate = fromPartialFrame(frame);
+            const frameToUpdate = toDbPartialFrame(frame);
             const success = await api.frame.update.mutate({
                 frameId,
                 frame: frameToUpdate,

apps/web/client/src/components/store/editor/insert/index.ts

@@ -1,4 +1,4 @@
-import type { WebFrameView } from '@/app/project/[id]/_components/canvas/frame/web-frame';
+import type { FrameView } from '@/app/project/[id]/_components/canvas/frame/view';
 import { DefaultSettings, EditorAttributes } from '@onlook/constants';
 import type {
     DomElement,
@@ -77,7 +77,7 @@ export class InsertManager {
         this.updateInsertRect(currentPos);
     }
 
-    async end(e: React.MouseEvent<HTMLDivElement>, frameView: WebFrameView | null) {
+    async end(e: React.MouseEvent<HTMLDivElement>, frameView: FrameView | null) {
         if (!this.isDrawing || !this.drawOrigin) {
             return null;
         }
@@ -145,7 +145,7 @@ export class InsertManager {
         };
     }
 
-    async insertElement(frameView: WebFrameView, newRect: RectDimensions, origin: ElementPosition) {
+    async insertElement(frameView: FrameView, newRect: RectDimensions, origin: ElementPosition) {
         const insertAction = await this.createInsertAction(frameView, newRect, origin);
         if (!insertAction) {
             console.error('Failed to create insert action');
@@ -155,7 +155,7 @@ export class InsertManager {
     }
 
     async createInsertAction(
-        frameView: WebFrameView,
+        frameView: FrameView,
         newRect: RectDimensions,
         origin: ElementPosition,
     ): Promise<InsertElementAction | undefined> {

apps/web/client/src/components/store/editor/overlay/utils.ts

@@ -1,4 +1,4 @@
-import type { WebFrameView } from '@/app/project/[id]/_components/canvas/frame/web-frame';
+import type { FrameView } from '@/app/project/[id]/_components/canvas/frame/view';
 import { EditorAttributes } from '@onlook/constants';
 import type { ElementPosition, RectDimensions } from '@onlook/models';
 
@@ -42,7 +42,7 @@ export function getRelativeOffset(element: HTMLElement, ancestor: HTMLElement) {
  */
 export function adaptRectToCanvas(
     rect: RectDimensions,
-    frameView: WebFrameView,
+    frameView: FrameView,
     inverse = false,
 ): RectDimensions {
     const canvasContainer = document.getElementById(EditorAttributes.CANVAS_CONTAINER_ID);
@@ -85,14 +85,14 @@ export function adaptValueToCanvas(value: number, inverse = false): number {
  */
 export function getRelativeMousePositionToFrameView(
     e: React.MouseEvent<HTMLDivElement>,
-    frameView: WebFrameView,
+    frameView: FrameView,
     inverse: boolean = false,
 ): ElementPosition {
     const rect = frameView.getBoundingClientRect();
     const canvasContainer = document.getElementById(EditorAttributes.CANVAS_CONTAINER_ID);
     if (!canvasContainer) {
         console.error('Canvas container not found');
-        return rect;
+        return rect satisfies ElementPosition;
     }
 
     // Get canvas transform matrix to handle scaling and translation
@@ -102,5 +102,5 @@ export function getRelativeMousePositionToFrameView(
 
     const x = (e.clientX - rect.left) / scale;
     const y = (e.clientY - rect.top) / scale;
-    return { x, y };
+    return { x, y } satisfies ElementPosition;
 }