@pascal-app/editor 1.0.0-beta.4 → 1.0.0

package/src/components/viewer/use-viewer-camera-navigation-sync.ts

@@ -0,0 +1,140 @@
+'use client'
+
+import { type CameraPose, emitter } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import type { CameraControlsImpl } from '@react-three/drei'
+import { useThree } from '@react-three/fiber'
+import { type RefObject, useCallback, useEffect, useRef } from 'react'
+import type { Camera, OrthographicCamera, PerspectiveCamera } from 'three'
+import { Vector3 } from 'three'
+import { normalizeCameraPose } from '../../lib/camera-pose'
+import { publishCameraPose } from '../../store/camera-pose-store'
+
+const position = new Vector3()
+const target = new Vector3()
+
+function isPerspectiveCamera(camera: Camera): camera is PerspectiveCamera {
+  return (camera as PerspectiveCamera).isPerspectiveCamera === true
+}
+
+function isOrthographicCamera(camera: Camera): camera is OrthographicCamera {
+  return (camera as OrthographicCamera).isOrthographicCamera === true
+}
+
+function cameraViewWidth(camera: Camera, distance: number, width: number, height: number) {
+  if (isPerspectiveCamera(camera)) {
+    const fov = (camera.getEffectiveFOV() * Math.PI) / 180
+    return Math.max(0.001, 2 * distance * Math.tan(fov / 2) * (width / Math.max(height, 1)))
+  }
+  if (isOrthographicCamera(camera)) {
+    return Math.max(0.001, (camera.right - camera.left) / camera.zoom)
+  }
+  return Math.max(0.001, distance)
+}
+
+function applyViewWidth(
+  controls: CameraControlsImpl,
+  camera: Camera,
+  viewWidth: number,
+  width: number,
+  height: number,
+) {
+  if (isPerspectiveCamera(camera)) {
+    const fov = (camera.getEffectiveFOV() * Math.PI) / 180
+    const denominator = 2 * Math.tan(fov / 2) * (width / Math.max(height, 1))
+    if (denominator > 0) controls.dollyTo(Math.max(0.001, viewWidth / denominator), false)
+    return
+  }
+  if (isOrthographicCamera(camera) && viewWidth > 0) {
+    controls.zoomTo(Math.max(0.001, (camera.right - camera.left) / viewWidth), false)
+  }
+}
+
+export function useViewerCameraNavigationSync(controls: RefObject<CameraControlsImpl | null>) {
+  const camera = useThree((state) => state.camera)
+  const size = useThree((state) => state.size)
+  const suppressPublish = useRef(false)
+  const pendingPose = useRef<CameraPose | null>(null)
+
+  const publishCurrentPose = useCallback(() => {
+    const control = controls.current
+    if (!control || suppressPublish.current) return
+    control.getPosition(position, false)
+    control.getTarget(target, false)
+    const projection = isPerspectiveCamera(camera)
+      ? 'perspective'
+      : isOrthographicCamera(camera)
+        ? 'orthographic'
+        : null
+    if (!projection) return
+    const pose = normalizeCameraPose({
+      position: [position.x, position.y, position.z],
+      target: [target.x, target.y, target.z],
+      projection,
+      viewWidth: cameraViewWidth(camera, position.distanceTo(target), size.width, size.height),
+      ...(isPerspectiveCamera(camera) ? { fov: camera.fov } : {}),
+    })
+    if (pose) publishCameraPose(pose)
+  }, [camera, controls, size.height, size.width])
+
+  const applyPendingPose = useCallback(() => {
+    const control = controls.current
+    const pose = pendingPose.current
+    if (!(control && pose)) return
+    const projectionMatches =
+      (pose.projection === 'perspective' && isPerspectiveCamera(camera)) ||
+      (pose.projection === 'orthographic' && isOrthographicCamera(camera))
+    if (!projectionMatches) return
+
+    pendingPose.current = null
+    suppressPublish.current = true
+    try {
+      if (pose.fov !== undefined && isPerspectiveCamera(camera)) {
+        camera.fov = pose.fov
+        camera.updateProjectionMatrix()
+      }
+      control.setLookAt(
+        pose.position[0],
+        pose.position[1],
+        pose.position[2],
+        pose.target[0],
+        pose.target[1],
+        pose.target[2],
+        false,
+      )
+      if (pose.viewWidth !== undefined) {
+        applyViewWidth(control, camera, pose.viewWidth, size.width, size.height)
+      }
+      control.update(0)
+    } finally {
+      suppressPublish.current = false
+      publishCurrentPose()
+    }
+  }, [camera, controls, publishCurrentPose, size.height, size.width])
+
+  useEffect(() => {
+    applyPendingPose()
+  }, [applyPendingPose])
+
+  useEffect(() => {
+    const applyPose = (value: CameraPose) => {
+      const pose = normalizeCameraPose(value)
+      if (!pose) return
+      pendingPose.current = pose
+      if (useViewer.getState().cameraMode !== pose.projection) {
+        useViewer.getState().setCameraMode(pose.projection)
+        return
+      }
+      applyPendingPose()
+    }
+    emitter.on('camera-controls:apply-pose', applyPose)
+    return () => emitter.off('camera-controls:apply-pose', applyPose)
+  }, [applyPendingPose])
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(publishCurrentPose)
+    return () => cancelAnimationFrame(frame)
+  }, [publishCurrentPose])
+
+  return publishCurrentPose
+}

package/src/components/viewer/viewer-scene-header.tsx

@@ -9,7 +9,7 @@ import {
   useScene,
   type ZoneNode,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import { ArrowLeft, ChevronRight, Layers } from 'lucide-react'
 import Link from 'next/link'
 import type { ReactNode } from 'react'
@@ -76,6 +76,7 @@ export const ViewerSceneHeader = ({
 
   const handleLevelClick = (levelId: LevelNode['id']) => {
     // When switching levels, deselect zone and items
+    if (levelId !== selection.levelId) markPerfAction('level-switch', levelId)
     useViewer.getState().setSelection({ levelId })
   }
 

package/src/components/viewer/viewer-stage-modes.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, test } from 'bun:test'
+import {
+  normalizeViewerStageModes,
+  resolveMobileViewerStageMode,
+  resolveViewerStageMode,
+  viewerStageIncludes3D,
+} from './viewer-stage-modes'
+
+describe('viewer stage modes', () => {
+  test('supports every ordered combination without duplicates', () => {
+    expect(normalizeViewerStageModes(['split', '3d', 'split'])).toEqual(['3d', 'split'])
+    expect(normalizeViewerStageModes(['2d'])).toEqual(['2d'])
+    expect(normalizeViewerStageModes([])).toEqual(['3d'])
+  })
+
+  test('reuses normalized combinations across inline prop arrays', () => {
+    expect(normalizeViewerStageModes(['split', '3d'])).toBe(
+      normalizeViewerStageModes(['3d', 'split']),
+    )
+  })
+
+  test('falls back to the first enabled mode', () => {
+    expect(resolveViewerStageMode('split', ['3d', '2d'])).toBe('3d')
+    expect(resolveViewerStageMode(undefined, ['2d', 'split'])).toBe('2d')
+  })
+
+  test('uses an enabled single-pane mode on mobile but preserves split-only embeds', () => {
+    expect(resolveMobileViewerStageMode('split', ['3d', 'split'])).toBe('3d')
+    expect(resolveMobileViewerStageMode('split', ['2d', 'split'])).toBe('2d')
+    expect(resolveMobileViewerStageMode('split', ['split'])).toBe('split')
+  })
+
+  test('does not require a GPU canvas for a 2D-only embed', () => {
+    expect(viewerStageIncludes3D(['2d'])).toBe(false)
+    expect(viewerStageIncludes3D(['split'])).toBe(true)
+    expect(viewerStageIncludes3D(['3d', '2d'])).toBe(true)
+  })
+})

package/src/components/viewer/viewer-stage-modes.ts

@@ -0,0 +1,49 @@
+export const VIEWER_STAGE_MODES = ['3d', '2d', 'split'] as const
+
+export type ViewerStageMode = (typeof VIEWER_STAGE_MODES)[number]
+
+const THREE_D_MODES = ['3d'] as const
+const TWO_D_MODES = ['2d'] as const
+const SPLIT_MODES = ['split'] as const
+const THREE_D_TWO_D_MODES = ['3d', '2d'] as const
+const THREE_D_SPLIT_MODES = ['3d', 'split'] as const
+const TWO_D_SPLIT_MODES = ['2d', 'split'] as const
+
+export function normalizeViewerStageModes(
+  modes: readonly ViewerStageMode[] | undefined,
+): readonly ViewerStageMode[] {
+  if (!modes) return VIEWER_STAGE_MODES
+
+  const has3D = modes.includes('3d')
+  const has2D = modes.includes('2d')
+  const hasSplit = modes.includes('split')
+
+  if (has3D && has2D && hasSplit) return VIEWER_STAGE_MODES
+  if (has3D && has2D) return THREE_D_TWO_D_MODES
+  if (has3D && hasSplit) return THREE_D_SPLIT_MODES
+  if (has2D && hasSplit) return TWO_D_SPLIT_MODES
+  if (has2D) return TWO_D_MODES
+  if (hasSplit) return SPLIT_MODES
+  return THREE_D_MODES
+}
+
+export function resolveViewerStageMode(
+  mode: ViewerStageMode | undefined,
+  modes: readonly ViewerStageMode[],
+): ViewerStageMode {
+  return mode && modes.includes(mode) ? mode : (modes[0] ?? '3d')
+}
+
+export function resolveMobileViewerStageMode(
+  mode: ViewerStageMode,
+  modes: readonly ViewerStageMode[],
+): ViewerStageMode {
+  if (mode !== 'split') return mode
+  if (modes.includes('2d')) return '2d'
+  if (modes.includes('3d')) return '3d'
+  return 'split'
+}
+
+export function viewerStageIncludes3D(modes: readonly ViewerStageMode[]) {
+  return modes.includes('3d') || modes.includes('split')
+}

package/src/components/viewer/viewer-stage-switcher.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { Box, Columns2, Map as MapIcon } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { cn } from '../../lib/utils'
+import { normalizeViewerStageModes, type ViewerStageMode } from './viewer-stage-modes'
+
+export type { ViewerStageMode } from './viewer-stage-modes'
+
+export type ViewerStageSwitcherProps = {
+  className?: string
+  hideSplitOnMobile?: boolean
+  mode: ViewerStageMode
+  modes?: readonly ViewerStageMode[]
+  onChange: (mode: ViewerStageMode) => void
+}
+
+export function ViewerStageSwitcher({
+  className,
+  hideSplitOnMobile = true,
+  mode,
+  modes,
+  onChange,
+}: ViewerStageSwitcherProps) {
+  const enabledModes = normalizeViewerStageModes(modes)
+
+  return (
+    <div
+      aria-label="Viewer layout"
+      className={cn(
+        'dark absolute top-4 left-1/2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-full border border-white/10 bg-neutral-950/82 p-1 text-white shadow-elevation-4 backdrop-blur-xl',
+        className,
+      )}
+      role="group"
+    >
+      {enabledModes.includes('3d') ? (
+        <StageButton
+          active={mode === '3d'}
+          icon={<Box />}
+          label="3D"
+          onClick={() => onChange('3d')}
+        />
+      ) : null}
+      {enabledModes.includes('2d') ? (
+        <StageButton
+          active={mode === '2d'}
+          icon={<MapIcon />}
+          label="2D"
+          onClick={() => onChange('2d')}
+        />
+      ) : null}
+      {enabledModes.includes('split') ? (
+        <StageButton
+          active={mode === 'split'}
+          className={hideSplitOnMobile && enabledModes.length > 1 ? 'hidden md:flex' : undefined}
+          icon={<Columns2 />}
+          label="Split"
+          onClick={() => onChange('split')}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+function StageButton({
+  active,
+  className,
+  icon,
+  label,
+  onClick,
+}: {
+  active: boolean
+  className?: string
+  icon: ReactNode
+  label: string
+  onClick: () => void
+}) {
+  return (
+    <button
+      aria-pressed={active}
+      className={cn(
+        'flex h-8 items-center gap-1.5 rounded-full px-3 font-medium text-xs',
+        active
+          ? 'bg-white text-neutral-950 shadow-sm'
+          : 'text-neutral-300 transition-colors hover:bg-white/10 hover:text-white',
+        className,
+      )}
+      onClick={onClick}
+      type="button"
+    >
+      <span className="[&>svg]:size-3.5">{icon}</span>
+      {label}
+    </button>
+  )
+}

package/src/components/viewer/viewer-stage.test.tsx

@@ -0,0 +1,47 @@
+import { describe, expect, test } from 'bun:test'
+import { LevelNode } from '@pascal-app/core/schema'
+import { renderToStaticMarkup } from 'react-dom/server'
+import type { FloorplanPreviewScene } from './floorplan-preview'
+import { ViewerStage } from './viewer-stage'
+
+const level = LevelNode.parse({ id: 'level_ground', type: 'level' })
+const scene: FloorplanPreviewScene = { nodes: { [level.id]: level } }
+
+describe('ViewerStage', () => {
+  test('owns synchronized 2D and 3D composition by default', () => {
+    const markup = renderToStaticMarkup(
+      <ViewerStage mode="split" scene={scene} showLevelSelector={false}>
+        <div data-test-viewer-content="" />
+      </ViewerStage>,
+    )
+
+    expect(markup).toContain('data-pascal-viewer-stage="split"')
+    expect(markup).toContain('data-pascal-navigation-sync="on"')
+    expect(markup).toContain('data-pascal-viewer-3d="true"')
+    expect(markup).toContain('data-floorplan-preview=""')
+    expect(markup).toContain('viewBox="0 0 48 48"')
+  })
+
+  test('keeps a 2D-only embed free of a 3D canvas mount', () => {
+    const markup = renderToStaticMarkup(
+      <ViewerStage mode="2d" modes={['2d']} scene={scene} showLevelSelector={false} />,
+    )
+
+    expect(markup).toContain('data-pascal-viewer-stage="2d"')
+    expect(markup).not.toContain('data-pascal-viewer-3d')
+    expect(markup).toContain('data-floorplan-preview=""')
+  })
+
+  test('supports an explicit navigation synchronization opt-out', () => {
+    const markup = renderToStaticMarkup(
+      <ViewerStage
+        mode="split"
+        scene={scene}
+        showLevelSelector={false}
+        synchronizeNavigation={false}
+      />,
+    )
+
+    expect(markup).toContain('data-pascal-navigation-sync="off"')
+  })
+})

package/src/components/viewer/viewer-stage.tsx

@@ -0,0 +1,221 @@
+'use client'
+
+import { type AnyNode, type AnyNodeId, useScene } from '@pascal-app/core'
+import { markPerfAction, useViewer } from '@pascal-app/viewer'
+import type { ReactNode } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { cn } from '../../lib/utils'
+import { FloorplanPreview, type FloorplanPreviewScene } from './floorplan-preview'
+import {
+  normalizeViewerStageModes,
+  resolveMobileViewerStageMode,
+  resolveViewerStageMode,
+  type ViewerStageMode,
+  viewerStageIncludes3D,
+} from './viewer-stage-modes'
+import { ViewerStageSwitcher } from './viewer-stage-switcher'
+
+export type ViewerStageProps = {
+  children?: ReactNode
+  className?: string
+  collapseSplitOnMobile?: boolean
+  compassHost?: Element | null
+  defaultMode?: ViewerStageMode
+  floorplanClassName?: string
+  levelId?: string | null
+  mode?: ViewerStageMode
+  modes?: readonly ViewerStageMode[]
+  onLevelChange?: (levelId: string) => void
+  onModeChange?: (mode: ViewerStageMode) => void
+  scene?: FloorplanPreviewScene | null
+  showCompass?: boolean
+  showLevelSelector?: boolean
+  showSwitcher?: boolean
+  switcherClassName?: string
+  synchronizeNavigation?: boolean
+  threeDClassName?: string
+}
+
+const EMPTY_LEVEL_IDS: string[] = []
+
+function levelNodeIds(nodes: Record<string, AnyNode>) {
+  return Object.values(nodes)
+    .filter((node) => node.type === 'level')
+    .sort(
+      (left, right) =>
+        ((left as { level?: number }).level ?? 0) - ((right as { level?: number }).level ?? 0),
+    )
+    .map((node) => node.id)
+}
+
+function selectViewerLevel(nodes: Record<string, AnyNode>, levelId: string) {
+  const level = nodes[levelId as AnyNodeId]
+  if (level?.type !== 'level') return
+  const building = level.parentId ? nodes[level.parentId as AnyNodeId] : null
+  const viewer = useViewer.getState()
+  viewer.setSelection({
+    buildingId: building?.type === 'building' ? building.id : null,
+    levelId: level.id,
+    selectedIds: [],
+    zoneId: null,
+  })
+  viewer.setLevelMode('solo')
+}
+
+export function ViewerStage({
+  children,
+  className,
+  collapseSplitOnMobile = true,
+  compassHost,
+  defaultMode,
+  floorplanClassName,
+  levelId,
+  mode: controlledMode,
+  modes,
+  onLevelChange,
+  onModeChange,
+  scene,
+  showCompass = true,
+  showLevelSelector = true,
+  showSwitcher = true,
+  switcherClassName,
+  synchronizeNavigation = true,
+  threeDClassName,
+}: ViewerStageProps) {
+  const enabledModes = normalizeViewerStageModes(modes)
+  const [internalMode, setInternalMode] = useState(() =>
+    resolveViewerStageMode(defaultMode, enabledModes),
+  )
+  const activeMode = resolveViewerStageMode(controlledMode ?? internalMode, enabledModes)
+  const storeLevelIds = useScene(
+    useShallow((state) => (scene ? EMPTY_LEVEL_IDS : levelNodeIds(state.nodes))),
+  )
+  const externalLevelIds = useMemo(() => (scene ? levelNodeIds(scene.nodes) : null), [scene])
+  const levelIds = externalLevelIds ?? storeLevelIds
+  const selectedLevelId = useViewer((state) => state.selection.levelId)
+  const [internalLevelId, setInternalLevelId] = useState<string | null>(null)
+  const [internalCompassHost, setInternalCompassHost] = useState<HTMLDivElement | null>(null)
+  const resolvedCompassHost = compassHost ?? internalCompassHost
+  const floorplanEnabled = enabledModes.includes('2d') || enabledModes.includes('split')
+  const threeDEnabled = viewerStageIncludes3D(enabledModes)
+  const mountFloorplan = floorplanEnabled || showCompass
+
+  const requestMode = useCallback(
+    (nextMode: ViewerStageMode) => {
+      if (!enabledModes.includes(nextMode)) return
+      if (controlledMode === undefined) setInternalMode(nextMode)
+      onModeChange?.(nextMode)
+    },
+    [controlledMode, enabledModes, onModeChange],
+  )
+
+  useEffect(() => {
+    if (controlledMode !== undefined) {
+      if (controlledMode !== activeMode) onModeChange?.(activeMode)
+      return
+    }
+    if (internalMode !== activeMode) setInternalMode(activeMode)
+  }, [activeMode, controlledMode, internalMode, onModeChange])
+
+  useEffect(() => {
+    if (!collapseSplitOnMobile) return
+    const mediaQuery = window.matchMedia('(max-width: 767px)')
+    const resolveMode = () => {
+      if (!mediaQuery.matches) return
+      const nextMode = resolveMobileViewerStageMode(activeMode, enabledModes)
+      if (nextMode !== activeMode) requestMode(nextMode)
+    }
+    resolveMode()
+    mediaQuery.addEventListener('change', resolveMode)
+    return () => mediaQuery.removeEventListener('change', resolveMode)
+  }, [activeMode, collapseSplitOnMobile, enabledModes, requestMode])
+
+  const chooseLevel = useCallback(
+    (nextLevelId: string, notify = true) => {
+      setInternalLevelId(nextLevelId)
+      if (notify && nextLevelId !== useViewer.getState().selection.levelId) {
+        markPerfAction('level-switch', nextLevelId)
+      }
+      selectViewerLevel(scene?.nodes ?? useScene.getState().nodes, nextLevelId)
+      if (notify) onLevelChange?.(nextLevelId)
+    },
+    [onLevelChange, scene],
+  )
+
+  useEffect(() => {
+    if (activeMode === '3d' || levelIds.length === 0) return
+    const nextLevelId =
+      (levelId && levelIds.includes(levelId) ? levelId : null) ??
+      (selectedLevelId && levelIds.includes(selectedLevelId) ? selectedLevelId : null) ??
+      (internalLevelId && levelIds.includes(internalLevelId) ? internalLevelId : null) ??
+      levelIds[0] ??
+      null
+    if (nextLevelId) chooseLevel(nextLevelId, false)
+  }, [activeMode, chooseLevel, internalLevelId, levelId, levelIds, selectedLevelId])
+
+  return (
+    <div
+      className={cn('relative h-full w-full overflow-hidden bg-neutral-100', className)}
+      data-pascal-navigation-sync={synchronizeNavigation ? 'on' : 'off'}
+      data-pascal-viewer-stage={activeMode}
+    >
+      {showCompass && compassHost === undefined ? (
+        <div className="pointer-events-none absolute inset-0 z-30" ref={setInternalCompassHost} />
+      ) : null}
+
+      {showSwitcher && enabledModes.length > 1 ? (
+        <ViewerStageSwitcher
+          className={switcherClassName}
+          hideSplitOnMobile={collapseSplitOnMobile}
+          mode={activeMode}
+          modes={enabledModes}
+          onChange={requestMode}
+        />
+      ) : null}
+
+      <div
+        className={
+          activeMode === 'split'
+            ? 'absolute inset-0 grid grid-rows-2 md:grid-cols-2 md:grid-rows-1'
+            : 'absolute inset-0'
+        }
+      >
+        {threeDEnabled ? (
+          <div
+            className={cn(
+              activeMode === '2d'
+                ? 'pointer-events-none invisible absolute inset-0 h-full w-full'
+                : 'relative h-full min-h-0 w-full min-w-0',
+              threeDClassName,
+            )}
+            data-pascal-viewer-3d
+          >
+            {children}
+          </div>
+        ) : null}
+
+        {mountFloorplan ? (
+          <FloorplanPreview
+            className={cn(
+              activeMode === '3d'
+                ? 'hidden'
+                : activeMode === 'split'
+                  ? 'min-h-0 min-w-0 border-border border-t md:border-t-0 md:border-l'
+                  : 'h-full w-full',
+              floorplanClassName,
+            )}
+            compassHost={resolvedCompassHost}
+            levelId={levelId ?? internalLevelId}
+            navigationVisible={activeMode !== '3d'}
+            onLevelChange={chooseLevel}
+            scene={scene}
+            showCompass={showCompass}
+            showLevelSelector={showLevelSelector}
+            synchronizeNavigation={synchronizeNavigation}
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+}

package/src/components/viewer-overlay.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { flushSync } from 'react-dom'
+import { requestWalkthroughPointerLock } from '../lib/walkthrough-pointer-lock'
 import useEditor from '../store/use-editor'
 import { ViewerControlsBar } from './viewer/viewer-controls-bar'
 import { ViewerSceneHeader } from './viewer/viewer-scene-header'
@@ -12,33 +13,12 @@ type ProjectOwner = {
   image: string | null
 }
 
-function requestWalkthroughPointerLock() {
-  const canvas = document.querySelector<HTMLCanvasElement>('[data-pascal-viewer-3d] canvas')
-  if (!canvas) return
-
-  if (!canvas.hasAttribute('tabindex')) {
-    canvas.tabIndex = -1
-  }
-  canvas.focus({ preventScroll: true })
-
-  if (document.pointerLockElement === canvas) return
-
-  try {
-    // The request can also reject ASYNC (browser cooldown after a recent
-    // unlock) — swallow it like the P-resume path; clicking the canvas
-    // re-requests once the cooldown passes.
-    const result = canvas.requestPointerLock?.() as Promise<void> | undefined
-    if (result && typeof result.catch === 'function') result.catch(() => {})
-  } catch {
-    return
-  }
-}
-
 interface ViewerOverlayProps {
   projectName?: string | null
   owner?: ProjectOwner | null
   canShowScans?: boolean
   canShowGuides?: boolean
+  hideBottomBar?: boolean
   onBack?: () => void
 }
 
@@ -47,17 +27,20 @@ export const ViewerOverlay = ({
   owner,
   canShowScans = true,
   canShowGuides = true,
+  hideBottomBar = false,
   onBack,
 }: ViewerOverlayProps) => (
   <>
     <ViewerSceneHeader onBack={onBack} owner={owner} projectName={projectName} />
-    <ViewerControlsBar
-      canShowGuides={canShowGuides}
-      canShowScans={canShowScans}
-      onWalkthroughToggle={() => {
-        flushSync(() => useEditor.getState().setFirstPersonMode(true))
-        requestWalkthroughPointerLock()
-      }}
-    />
+    {!hideBottomBar ? (
+      <ViewerControlsBar
+        canShowGuides={canShowGuides}
+        canShowScans={canShowScans}
+        onWalkthroughToggle={() => {
+          flushSync(() => useEditor.getState().setFirstPersonMode(true))
+          requestWalkthroughPointerLock()
+        }}
+      />
+    ) : null}
   </>
 )