@pascal-app/editor 0.7.0 → 0.8.0

package/src/components/editor/floorplan-panel.tsx

@@ -4092,7 +4092,6 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
               d={path}
               fill={isDeleteHovered ? palette.deleteFill : palette.slabFill}
               fillRule="evenodd"
-              opacity={slabFillOpacity}
               onClick={
                 canSelectSlabs
                   ? (event) => {
@@ -4111,9 +4110,10 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
               }
               onPointerEnter={canSelectSlabs ? () => onSlabHoverChange(slab.id) : undefined}
               onPointerLeave={canSelectSlabs ? () => onSlabHoverChange(null) : undefined}
+              opacity={slabFillOpacity}
               pointerEvents={canSelectSlabs ? undefined : 'none'}
-              style={canSelectSlabs ? { cursor: EDITOR_CURSOR } : undefined}
               stroke="none"
+              style={canSelectSlabs ? { cursor: EDITOR_CURSOR } : undefined}
             />
             {isSelected && !isDeleteHovered ? (
               <path
@@ -4168,7 +4168,6 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
               d={path}
               fill={isDeleteHovered ? palette.deleteFill : palette.ceilingFill}
               fillRule="evenodd"
-              opacity={ceilingFillOpacity}
               onClick={
                 canSelectCeilings
                   ? (event) => {
@@ -4189,9 +4188,10 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
                 canSelectCeilings ? () => onCeilingHoverChange(ceiling.id) : undefined
               }
               onPointerLeave={canSelectCeilings ? () => onCeilingHoverChange(null) : undefined}
+              opacity={ceilingFillOpacity}
               pointerEvents={canSelectCeilings ? undefined : 'none'}
-              style={canSelectCeilings ? { cursor: EDITOR_CURSOR } : undefined}
               stroke="none"
+              style={canSelectCeilings ? { cursor: EDITOR_CURSOR } : undefined}
             />
             {isSelected && !isDeleteHovered ? (
               <path
@@ -4298,8 +4298,8 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
               <polygon
                 fill={`url(#${wallSelectionHatchId})`}
                 opacity={1}
-                points={points}
                 pointerEvents="none"
+                points={points}
               />
             ) : null}
           </g>
@@ -4427,8 +4427,8 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
                 {canSelectGeometry && (
                   <polygon
                     fill="transparent"
-                    points={points}
                     pointerEvents="all"
+                    points={points}
                     stroke="transparent"
                     strokeWidth={FLOORPLAN_OPENING_HIT_STROKE_WIDTH}
                     vectorEffect="non-scaling-stroke"
@@ -4538,8 +4538,8 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
               {canSelectGeometry && (
                 <polygon
                   fill="transparent"
-                  points={points}
                   pointerEvents="all"
+                  points={points}
                   stroke="transparent"
                   strokeWidth={FLOORPLAN_OPENING_HIT_STROKE_WIDTH}
                   vectorEffect="non-scaling-stroke"
@@ -5218,8 +5218,8 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
               {canSelectGeometry && (
                 <polygon
                   fill="transparent"
-                  points={points}
                   pointerEvents="all"
+                  points={points}
                   stroke="transparent"
                   strokeWidth={FLOORPLAN_OPENING_HIT_STROKE_WIDTH}
                   vectorEffect="non-scaling-stroke"
@@ -5290,8 +5290,8 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
                           d={foldingPath}
                           fill="none"
                           stroke={doorStroke}
-                          strokeLinejoin="round"
                           strokeLinecap="round"
+                          strokeLinejoin="round"
                           strokeWidth={isSelected || isSelectionHighlighted ? '1.8' : '1.25'}
                           vectorEffect="non-scaling-stroke"
                         />
@@ -5963,6 +5963,12 @@ function FloorplanItemImage({
 }) {
   const resolvedUrl = useResolvedAssetUrl(url)
   if (!resolvedUrl) return null
+  // The PNG is captured with the modal's top-down camera (default up = +Y),
+  // so its pixel-right is world +X and pixel-up is world -Z. The plan SVG
+  // negates both axes (`toSvgX(v) = -v`, `toSvgY(v) = -v`), which together
+  // are a 180° rotation — so the captured image lands upside-down /
+  // mirrored when overlaid as-is. Bake that 180° into the image transform
+  // here; the panel / modal previews use the PNG directly and stay correct.
   const rotationDeg = (-rotation * 180) / Math.PI + 180
   return (
     <g
@@ -6168,6 +6174,7 @@ const FloorplanNodeLayer = memo(function FloorplanNodeLayer({
           }
           points={points}
           stroke={stroke}
+          strokeOpacity={1}
           strokeWidth={
             isSelectionActive ? FLOORPLAN_SELECTED_WALL_STROKE_WIDTH : FLOORPLAN_WALL_STROKE_WIDTH
           }
@@ -6217,8 +6224,8 @@ const FloorplanNodeLayer = memo(function FloorplanNodeLayer({
           <polygon
             fill={`url(#${wallSelectionHatchId})`}
             opacity={1}
-            points={points}
             pointerEvents="none"
+            points={points}
           />
         ) : null}
         {itemDimensionMeasurements.length > 0 ? (
@@ -6308,8 +6315,8 @@ const FloorplanNodeLayer = memo(function FloorplanNodeLayer({
         <polygon
           fill={fill}
           fillOpacity={isDeleteHovered ? 0.82 : 0.92}
-          points={FLOORPLAN_SPAWN_ARROW_POINTS}
           pointerEvents="none"
+          points={FLOORPLAN_SPAWN_ARROW_POINTS}
           stroke={stroke}
           strokeLinejoin="round"
           strokeWidth={0.055}
@@ -7224,6 +7231,11 @@ const FloorplanPolygonHandleLayer = memo(function FloorplanPolygonHandleLayer({
               y2={endSvg.y}
             />
             <line
+              onPointerDown={
+                onEdgePointerDown
+                  ? (event) => onEdgePointerDown(nodeId, edgeIndex, event)
+                  : undefined
+              }
               pointerEvents="stroke"
               stroke="transparent"
               strokeLinecap="round"
@@ -7234,11 +7246,6 @@ const FloorplanPolygonHandleLayer = memo(function FloorplanPolygonHandleLayer({
               x2={endSvg.x}
               y1={startSvg.y}
               y2={endSvg.y}
-              onPointerDown={
-                onEdgePointerDown
-                  ? (event) => onEdgePointerDown(nodeId, edgeIndex, event)
-                  : undefined
-              }
             />
           </g>
         )
@@ -9838,7 +9845,7 @@ export function FloorplanPanel() {
       zoneVertexDragState != null ||
       isPolygonDraftBuildActive
 
-    if (!hasUserAdjustedViewportRef.current && !transientFloorplanFit) {
+    if (!(hasUserAdjustedViewportRef.current || transientFloorplanFit)) {
       setViewport((current) =>
         floorplanViewportEquals(current, fittedViewport) ? current : fittedViewport,
       )
@@ -10970,6 +10977,14 @@ export function FloorplanPanel() {
     }
   }, [isItemPlacementPreviewActive, scheduleMovingFloorplanNodeRefresh])
 
+  useEffect(() => {
+    if (!hasPendingItemMeshFootprints) {
+      return
+    }
+
+    scheduleMovingFloorplanNodeRefresh()
+  }, [hasPendingItemMeshFootprints, scheduleMovingFloorplanNodeRefresh])
+
   // Subscribe to the live-transforms store so rotation/position changes that
   // *don't* go through pointer events still refresh the floorplan — e.g. R/T
   // keyboard rotation during placement updates `useLiveTransforms` but emits
@@ -10985,14 +11000,6 @@ export function FloorplanPanel() {
     return unsubscribe
   }, [isItemPlacementPreviewActive, scheduleMovingFloorplanNodeRefresh])
 
-  useEffect(() => {
-    if (!hasPendingItemMeshFootprints) {
-      return
-    }
-
-    scheduleMovingFloorplanNodeRefresh()
-  }, [hasPendingItemMeshFootprints, scheduleMovingFloorplanNodeRefresh])
-
   useEffect(() => {
     if (!(movingNode?.type === 'door' || movingNode?.type === 'window')) {
       return
@@ -16132,17 +16139,13 @@ export function FloorplanPanel() {
             onDuplicate: handleSelectedItemDuplicate,
             onMove: handleSelectedItemMove,
           }}
+          offsetY={FLOORPLAN_ACTION_MENU_OFFSET_Y}
           opening={{
             position: selectedOpeningActionMenuPosition,
             onDelete: handleSelectedOpeningDelete,
             onDuplicate: handleSelectedOpeningDuplicate,
             onMove: handleSelectedOpeningMove,
           }}
-          spawn={{
-            position: selectedSpawnActionMenuPosition,
-            onDelete: handleSelectedSpawnDelete,
-            onMove: handleSelectedSpawnMove,
-          }}
           roof={{
             position: selectedRoofActionMenuPosition,
             onDelete: handleSelectedRoofDelete,
@@ -16157,6 +16160,11 @@ export function FloorplanPanel() {
               : handleSelectedSlabDelete,
             onMove: selectedSlabEditingHole ? handleSelectedSlabHoleMove : handleSelectedSlabMove,
           }}
+          spawn={{
+            position: selectedSpawnActionMenuPosition,
+            onDelete: handleSelectedSpawnDelete,
+            onMove: handleSelectedSpawnMove,
+          }}
           stair={{
             position: selectedStairActionMenuPosition,
             onDelete: handleSelectedStairDelete,
@@ -16168,7 +16176,6 @@ export function FloorplanPanel() {
             onDelete: handleSelectedWallDelete,
             onMove: handleSelectedWallMove,
           }}
-          offsetY={FLOORPLAN_ACTION_MENU_OFFSET_Y}
         />
 
         {referenceScaleDraft && (
@@ -16201,7 +16208,7 @@ export function FloorplanPanel() {
             </div>
 
             <div className="mb-3 rounded-xl border border-border/70 bg-white/5 px-3 py-2">
-              <div className="text-muted-foreground text-[11px] uppercase tracking-wide">
+              <div className="text-[11px] text-muted-foreground uppercase tracking-wide">
                 Drawn line
               </div>
               <div className="mt-1 font-medium text-sm">
@@ -16363,8 +16370,8 @@ export function FloorplanPanel() {
               <FloorplanGuideLayer
                 activeGuideInteractionGuideId={activeGuideInteractionGuideId}
                 activeGuideInteractionMode={activeGuideInteractionMode}
-                guideUi={guideUi}
                 guides={displayGuides}
+                guideUi={guideUi}
                 isInteractive={canInteractWithGuides}
                 onGuideSelect={handleGuideSelect}
                 onGuideTranslateStart={handleGuideTranslateStart}
@@ -16385,6 +16392,8 @@ export function FloorplanPanel() {
                 hoveredSlabId={hoveredSlabId}
                 hoveredWallId={hoveredWallId}
                 isDeleteMode={isDeleteMode}
+                isGuideTraceVisible={isGuideTraceVisible}
+                metersPerUnit={calibratedMetersPerUnit}
                 onCeilingDoubleClick={handleCeilingDoubleClick}
                 onCeilingHoverChange={handleCeilingHoverChange}
                 onCeilingSelect={handleCeilingSelect}
@@ -16401,11 +16410,9 @@ export function FloorplanPanel() {
                 openingsPolygons={openingsPolygons}
                 palette={palette}
                 selectedIdSet={selectedIdSet}
-                slabSelectionHatchId={slabSelectionHatchId}
                 slabPolygons={displaySlabPolygons}
+                slabSelectionHatchId={slabSelectionHatchId}
                 unit={unit}
-                metersPerUnit={calibratedMetersPerUnit}
-                isGuideTraceVisible={isGuideTraceVisible}
                 wallPolygons={displayWallPolygons}
                 wallSelectionHatchId={wallSelectionHatchId}
               />
@@ -16483,8 +16490,8 @@ export function FloorplanPanel() {
 
               <FloorplanReferenceScaleLayer
                 draft={referenceScaleDraft}
-                guideUi={guideUi}
                 guides={displayGuides}
+                guideUi={guideUi}
                 palette={palette}
                 unit={unit}
                 unitsPerPixel={floorplanUnitsPerPixel}

package/src/components/editor/index.tsx

@@ -20,6 +20,7 @@ import {
 import { ViewerOverlay } from '../../components/viewer-overlay'
 import { ViewerZoneSystem } from '../../components/viewer-zone-system'
 import { type PresetsAdapter, PresetsProvider } from '../../contexts/presets-context'
+import { useAutoFrame } from '../../hooks/use-auto-frame'
 import { type SaveStatus, useAutoSave } from '../../hooks/use-auto-save'
 import { useKeyboard } from '../../hooks/use-keyboard'
 import {
@@ -64,6 +65,7 @@ import { Grid } from './grid'
 import { PresetThumbnailGenerator } from './preset-thumbnail-generator'
 import { SelectionManager } from './selection-manager'
 import { SiteEdgeLabels } from './site-edge-labels'
+import { SnapshotCaptureOverlay } from './snapshot-capture-overlay'
 import { type SnapshotCameraData, ThumbnailGenerator } from './thumbnail-generator'
 import { WallMeasurementLabel } from './wall-measurement-label'
 
@@ -76,12 +78,12 @@ const PAINT_CURSOR_BADGE_DISABLED_COLOR = '#94a3b8'
 const PAINT_CURSOR_BADGE_OFFSET_X = 14
 const PAINT_CURSOR_BADGE_OFFSET_Y = 14
 const EDITOR_HOVER_STYLES: HoverStyles = {
-  default: { visibleColor: 0x00_aaff, hiddenColor: 0xf3_ff47, strength: 5, pulse: true },
-  delete: { visibleColor: 0xef_4444, hiddenColor: 0x99_1b1b, strength: 6, pulse: false },
-  'paint-ready': { visibleColor: 0xf5_9e0b, hiddenColor: 0xfd_e068, strength: 5, pulse: true },
+  default: { visibleColor: 0x00_aa_ff, hiddenColor: 0xf3_ff_47, strength: 5, pulse: true },
+  delete: { visibleColor: 0xef_44_44, hiddenColor: 0x99_1b_1b, strength: 6, pulse: false },
+  'paint-ready': { visibleColor: 0xf5_9e_0b, hiddenColor: 0xfd_e0_68, strength: 5, pulse: true },
   'paint-disabled': {
-    visibleColor: 0x94_a3b8,
-    hiddenColor: 0x47_5569,
+    visibleColor: 0x94_a3_b8,
+    hiddenColor: 0x47_55_69,
     strength: 4,
     pulse: false,
   },
@@ -462,7 +464,7 @@ function ViewerCanvasControlsHint({
     <div className="pointer-events-none absolute top-14 left-1/2 z-40 max-w-[calc(100%-2rem)] -translate-x-1/2">
       <section
         aria-label="Camera controls hint"
-        className="pointer-events-auto flex items-start gap-3 rounded-2xl border border-border/35 bg-background/90 px-3.5 py-2.5 shadow-[0_22px_40px_-28px_rgba(15,23,42,0.65),0_10px_24px_-20px_rgba(15,23,42,0.55)] backdrop-blur-xl"
+        className="pointer-events-auto flex items-start gap-3 rounded-2xl border border-border/35 bg-background/90 px-3.5 py-2.5 shadow-elevation-4 backdrop-blur-xl"
       >
         <div className="grid min-w-0 flex-1 grid-cols-3 items-start divide-x divide-border/18">
           {hints.map((hint) => (
@@ -753,7 +755,7 @@ function PaintCursorLayer({
       (activePaintMaterial.material !== undefined ||
         activePaintMaterial.materialPreset !== undefined),
   )
-  const label = !hasMaterial ? 'Choose material' : `Paint ${activePaintTarget}`
+  const label = hasMaterial ? `Paint ${activePaintTarget}` : 'Choose material'
   const icon = 'mdi:format-color-fill'
 
   useLayoutEffect(() => {
@@ -786,16 +788,16 @@ function PaintCursorLayer({
 const ViewerCanvas = memo(function ViewerCanvas({
   isVersionPreviewMode,
   isLoading,
+  isFirstPersonMode,
   hasLoadedInitialScene,
   showLoader,
-  isFirstPersonMode,
   onThumbnailCapture,
 }: {
   isVersionPreviewMode: boolean
   isLoading: boolean
+  isFirstPersonMode: boolean
   hasLoadedInitialScene: boolean
   showLoader: boolean
-  isFirstPersonMode: boolean
   onThumbnailCapture?: (blob: Blob, cameraData: SnapshotCameraData) => void
 }) {
   const viewMode = useEditor((s) => s.viewMode)
@@ -837,7 +839,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
       window.removeEventListener('pointermove', handlePointerMove)
       window.removeEventListener('pointerup', handlePointerUp)
     }
-  }, [setFloorplanPaneRatio])
+  }, [])
 
   useEffect(() => {
     setIsCameraControlsHintVisible(!readCameraControlsHintDismissed())
@@ -940,7 +942,9 @@ export default function Editor({
   commandPaletteEmptyAction,
 }: EditorProps) {
   const isFirstPersonMode = useEditor((s) => s.isFirstPersonMode)
+
   useKeyboard({ isVersionPreviewMode, disabled: isFirstPersonMode })
+
   const { isLoadingSceneRef } = useAutoSave({
     onSave,
     onDirty,
@@ -951,8 +955,7 @@ export default function Editor({
   const [isSceneLoading, setIsSceneLoading] = useState(false)
   const [hasLoadedInitialScene, setHasLoadedInitialScene] = useState(false)
   const isPreviewMode = useEditor((s) => s.isPreviewMode)
-  const firstPersonPreviousLevelRef = useRef(useViewer.getState().selection.levelId)
-  const wasFirstPersonModeRef = useRef(isFirstPersonMode)
+  const isCaptureMode = useEditor((s) => s.isCaptureMode)
 
   const sidebarWidth = useSidebarStore((s) => s.width)
   const isSidebarCollapsed = useSidebarStore((s) => s.isCollapsed)
@@ -970,39 +973,6 @@ export default function Editor({
     }
   }, [projectId])
 
-  useEffect(() => {
-    const wasFirstPersonMode = wasFirstPersonModeRef.current
-    wasFirstPersonModeRef.current = isFirstPersonMode
-
-    if (isFirstPersonMode && !wasFirstPersonMode) {
-      const viewer = useViewer.getState()
-      firstPersonPreviousLevelRef.current = viewer.selection.levelId
-      viewer.setCameraMode('perspective')
-      viewer.setWallMode('up')
-      viewer.setWalkthroughMode(true)
-      viewer.setSelection({ selectedIds: [], zoneId: null })
-      return
-    }
-
-    if (!(wasFirstPersonMode && !isFirstPersonMode)) return
-
-    const viewer = useViewer.getState()
-    const previousLevelId = firstPersonPreviousLevelRef.current
-    firstPersonPreviousLevelRef.current = null
-    viewer.setWalkthroughMode(false)
-
-    if (!previousLevelId) return
-
-    const previousLevelNode = useScene.getState().nodes[previousLevelId]
-    if (previousLevelNode?.type === 'level') {
-      viewer.setSelection({
-        levelId: previousLevelId,
-        zoneId: null,
-        selectedIds: [],
-      })
-    }
-  }, [isFirstPersonMode])
-
   // Load scene on mount (or when onLoad identity changes, e.g. project switch)
   useEffect(() => {
     let cancelled = false
@@ -1064,6 +1034,42 @@ export default function Editor({
 
   const showLoader = isLoading || isSceneLoading
 
+  const firstPersonPreviousLevelRef = useRef(useViewer.getState().selection.levelId)
+  const wasFirstPersonModeRef = useRef(isFirstPersonMode)
+
+  useEffect(() => {
+    const wasFirstPersonMode = wasFirstPersonModeRef.current
+    wasFirstPersonModeRef.current = isFirstPersonMode
+
+    if (isFirstPersonMode && !wasFirstPersonMode) {
+      const viewer = useViewer.getState()
+      firstPersonPreviousLevelRef.current = viewer.selection.levelId
+      viewer.setCameraMode('perspective')
+      viewer.setWallMode('up')
+      viewer.setWalkthroughMode(true)
+      viewer.setSelection({ selectedIds: [], zoneId: null })
+      return
+    }
+
+    if (!(wasFirstPersonMode && !isFirstPersonMode)) return
+
+    const viewer = useViewer.getState()
+    const previousLevelId = firstPersonPreviousLevelRef.current
+    firstPersonPreviousLevelRef.current = null
+    viewer.setWalkthroughMode(false)
+
+    if (!previousLevelId) return
+
+    const previousLevelNode = useScene.getState().nodes[previousLevelId]
+    if (previousLevelNode?.type === 'level') {
+      viewer.setSelection({
+        levelId: previousLevelId,
+        zoneId: null,
+        selectedIds: [],
+      })
+    }
+  }, [isFirstPersonMode])
+
   const previewViewerContent = (
     <Viewer hoverStyles={EDITOR_HOVER_STYLES} selectionManager="default">
       <ExportManager />
@@ -1135,21 +1141,24 @@ export default function Editor({
               navbarSlot={navbarSlot}
               overlays={
                 <>
-                  <FloatingLevelSelector />
-                  {!isVersionPreviewMode && (
+                  {!isCaptureMode && <FloatingLevelSelector />}
+                  {!(isVersionPreviewMode || isCaptureMode) && (
                     <div className="pointer-events-auto">
                       <ActionMenu />
                     </div>
                   )}
-                  {!isVersionPreviewMode && (
+                  {!(isVersionPreviewMode || isCaptureMode) && (
                     <div className="pointer-events-auto">
                       <PanelManager />
                     </div>
                   )}
-                  <div className="pointer-events-auto">
-                    <HelperManager />
-                  </div>
+                  {!isCaptureMode && (
+                    <div className="pointer-events-auto">
+                      <HelperManager />
+                    </div>
+                  )}
                   {viewerBanner}
+                  {projectId ? <SnapshotCaptureOverlay projectId={projectId} /> : null}
                 </>
               }
               renderTabContent={renderTabContent}
@@ -1159,14 +1168,14 @@ export default function Editor({
               viewerToolbarLeft={viewerToolbarLeft}
               viewerToolbarRight={viewerToolbarRight}
             />
+            <EditorCommands />
+            <CommandPalette emptyAction={commandPaletteEmptyAction} />
             {/* First-person overlay — rendered on top of normal layout */}
             {isFirstPersonMode && (
               <div className="pointer-events-none fixed inset-0 z-50">
                 <FirstPersonOverlay onExit={() => useEditor.getState().setFirstPersonMode(false)} />
               </div>
             )}
-            <EditorCommands />
-            <CommandPalette emptyAction={commandPaletteEmptyAction} />
           </>
         )}
       </PresetsProvider>
@@ -1222,6 +1231,12 @@ export default function Editor({
                 <HelperManager />
               </div>
             </ViewerOverlays>
+            {/* First-person overlay — rendered on top of normal layout */}
+            {isFirstPersonMode && (
+              <div className="pointer-events-none fixed inset-0 z-50">
+                <FirstPersonOverlay onExit={() => useEditor.getState().setFirstPersonMode(false)} />
+              </div>
+            )}
           </>
         )}
       </div>

package/src/components/editor/selection-manager.tsx

@@ -341,7 +341,7 @@ function applySingleSurfacePaintPreview(
   if (node.type === 'ceiling') {
     const root = getRegisteredMesh(node.id)
     const overlay = root?.getObjectByName('ceiling-grid') as Mesh | undefined
-    if (!root || !overlay) return null
+    if (!(root && overlay)) return null
 
     const previewColor =
       getMaterialPresetByRef(material.materialPreset)?.mapProperties.color ??
@@ -999,7 +999,6 @@ export const SelectionManager = () => {
       'roof-segment',
       'stair',
       'stair-segment',
-      'spawn',
       'window',
       'door',
       'zone',
@@ -1392,6 +1391,7 @@ export const SelectionManager = () => {
       'roof-segment',
       'stair',
       'stair-segment',
+      'spawn',
       'window',
       'door',
       'zone',