setFloorplanHovered(true)}
onPointerLeave={() => {
setFloorplanHovered(false)
setFloorplanCursorPosition(null)
}}
- style={{
- cursor: activeResizeDirection ? resizeCursorByDirection[activeResizeDirection] : undefined,
- height: panelRect.height,
- left: panelRect.x,
- top: panelRect.y,
- visibility: isPanelReady ? 'visible' : 'hidden',
- width: panelRect.width,
- }}
+ ref={containerRef}
>
- {resizeHandleConfigurations.map((handle) => (
-
handleResizeStart(handle.direction, event)}
- />
- ))}
-
-
-
-
event.stopPropagation()}
- >
-
{
- clearLevelMenuCloseTimeout()
- setIsLevelMenuOpen(hasFloorplanLevelSwitcher ? open : false)
- }}
- open={isLevelMenuOpen}
- >
-
-
-
- {hasFloorplanLevelSwitcher ? (
-
-
- {floorplanLevels.map((level) => (
-
- {getLevelDisplayLabel(level)}
-
- ))}
-
-
- ) : null}
-
-
-
-
-
event.stopPropagation()}
- >
-
-
-
-
-
-
-
-
- {canUseSiteEditShortcut
- ? isSiteEditShortcutActive
- ? 'Exit site editing'
- : 'Edit site'
- : 'Site editing is only available on ground level'}
-
-
-
-
-
-
-
-
-
-
-
- {showGuides ? 'Hide guide images' : 'Show guide images'}
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
Guide images
-
{guideImagesDescription}
-
-
-
- {hasGuideImages ? (
-
- {levelGuides.map((guide, index) => (
-
-
-
-
- {guide.name || `Guide image ${index + 1}`}
-
-
-
-
handleGuideOpacityChange(guide.id, value)}
- precision={0}
- step={1}
- unit="%"
- value={guide.opacity}
- />
-
- ))}
-
- ) : (
-
- No guide images on this level yet.
-
- )}
-
-
-
-
- {FLOORPLAN_QUICK_BUILD_TOOLS.map((quickTool) => {
- const isActive = phase === 'structure' && mode === 'build' && tool === quickTool.id
-
- return (
-
-
-
-
-
- {quickTool.label}
-
-
- )
- })}
-
-
-
-
-
-
-
-
- Click select
-
-
-
-
-
-
-
-
- Box select
-
-
-
-
-
-
-
-
-
- Close floorplan
-
-
-
-
-
{activeFloorplanCursorIndicator && floorplanCursorPosition && !isPanning && (
Promise
- onSave?: (scene: SceneGraph) => Promise
- onDirty?: () => void
- onSaveStatusChange?: (status: SaveStatus) => void
-
- // Version preview
- previewScene?: SceneGraph
- isVersionPreviewMode?: boolean
-
- // Loading indicator (e.g. project fetching in community mode)
- isLoading?: boolean
-
- // Thumbnail
- onThumbnailCapture?: (blob: Blob) => void
-
- // Panel config (passed through to sidebar panels)
- settingsPanelProps?: SettingsPanelProps
- sitePanelProps?: SitePanelProps
-
- // Presets storage backend (defaults to localStorage)
- presetsAdapter?: PresetsAdapter
-}
-
-function EditorSceneCrashFallback() {
- return (
-
-
-
The editor scene failed to render
-
- You can retry the scene or return home without reloading the whole app shell.
-
-
-
-
- Back to home
-
-
-
-
- {keys.map((key, index) => (
-
- {index > 0 ? + : null}
-
-
- ))}
-
-
- {hint.action}
-
-
-
- {hint.alternativeKeys ? (
- <>
- /
-
-
- ) : null}
-
-
-
-
- {hints.map((hint) => (
-
- ))}
-
-
-
-
-
-
- Dismiss
-
-
-
-
- {showLoader && (
-
-
-
- )}
-
- {!showLoader && isCameraControlsHintVisible && !isFirstPersonMode ? (
-
- ) : null}
-
- {isFirstPersonMode ? (
-
useEditor.getState().setFirstPersonMode(false)}
- />
- ) : !isLoading && isPreviewMode ? (
- useEditor.getState().setPreviewMode(false)} />
- ) : (
- <>
-
-
- {isFloorplanOpen && }
-
-
-
-
-
-
- )}
-
- }>
-
-
-
- {!isPreviewMode && !isFirstPersonMode && }
- {!isPreviewMode && !isFirstPersonMode && }
- {!isPreviewMode && !isFirstPersonMode && }
-
- {isPreviewMode || isFirstPersonMode ? : }
-
-
- {!isPreviewMode && !isFirstPersonMode && (
-
- )}
- {!(isPreviewMode || isFirstPersonMode || isLoading) && }
-
- {isFirstPersonMode && }
-
-
- {!isPreviewMode && !isFirstPersonMode && }
- {(isPreviewMode || isFirstPersonMode) && }
-
-
+
+
The editor scene failed to render
+
+ You can retry the scene or return home without reloading the whole app shell.
+
+
+
+
+ Back to home
+
+
+
+
+ {/* Inner: overflow-hidden clips content to rounded corners */}
+
+ {isCollapsed ? (
+
+ ) : (
+ children
+ )}
+
+
+ {/* Handle: extends into the gap, centered on the gap midpoint */}
+ {!isCollapsed && (
+
+ )}
+
+ {children}
+
+ )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+function SelectionPersistenceManager({ enabled }: { enabled: boolean }) {
+ const selection = useViewer((state) => state.selection)
+
+ useEffect(() => {
+ if (!enabled) {
+ return
+ }
+
+ writePersistedSelection(selection)
+ }, [enabled, selection])
+
+ return null
+}
+
+type ShortcutKey = {
+ value: string
+}
+
+type CameraControlHint = {
+ action: string
+ keys: ShortcutKey[]
+ alternativeKeys?: ShortcutKey[]
+}
+
+const EDITOR_CAMERA_CONTROL_HINTS: CameraControlHint[] = [
+ {
+ action: 'Pan',
+ keys: [{ value: 'Space' }, { value: 'Left click' }],
+ },
+ { action: 'Rotate', keys: [{ value: 'Right click' }] },
+ { action: 'Zoom', keys: [{ value: 'Scroll' }] },
+]
+
+const PREVIEW_CAMERA_CONTROL_HINTS: CameraControlHint[] = [
+ { action: 'Pan', keys: [{ value: 'Left click' }] },
+ { action: 'Rotate', keys: [{ value: 'Right click' }] },
+ { action: 'Zoom', keys: [{ value: 'Scroll' }] },
+]
+
+const CAMERA_SHORTCUT_KEY_META: Record = {
+ 'Left click': {
+ icon: 'ph:mouse-left-click-fill',
+ label: 'Left click',
+ },
+ 'Middle click': {
+ icon: 'qlementine-icons:mouse-middle-button-16',
+ label: 'Middle click',
+ },
+ 'Right click': {
+ icon: 'ph:mouse-right-click-fill',
+ label: 'Right click',
+ },
+ Scroll: {
+ icon: 'qlementine-icons:mouse-middle-button-16',
+ label: 'Scroll wheel',
+ },
+ Space: {
+ icon: 'lucide:space',
+ label: 'Space',
+ },
+}
+
+function readCameraControlsHintDismissed(): boolean {
+ if (typeof window === 'undefined') {
+ return false
+ }
+
+ try {
+ return window.localStorage.getItem(CAMERA_CONTROLS_HINT_DISMISSED_STORAGE_KEY) === '1'
+ } catch {
+ return false
+ }
+}
+
+function writeCameraControlsHintDismissed(dismissed: boolean) {
+ if (typeof window === 'undefined') {
+ return
+ }
+
+ try {
+ if (dismissed) {
+ window.localStorage.setItem(CAMERA_CONTROLS_HINT_DISMISSED_STORAGE_KEY, '1')
+ return
+ }
+
+ window.localStorage.removeItem(CAMERA_CONTROLS_HINT_DISMISSED_STORAGE_KEY)
+ } catch {}
+}
+
+function InlineShortcutKey({ shortcutKey }: { shortcutKey: ShortcutKey }) {
+ const meta = CAMERA_SHORTCUT_KEY_META[shortcutKey.value]
+
+ if (meta?.icon) {
+ return (
+
+
+ {meta.label}
+
+ )
+ }
+
+ return (
+
+ {meta?.text ?? shortcutKey.value}
+
+ )
+}
+
+function ShortcutSequence({ keys }: { keys: ShortcutKey[] }) {
+ return (
+
+ {keys.map((key, index) => (
+
+ {index > 0 ? + : null}
+
+
+ ))}
+
+
+ {hint.action}
+
+
+
+ {hint.alternativeKeys ? (
+ <>
+ /
+
+
+ ) : null}
+
+
+
+
+ {hints.map((hint) => (
+
+ ))}
+
+
+
+
+
+
+ Dismiss
+
+
+
+
+ {/* 2D floorplan — always mounted once shown, hidden via CSS to preserve state */}
+
+
+
+
+ {viewMode === 'split' && (
+
+ )}
+
+
+ {/* 3D viewer — always mounted, hidden via CSS to avoid destroying the WebGL context */}
+
+ {!showLoader && isCameraControlsHintVisible && !isFirstPersonMode ? (
+
+ ) : null}
+
+ {viewerSceneContent}
+
+
+
+
+ )}
+
+ {!isLoading && isPreviewMode ? (
+
+
useEditor.getState().setPreviewMode(false)} />
+ {previewViewerContent}
+
+ useEditor.getState().setFirstPersonMode(false)}
+ />
+
+ )}
+
+
+
+
+
+
+
+
+ }
+ renderTabContent={renderTabContent}
+ sidebarTabs={tabBarTabs}
+ viewerContent={viewerCanvas}
+ viewerToolbarLeft={viewerToolbarLeft}
+ viewerToolbarRight={viewerToolbarRight}
+ />
+
+
+
+ )}
+
+ )
+ }
+
+ // ── V1 layout (existing) ──
+ // p-3 (12px) padding on root + gap-3 (12px) between sidebar and viewer + sidebar width
+ const LAYOUT_PADDING = 12
+ const LAYOUT_GAP = 12
+ const overlayLeft = LAYOUT_PADDING + (isSidebarCollapsed ? 8 : sidebarWidth) + LAYOUT_GAP
+
+ return (
+
+
+ {showLoader && (
+
+
+
+ )}
+
+ {!isLoading && isPreviewMode ? (
+ <>
+
useEditor.getState().setPreviewMode(false)} />
+ {previewViewerContent}
+
+ ) : (
+ <>
+ {/* Sidebar */}
+
+
+
+
+ {/* Viewer area */}
+
+ {viewerCanvas}
+
+
+ {/* Fixed UI overlays scoped to the viewer area */}
+
+
+
+
+
+
+
+
+ )}
+
- {edge.dist.toFixed(2)}m
+
+ {formatMeasurement(edge.dist, unit)}