@pascal-app/editor 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pascal-app/editor",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Pascal building editor component",
   "type": "module",
   "exports": {
@@ -11,8 +11,8 @@
     "check-types": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pascal-app/core": "^0.6.0",
-    "@pascal-app/viewer": "^0.6.0",
+    "@pascal-app/core": "^0.7.0",
+    "@pascal-app/viewer": "^0.7.0",
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "next": ">=15",
@@ -21,6 +21,9 @@
     "three": "^0.184"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@iconify/react": "^6.0.2",
     "@number-flow/react": "^0.5.14",
     "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -46,12 +49,13 @@
     "motion": "^12.34.3",
     "nanoid": "^5.1.6",
     "tailwind-merge": "^3.5.0",
+    "three-mesh-bvh": "^0.9.8",
     "zod": "^4.3.6",
     "zustand": "^5.0.11"
   },
   "devDependencies": {
-    "@pascal-app/core": "^0.6.0",
-    "@pascal-app/viewer": "^0.6.0",
+    "@pascal-app/core": "^0.7.0",
+    "@pascal-app/viewer": "^0.7.0",
     "@pascal/typescript-config": "*",
     "@types/howler": "^2.2.12",
     "@types/node": "^22.19.12",

package/src/components/editor/bottom-sheet.tsx

@@ -0,0 +1,149 @@
+'use client'
+
+import { animate, motion, useMotionValue } from 'motion/react'
+import {
+  forwardRef,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react'
+
+export type BottomSheetHandle = {
+  snapTo: (heightPx: number) => void
+  getHeight: () => number
+}
+
+interface BottomSheetProps {
+  initialHeightPx: number
+  snapPointsPx: number[]
+  onCommit: (heightPx: number) => void
+  children: ReactNode
+}
+
+const DRAG_THRESHOLD_PX = 6
+
+export const BottomSheet = forwardRef<BottomSheetHandle, BottomSheetProps>(function BottomSheet(
+  { initialHeightPx, snapPointsPx, onCommit, children },
+  ref,
+) {
+  const height = useMotionValue(initialHeightPx)
+  const dragStartY = useRef<number | null>(null)
+  const dragStartHeight = useRef(0)
+  const hasDragged = useRef(false)
+  const animationRef = useRef<ReturnType<typeof animate> | null>(null)
+
+  const clamp = useCallback(
+    (px: number) => {
+      const min = Math.min(...snapPointsPx)
+      const max = Math.max(...snapPointsPx)
+      return Math.max(min, Math.min(max, px))
+    },
+    [snapPointsPx],
+  )
+
+  const nearestSnap = useCallback(
+    (px: number) => {
+      let best = snapPointsPx[0] ?? 0
+      let bestDist = Number.POSITIVE_INFINITY
+      for (const p of snapPointsPx) {
+        const d = Math.abs(p - px)
+        if (d < bestDist) {
+          bestDist = d
+          best = p
+        }
+      }
+      return best
+    },
+    [snapPointsPx],
+  )
+
+  const animateTo = useCallback(
+    (targetPx: number) => {
+      animationRef.current?.stop()
+      const controls = animate(height, targetPx, {
+        type: 'spring',
+        stiffness: 320,
+        damping: 32,
+        mass: 0.8,
+        onComplete: () => {
+          onCommit(targetPx)
+        },
+      })
+      animationRef.current = controls
+    },
+    [height, onCommit],
+  )
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      snapTo: (px: number) => animateTo(clamp(px)),
+      getHeight: () => height.get(),
+    }),
+    [animateTo, clamp, height],
+  )
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      if (e.button !== 0 && e.pointerType === 'mouse') return
+      e.currentTarget.setPointerCapture(e.pointerId)
+      animationRef.current?.stop()
+      dragStartY.current = e.clientY
+      dragStartHeight.current = height.get()
+      hasDragged.current = false
+    },
+    [height],
+  )
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (dragStartY.current === null) return
+      const dy = e.clientY - dragStartY.current
+      if (!hasDragged.current && Math.abs(dy) < DRAG_THRESHOLD_PX) return
+      hasDragged.current = true
+      const next = clamp(dragStartHeight.current - dy)
+      height.set(next)
+    },
+    [clamp, height],
+  )
+
+  const endDrag = useCallback(
+    (e: React.PointerEvent) => {
+      if (dragStartY.current === null) return
+      dragStartY.current = null
+      if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+        e.currentTarget.releasePointerCapture(e.pointerId)
+      }
+      if (!hasDragged.current) return
+      const target = nearestSnap(height.get())
+      animateTo(target)
+    },
+    [animateTo, height, nearestSnap],
+  )
+
+  useEffect(() => {
+    return () => {
+      animationRef.current?.stop()
+    }
+  }, [])
+
+  return (
+    <motion.div
+      className="absolute right-0 bottom-0 left-0 z-40 flex flex-col overflow-hidden rounded-t-2xl bg-sidebar text-sidebar-foreground shadow-[0_-4px_16px_rgba(0,0,0,0.12)]"
+      style={{ height }}
+    >
+      <div
+        className="flex h-6 shrink-0 cursor-grab touch-none items-center justify-center active:cursor-grabbing"
+        onPointerCancel={endDrag}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={endDrag}
+      >
+        <div className="h-1 w-10 rounded-full bg-muted-foreground/40" />
+      </div>
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">{children}</div>
+    </motion.div>
+  )
+})

package/src/components/editor/custom-camera-controls.tsx

@@ -1,7 +1,12 @@
 'use client'
-
-import { type CameraControlEvent, emitter, sceneRegistry, useScene } from '@pascal-app/core'
-import { useViewer, WalkthroughControls, ZONE_LAYER } from '@pascal-app/viewer'
+import {
+  type CameraControlEvent,
+  type CameraControlFitSceneEvent,
+  emitter,
+  sceneRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer, ZONE_LAYER } from '@pascal-app/viewer'
 import { CameraControls, CameraControlsImpl } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
@@ -22,7 +27,7 @@ const DEBUG_MAX_POLAR_ANGLE = Math.PI - 0.05
 export const CustomCameraControls = () => {
   const controls = useRef<CameraControlsImpl>(null!)
   const isPreviewMode = useEditor((s) => s.isPreviewMode)
-  const walkthroughMode = useViewer((s) => s.walkthroughMode)
+  const isFirstPersonMode = useEditor((s) => s.isFirstPersonMode)
   const allowUndergroundCamera = useEditor((s) => s.allowUndergroundCamera)
   const selection = useViewer((s) => s.selection)
   const currentLevelId = selection.levelId
@@ -112,6 +117,49 @@ export const CustomCameraControls = () => {
     }
   }, [cameraMode, isPreviewMode])
 
+  // Touch gestures (mobile / trackpad).
+  // - One finger drag    → rotate by default (much easier on a phone), but
+  //                        falls back to NONE while the user is actively
+  //                        placing/moving something OR in box-select mode,
+  //                        so the editor's pointer handlers (place tool,
+  //                        drag-to-move endpoint, marquee selection drag)
+  //                        keep priority over the camera.
+  //                        In preview mode it's TOUCH_TRUCK (pan), matching
+  //                        preview's left = SCREEN_PAN.
+  // - Two finger pinch   → zoom + pan together (TOUCH_DOLLY_TRUCK for
+  //                        perspective, TOUCH_ZOOM_TRUCK for orthographic).
+  // - Three finger drag  → rotate, so the camera is always orbitable even
+  //                        when one-finger is suppressed by an active
+  //                        editor action.
+  const tool = useEditor((s) => s.tool)
+  const mode = useEditor((s) => s.mode)
+  const selectionTool = useEditor((s) => s.floorplanSelectionTool)
+  const movingNode = useEditor((s) => s.movingNode)
+  const movingWallEndpoint = useEditor((s) => s.movingWallEndpoint)
+  const movingFenceEndpoint = useEditor((s) => s.movingFenceEndpoint)
+  const isBoxSelectActive = mode === 'select' && selectionTool === 'marquee'
+  const isInteracting = Boolean(
+    tool || movingNode || movingWallEndpoint || movingFenceEndpoint || isBoxSelectActive,
+  )
+  const touches = useMemo(() => {
+    const twoFingerAction =
+      cameraMode === 'orthographic'
+        ? CameraControlsImpl.ACTION.TOUCH_ZOOM_TRUCK
+        : CameraControlsImpl.ACTION.TOUCH_DOLLY_TRUCK
+
+    const oneFingerAction = isPreviewMode
+      ? CameraControlsImpl.ACTION.TOUCH_TRUCK
+      : isInteracting
+        ? CameraControlsImpl.ACTION.NONE
+        : CameraControlsImpl.ACTION.TOUCH_ROTATE
+
+    return {
+      one: oneFingerAction,
+      two: twoFingerAction,
+      three: CameraControlsImpl.ACTION.TOUCH_ROTATE,
+    }
+  }, [cameraMode, isPreviewMode, isInteracting])
+
   useEffect(() => {
     const keyState = {
       shiftRight: false,
@@ -340,12 +388,30 @@ export const CustomCameraControls = () => {
       focusNode(nodeId)
     }
 
+    const handleFitScene = ({ bounds }: CameraControlFitSceneEvent) => {
+      if (!controls.current || isPreviewMode) return
+      if (!bounds) {
+        // Restore default framing pose when no bounds were computed.
+        controls.current.setLookAt(20, 20, 20, 0, 0, 0, true)
+        return
+      }
+      const [cx, cz] = bounds.center
+      const [w, d] = bounds.size
+      // Use the longer horizontal extent to size the orbit radius so the whole
+      // footprint sits in view regardless of aspect ratio.
+      const maxExtent = Math.max(w, d)
+      const distance = Math.max(maxExtent * 1.4, 15)
+      const height = Math.max(maxExtent * 0.8, 10)
+      controls.current.setLookAt(cx + distance * 0.7, height, cz + distance * 0.7, cx, 0, cz, true)
+    }
+
     emitter.on('camera-controls:capture', handleNodeCapture)
     emitter.on('camera-controls:focus', handleNodeFocus)
     emitter.on('camera-controls:view', handleNodeView)
     emitter.on('camera-controls:top-view', handleTopView)
     emitter.on('camera-controls:orbit-cw', handleOrbitCW)
     emitter.on('camera-controls:orbit-ccw', handleOrbitCCW)
+    emitter.on('camera-controls:fit-scene', handleFitScene)
 
     return () => {
       emitter.off('camera-controls:capture', handleNodeCapture)
@@ -354,8 +420,9 @@ export const CustomCameraControls = () => {
       emitter.off('camera-controls:top-view', handleTopView)
       emitter.off('camera-controls:orbit-cw', handleOrbitCW)
       emitter.off('camera-controls:orbit-ccw', handleOrbitCCW)
+      emitter.off('camera-controls:fit-scene', handleFitScene)
     }
-  }, [focusNode])
+  }, [focusNode, isPreviewMode])
 
   const onTransitionStart = useCallback(() => {
     useViewer.getState().setCameraDragging(true)
@@ -365,8 +432,8 @@ export const CustomCameraControls = () => {
     useViewer.getState().setCameraDragging(false)
   }, [])
 
-  if (walkthroughMode) {
-    return <WalkthroughControls />
+  if (isFirstPersonMode) {
+    return null
   }
 
   return (
@@ -382,6 +449,7 @@ export const CustomCameraControls = () => {
       onTransitionStart={onTransitionStart}
       ref={controls}
       restThreshold={0.01}
+      touches={touches}
     />
   )
 }

package/src/components/editor/editor-layout-mobile.tsx

@@ -0,0 +1,264 @@
+'use client'
+
+import { useViewer } from '@pascal-app/viewer'
+import { type ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import useEditor from '../../store/use-editor'
+import { MobileTabBar } from '../ui/sidebar/mobile-tab-bar'
+import type { SidebarTab } from '../ui/sidebar/tab-bar'
+import { BottomSheet, type BottomSheetHandle } from './bottom-sheet'
+
+const MIN_SNAP = 0
+const MAX_SNAP = 1
+const DEFAULT_SNAP = 0.5
+// Viewer extends this many pixels behind the sheet's rounded top corners
+// so the curve reveals viewer content underneath.
+const SHEET_OVERLAP_PX = 16
+// Sheet never collapses below the drag handle so the user can always grab it.
+const SHEET_HANDLE_PX = 24
+
+// Match the viewer's scene background colors (packages/viewer/src/components/viewer/index.tsx)
+const VIEWER_BG_DARK = '#1f2433'
+const VIEWER_BG_LIGHT = '#ffffff'
+
+// Fixed set of intermediate snap heights (handle + middleH are added on top).
+// Per-tab `mobileDefaultSnap` decides the OPENING height; this list bounds
+// what the user can drag to.
+const SNAP_RATIOS = [0.5, 0.66] as const
+
+function getDefaultSnap(tab: SidebarTab | undefined): number {
+  const s = tab?.mobileDefaultSnap
+  if (typeof s !== 'number') return DEFAULT_SNAP
+  return Math.max(MIN_SNAP, Math.min(MAX_SNAP, s))
+}
+
+export interface EditorLayoutMobileProps {
+  navbarSlot?: ReactNode
+  sidebarTabs?: SidebarTab[]
+  renderTabContent: (tabId: string) => ReactNode
+  sidebarOverlay?: ReactNode
+  viewerToolbarLeft?: ReactNode
+  viewerToolbarRight?: ReactNode
+  viewerContent: ReactNode
+  overlays?: ReactNode
+}
+
+export function EditorLayoutMobile({
+  navbarSlot,
+  sidebarTabs = [],
+  renderTabContent,
+  sidebarOverlay,
+  viewerToolbarLeft,
+  viewerToolbarRight,
+  viewerContent,
+  overlays,
+}: EditorLayoutMobileProps) {
+  const isCaptureMode = useEditor((s) => s.isCaptureMode)
+  const activePanel = useEditor((s) => s.activeSidebarPanel)
+  const setActivePanel = useEditor((s) => s.setActiveSidebarPanel)
+  const panelSheetHeight = useEditor((s) => s.mobilePanelSheetHeight)
+  const theme = useViewer((s) => s.theme)
+  const viewerBg = theme === 'light' ? VIEWER_BG_LIGHT : VIEWER_BG_DARK
+
+  const middleRef = useRef<HTMLDivElement>(null)
+  const sheetRef = useRef<BottomSheetHandle>(null)
+  const [middleH, setMiddleH] = useState(0)
+  // Distance from the middle area's bottom edge to the viewport's bottom edge
+  // (i.e. the tab bar height incl. safe area). Needed to translate the panel
+  // sheet's viewport-relative height into middle-area coordinates.
+  const [middleBottomFromViewport, setMiddleBottomFromViewport] = useState(0)
+  const [committedSheetH, setCommittedSheetH] = useState(0)
+
+  const currentTab = sidebarTabs.find((t) => t.id === activePanel)
+
+  // Keep active panel valid
+  useEffect(() => {
+    if (sidebarTabs.length > 0 && !sidebarTabs.some((t) => t.id === activePanel)) {
+      setActivePanel(sidebarTabs[0]!.id)
+    }
+  }, [sidebarTabs, activePanel, setActivePanel])
+
+  // Sync editor phase / mode with the active tab:
+  // - Entering Chat always drops to Select (chat is a composing context).
+  // - Entering Items snaps the editor into furnish-build (matches the
+  //   desktop "Furnish" action which itself opens the Items panel).
+  // - Leaving Items while still furnishing exits the build mode.
+  useEffect(() => {
+    const { phase, mode, setMode, setPhase } = useEditor.getState()
+    if (activePanel === 'ai' && mode === 'build') {
+      setMode('select')
+      return
+    }
+    if (activePanel === 'items') {
+      if (phase !== 'furnish') setPhase('furnish')
+      if (mode !== 'build') setMode('build')
+      return
+    }
+    if (phase === 'furnish' && mode === 'build') {
+      setMode('select')
+    }
+  }, [activePanel])
+
+  // Measure middle area height + its bottom offset from viewport bottom
+  useLayoutEffect(() => {
+    const el = middleRef.current
+    if (!el) return
+    const measure = () => {
+      const rect = el.getBoundingClientRect()
+      setMiddleH(rect.height)
+      setMiddleBottomFromViewport(Math.max(0, window.innerHeight - rect.bottom))
+    }
+    const ro = new ResizeObserver(measure)
+    ro.observe(el)
+    measure()
+    window.addEventListener('resize', measure)
+    return () => {
+      ro.disconnect()
+      window.removeEventListener('resize', measure)
+    }
+  }, [])
+
+  // Initialise sheet to current tab default once we know the middle height
+  const didInit = useRef(false)
+  useEffect(() => {
+    if (didInit.current || middleH <= 0) return
+    didInit.current = true
+    const targetPx = getDefaultSnap(currentTab) * middleH
+    setCommittedSheetH(targetPx)
+    sheetRef.current?.snapTo(targetPx)
+  }, [middleH, currentTab])
+
+  // When middle height changes (rotation / resize), keep sheet in proportion
+  const prevMiddleH = useRef(0)
+  useEffect(() => {
+    if (middleH <= 0) return
+    if (prevMiddleH.current === 0) {
+      prevMiddleH.current = middleH
+      return
+    }
+    if (prevMiddleH.current === middleH) return
+    const ratio = committedSheetH / prevMiddleH.current
+    const nextPx = Math.max(SHEET_HANDLE_PX, Math.min(middleH, ratio * middleH))
+    prevMiddleH.current = middleH
+    setCommittedSheetH(nextPx)
+    sheetRef.current?.snapTo(nextPx)
+  }, [middleH, committedSheetH])
+
+  const handleTabPress = useCallback(
+    (id: string) => {
+      if (middleH <= 0) return
+      const tab = sidebarTabs.find((t) => t.id === id)
+      if (!tab) return
+      const defaultPx = getDefaultSnap(tab) * middleH
+      if (id !== activePanel) {
+        setActivePanel(id)
+        sheetRef.current?.snapTo(defaultPx)
+        return
+      }
+      // Same tab tapped — toggle
+      const current = sheetRef.current?.getHeight() ?? committedSheetH
+      const expandedThreshold = Math.max(SHEET_HANDLE_PX, defaultPx * 0.5)
+      if (current > expandedThreshold) {
+        sheetRef.current?.snapTo(SHEET_HANDLE_PX)
+      } else {
+        sheetRef.current?.snapTo(defaultPx)
+      }
+    },
+    [sidebarTabs, activePanel, setActivePanel, middleH, committedSheetH],
+  )
+
+  const snapPointsPx = (() => {
+    if (middleH <= 0) return [SHEET_HANDLE_PX]
+    const intermediate = SNAP_RATIOS.map((r) => r * middleH)
+    return Array.from(new Set([SHEET_HANDLE_PX, ...intermediate, middleH])).sort((a, b) => a - b)
+  })()
+
+  // When the secondary panel sheet is open, it covers the tab bar + part of
+  // the middle area; translate its viewport height into middle-area units.
+  const panelPenetrationInMiddle = Math.max(0, panelSheetHeight - middleBottomFromViewport)
+  // The effective "sheet height" that the viewer sits above is the larger of
+  // the primary sidebar sheet and the secondary panel sheet's penetration.
+  const effectiveSheetH = Math.max(committedSheetH, panelPenetrationInMiddle)
+
+  // In capture mode the sheet and tab bar are hidden — the viewer should fill
+  // the entire middle area regardless of the stored sheet height.
+  // Otherwise, the viewer extends SHEET_OVERLAP_PX behind the sheet's rounded
+  // corners so the curve reveals viewer content underneath.
+  const baseViewerHeight = Math.max(0, middleH - effectiveSheetH)
+  const viewerHeight = isCaptureMode
+    ? middleH
+    : baseViewerHeight === 0
+      ? 0
+      : Math.min(middleH, baseViewerHeight + SHEET_OVERLAP_PX)
+
+  // While the panel sheet is open, collapse the primary sheet to its handle so
+  // it doesn't peek above. Remember the previous height and restore it on close.
+  const sheetHeightBeforePanel = useRef<number | null>(null)
+  useEffect(() => {
+    if (panelSheetHeight > 0) {
+      if (sheetHeightBeforePanel.current === null && committedSheetH > SHEET_HANDLE_PX) {
+        sheetHeightBeforePanel.current = committedSheetH
+        sheetRef.current?.snapTo(SHEET_HANDLE_PX)
+      }
+    } else if (sheetHeightBeforePanel.current !== null) {
+      const target = sheetHeightBeforePanel.current
+      sheetHeightBeforePanel.current = null
+      sheetRef.current?.snapTo(target)
+    }
+  }, [panelSheetHeight, committedSheetH])
+
+  return (
+    <div className="dark flex h-full w-full flex-col bg-sidebar text-foreground">
+      {navbarSlot}
+
+      <div
+        className="relative flex min-h-0 flex-1"
+        ref={middleRef}
+        style={{ backgroundColor: viewerBg }}
+      >
+        {/* Viewer column: sized by committed sheet height */}
+        <div className="absolute inset-x-0 top-0 overflow-hidden" style={{ height: viewerHeight }}>
+          <div className="relative h-full w-full">
+            {(viewerToolbarLeft || viewerToolbarRight) && !isCaptureMode && (
+              <div className="pointer-events-none absolute top-3 right-3 left-3 z-20 flex items-center justify-between gap-2">
+                <div className="pointer-events-auto flex items-center gap-2">
+                  {viewerToolbarLeft}
+                </div>
+                <div className="pointer-events-auto flex items-center gap-2">
+                  {viewerToolbarRight}
+                </div>
+              </div>
+            )}
+            <div className="relative h-full w-full overflow-hidden">{viewerContent}</div>
+            {overlays && (
+              <div
+                className="pointer-events-none absolute inset-0 z-30"
+                style={{ transform: 'translateZ(0)' }}
+              >
+                {overlays}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Bottom sheet: overlays the lower part of the middle area */}
+        {!isCaptureMode && sidebarTabs.length > 0 && (
+          <BottomSheet
+            initialHeightPx={SHEET_HANDLE_PX}
+            onCommit={setCommittedSheetH}
+            ref={sheetRef}
+            snapPointsPx={snapPointsPx}
+          >
+            <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
+              {renderTabContent(activePanel)}
+              {sidebarOverlay && <div className="absolute inset-0 z-50">{sidebarOverlay}</div>}
+            </div>
+          </BottomSheet>
+        )}
+      </div>
+
+      {!isCaptureMode && sidebarTabs.length > 0 && (
+        <MobileTabBar activeTab={activePanel} onTabPress={handleTabPress} tabs={sidebarTabs} />
+      )}
+    </div>
+  )
+}

package/src/components/editor/editor-layout-v2.tsx

@@ -1,9 +1,12 @@
 'use client'
 
 import { type ReactNode, useCallback, useEffect, useRef } from 'react'
+import { useIsMobile } from '../../hooks/use-mobile'
 import useEditor from '../../store/use-editor'
+
 import { useSidebarStore } from '../ui/primitives/sidebar'
 import { type SidebarTab, TabBar } from '../ui/sidebar/tab-bar'
+import { EditorLayoutMobile } from './editor-layout-mobile'
 
 const SIDEBAR_MIN_WIDTH = 300
 const SIDEBAR_MAX_WIDTH = 800
@@ -202,6 +205,23 @@ export function EditorLayoutV2({
   viewerContent,
   overlays,
 }: EditorLayoutV2Props) {
+  const isMobile = useIsMobile()
+
+  if (isMobile) {
+    return (
+      <EditorLayoutMobile
+        navbarSlot={navbarSlot}
+        overlays={overlays}
+        renderTabContent={renderTabContent}
+        sidebarOverlay={sidebarOverlay}
+        sidebarTabs={sidebarTabs}
+        viewerContent={viewerContent}
+        viewerToolbarLeft={viewerToolbarLeft}
+        viewerToolbarRight={viewerToolbarRight}
+      />
+    )
+  }
+
   return (
     <div className="dark flex h-full w-full flex-col bg-sidebar text-foreground">
       {/* Top navbar */}