@pascal-app/editor 1.0.0-beta.3 → 1.0.0-beta.5

package/src/components/editor/index.tsx

@@ -33,6 +33,7 @@ import {
 import { disposeSFXBus, initSFXBus } from '../../lib/sfx-bus'
 import useEditor from '../../store/use-editor'
 import useFloorplanMode from '../../store/use-floorplan-mode'
+import useSessionGroups from '../../store/use-session-groups'
 import { CeilingSelectionAffordanceSystem } from '../systems/ceiling/ceiling-selection-affordance-system'
 import { CeilingSystem } from '../systems/ceiling/ceiling-system'
 import { RoofEditSystem } from '../systems/roof/roof-edit-system'
@@ -58,6 +59,8 @@ import { SettingsPanel, type SettingsPanelProps } from '../ui/sidebar/panels/set
 import { SitePanel, type SitePanelProps } from '../ui/sidebar/panels/site-panel'
 import type { SidebarTab } from '../ui/sidebar/tab-bar'
 import { useHostPanels } from '../ui/sidebar/use-plugin-panels'
+import { ViewerStage } from '../viewer/viewer-stage'
+import type { ViewerStageMode } from '../viewer/viewer-stage-modes'
 import { CustomCameraControls } from './custom-camera-controls'
 import { DeleteConfirmationDialog } from './delete-confirmation-dialog'
 import { EditorLayoutV2 } from './editor-layout-v2'
@@ -85,6 +88,8 @@ import { WallMoveSideHandles } from './wall-move-side-handles'
 import { WallOpeningHighlights } from './wall-opening-highlights'
 
 const CAMERA_CONTROLS_HINT_DISMISSED_STORAGE_KEY = 'editor-camera-controls-hint-dismissed:v1'
+const PREVIEW_STAGE_SWITCHER_POSITION =
+  'top-28 right-4 left-auto translate-x-0 md:top-4 md:right-auto md:left-1/2 md:-translate-x-1/2'
 const DELETE_CURSOR_BADGE_COLOR = '#ef4444'
 const DELETE_CURSOR_BADGE_OFFSET_X = 14
 const DELETE_CURSOR_BADGE_OFFSET_Y = 14
@@ -190,6 +195,13 @@ export interface EditorProps {
   // Thumbnail
   onThumbnailCapture?: (blob: Blob, cameraData: SnapshotCameraData) => void
 
+  /**
+   * When true, skip the viewer post-FX pipeline (same as `?disable=postFx`).
+   * Hosts use this for a stable local "light preview" without relying only on
+   * module-load URL flags or shading toggles.
+   */
+  disablePostFx?: boolean
+
   // Version preview overlays (rendered by host app)
   sidebarOverlay?: ReactNode
   viewerBanner?: ReactNode
@@ -961,6 +973,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
   onThumbnailCapture,
   viewerSceneSlot,
   floorplanSceneSlot,
+  disablePostFx = false,
 }: {
   isVersionPreviewMode: boolean
   isLoading: boolean
@@ -973,6 +986,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
   onThumbnailCapture?: (blob: Blob, cameraData: SnapshotCameraData) => void
   viewerSceneSlot?: ReactNode
   floorplanSceneSlot?: ReactNode
+  disablePostFx?: boolean
 }) {
   const viewMode = useEditor((s) => s.viewMode)
   const floorplanPaneRatio = useEditor((s) => s.floorplanPaneRatio)
@@ -1086,9 +1100,11 @@ const ViewerCanvas = memo(function ViewerCanvas({
           <SelectionPersistenceManager enabled={hasLoadedInitialScene && !showLoader} />
           <Viewer
             defaultRender={EDITOR_DEFAULT_RENDER}
+            disablePostFx={disablePostFx}
             hoverStyles={EDITOR_HOVER_STYLES}
             onSceneReadyChange={onSceneReadyChange}
             renderContext="editor"
+            renderPaused={!show3d && !showLoader}
             sceneReadyKey={sceneReadyKey}
             selectionManager={isFirstPersonMode ? 'default' : 'custom'}
           >
@@ -1108,6 +1124,60 @@ const ViewerCanvas = memo(function ViewerCanvas({
   )
 })
 
+function PreviewStage({
+  isFirstPersonMode,
+  mode,
+  onModeChange,
+  showLoader,
+  viewerContent,
+}: {
+  isFirstPersonMode: boolean
+  mode: ViewerStageMode
+  onModeChange: (mode: ViewerStageMode) => void
+  showLoader: boolean
+  viewerContent: ReactNode
+}) {
+  const hasFloorplan = useScene((state) =>
+    Object.values(state.nodes).some((node) => node.type === 'level'),
+  )
+
+  const handleModeChange = useCallback(
+    (nextMode: ViewerStageMode) => {
+      if (nextMode !== '3d') useEditor.getState().setFirstPersonMode(false)
+      onModeChange(nextMode)
+    },
+    [onModeChange],
+  )
+
+  const stageMode = isFirstPersonMode || !hasFloorplan ? '3d' : mode
+  const stageModes = hasFloorplan && !isFirstPersonMode ? undefined : (['3d'] as const)
+
+  return (
+    <div className="dark relative h-full w-full overflow-hidden bg-neutral-100 text-foreground">
+      {isFirstPersonMode ? (
+        <FirstPersonOverlay onExit={() => useEditor.getState().setFirstPersonMode(false)} />
+      ) : (
+        <ViewerOverlay
+          hideBottomBar={stageMode !== '3d'}
+          onBack={() => useEditor.getState().setPreviewMode(false)}
+        />
+      )}
+
+      <ViewerStage
+        className="absolute inset-0"
+        mode={stageMode}
+        modes={stageModes}
+        onModeChange={handleModeChange}
+        showCompass={hasFloorplan && !isFirstPersonMode}
+        showSwitcher={hasFloorplan && !isFirstPersonMode}
+        switcherClassName={`${PREVIEW_STAGE_SWITCHER_POSITION} ${showLoader ? 'z-[70]' : ''}`}
+      >
+        {viewerContent}
+      </ViewerStage>
+    </div>
+  )
+}
+
 export default function Editor({
   layoutVersion = 'v1',
   appMenuButton,
@@ -1131,6 +1201,7 @@ export default function Editor({
   isLoading = false,
   onLoaderChange,
   onThumbnailCapture,
+  disablePostFx = false,
   sidebarOverlay,
   viewerBanner,
   settingsPanelProps,
@@ -1154,6 +1225,7 @@ export default function Editor({
   const [hasLoadedInitialScene, setHasLoadedInitialScene] = useState(false)
   const [sceneReadyKey, setSceneReadyKey] = useState(0)
   const [isViewerSceneReady, setIsViewerSceneReady] = useState(false)
+  const [previewStageMode, setPreviewStageMode] = useState<ViewerStageMode>('3d')
   const isPreviewMode = useEditor((s) => s.isPreviewMode)
   const isCaptureMode = useEditor((s) => s.isCaptureMode)
 
@@ -1197,6 +1269,8 @@ export default function Editor({
       setIsSceneLoading(true)
       useScene.getState().unloadScene()
       useViewer.getState().resetSelection()
+      // Session groups are not scene-graph state — clear on every load/switch.
+      useSessionGroups.getState().clearGroups()
 
       try {
         const sceneGraph = onLoad ? await onLoad() : loadSceneFromLocalStorage()
@@ -1232,6 +1306,9 @@ export default function Editor({
   // Apply preview scene when version preview mode changes
   useEffect(() => {
     if (isVersionPreviewMode && previewScene) {
+      // Drop session groups from the edit session so plain-click expand cannot
+      // pull in members that are not part of the preview graph.
+      useSessionGroups.getState().clearGroups()
       applySceneGraphToEditor(previewScene)
     }
   }, [isVersionPreviewMode, previewScene])
@@ -1244,6 +1321,10 @@ export default function Editor({
     return releaseReadOnly
   }, [isVersionPreviewMode])
 
+  useEffect(() => {
+    if (!isPreviewMode) setPreviewStageMode('3d')
+  }, [isPreviewMode])
+
   useEffect(() => {
     document.body.classList.add('dark')
     return () => {
@@ -1269,10 +1350,19 @@ export default function Editor({
   }, [hasLoadedInitialScene, isLoading, isSceneLoading, isViewerSceneReady, sceneReadyKey])
 
   const showLoader = isLoading || isSceneLoading || !hasLoadedInitialScene || !isViewerSceneReady
+  const visibleLoader =
+    showLoader &&
+    !(
+      isPreviewMode &&
+      previewStageMode === '2d' &&
+      !isLoading &&
+      !isSceneLoading &&
+      hasLoadedInitialScene
+    )
 
   useEffect(() => {
-    onLoaderChange?.(showLoader)
-  }, [showLoader, onLoaderChange])
+    onLoaderChange?.(visibleLoader)
+  }, [visibleLoader, onLoaderChange])
 
   const firstPersonPreviousLevelRef = useRef(useViewer.getState().selection.levelId)
   const wasFirstPersonModeRef = useRef(isFirstPersonMode)
@@ -1313,6 +1403,7 @@ export default function Editor({
   const previewViewerContent = (
     <Viewer
       defaultRender={EDITOR_DEFAULT_RENDER}
+      disablePostFx={disablePostFx}
       hoverStyles={EDITOR_HOVER_STYLES}
       renderContext="editor"
       selectionManager="default"
@@ -1331,6 +1422,7 @@ export default function Editor({
 
   const viewerCanvas = (
     <ViewerCanvas
+      disablePostFx={disablePostFx}
       hasLoadedInitialScene={hasLoadedInitialScene}
       isFirstPersonMode={isFirstPersonMode}
       isLoading={isLoading}
@@ -1374,12 +1466,13 @@ export default function Editor({
     }
 
     const tabBarTabs = [
-      ...(sidebarTabs?.map(({ id, label, mobileDefaultSnap, mobileIcon, icon }) => ({
+      ...(sidebarTabs?.map(({ id, label, mobileDefaultSnap, mobileIcon, icon, noPanel }) => ({
         id,
         label,
         mobileDefaultSnap,
         mobileIcon,
         icon,
+        noPanel,
       })) ?? []),
       // Host panels appear after the explicit tabs in the rail. The icon
       // doubles as the mobile icon; a half-height sheet is a sensible default.
@@ -1395,23 +1488,20 @@ export default function Editor({
     return (
       <>
         <FloorplanModeCoordinator />
-        {showLoader && (
+        {visibleLoader && (
           <div className="fixed inset-0 z-60">
             <SceneLoader className="bg-background" />
           </div>
         )}
 
         {!isLoading && isPreviewMode ? (
-          <div className="dark flex h-full w-full flex-col bg-neutral-100 text-foreground">
-            {isFirstPersonMode ? (
-              <FirstPersonOverlay onExit={() => useEditor.getState().setFirstPersonMode(false)} />
-            ) : (
-              <ViewerOverlay onBack={() => useEditor.getState().setPreviewMode(false)} />
-            )}
-            <div className="h-full w-full" data-pascal-viewer-3d>
-              {previewViewerContent}
-            </div>
-          </div>
+          <PreviewStage
+            isFirstPersonMode={isFirstPersonMode}
+            mode={previewStageMode}
+            onModeChange={setPreviewStageMode}
+            showLoader={visibleLoader}
+            viewerContent={previewViewerContent}
+          />
         ) : (
           <>
             <EditorLayoutV2
@@ -1471,23 +1561,20 @@ export default function Editor({
   return (
     <div className="dark flex h-full w-full gap-3 bg-neutral-100 p-3 text-foreground">
       <FloorplanModeCoordinator />
-      {showLoader && (
+      {visibleLoader && (
         <div className="fixed inset-0 z-60">
           <SceneLoader className="bg-background" />
         </div>
       )}
 
       {!isLoading && isPreviewMode ? (
-        <>
-          {isFirstPersonMode ? (
-            <FirstPersonOverlay onExit={() => useEditor.getState().setFirstPersonMode(false)} />
-          ) : (
-            <ViewerOverlay onBack={() => useEditor.getState().setPreviewMode(false)} />
-          )}
-          <div className="h-full w-full" data-pascal-viewer-3d>
-            {previewViewerContent}
-          </div>
-        </>
+        <PreviewStage
+          isFirstPersonMode={isFirstPersonMode}
+          mode={previewStageMode}
+          onModeChange={setPreviewStageMode}
+          showLoader={visibleLoader}
+          viewerContent={previewViewerContent}
+        />
       ) : (
         <>
           {/* Sidebar */}

package/src/components/editor/measurement-pill.tsx

@@ -1,23 +1,17 @@
 'use client'
 
+import { useViewer } from '@pascal-app/viewer'
 import { type ForwardedRef, Fragment, forwardRef } from 'react'
+import { formatLinearMeasurement, type MetricNotation } from '../../lib/measurements'
 
 // Canonical in-world dimension formatter — metric metres or imperial
 // feet/inches. Shared by every measurement readout so they read the same.
 export function formatMeasurement(
   value: number,
   unit: 'metric' | 'imperial',
-  metricNotation: 'meters' | 'millimeters' = 'meters',
+  metricNotation: MetricNotation = 'meters',
 ): string {
-  if (unit === 'imperial') {
-    const feet = value * 3.280_84
-    const wholeFeet = Math.floor(feet)
-    const inches = Math.round((feet - wholeFeet) * 12)
-    if (inches === 12) return `${wholeFeet + 1}'0"`
-    return `${wholeFeet}'${inches}"`
-  }
-  if (metricNotation === 'millimeters') return `${Math.round(value * 1000)}mm`
-  return `${Number.parseFloat(value.toFixed(2))}m`
+  return formatLinearMeasurement(value, unit, metricNotation)
 }
 
 type MeasurePart = 'height' | 'length' | 'thickness'
@@ -55,12 +49,18 @@ export function DimensionPill({
   primary?: string
   primaryRef?: ForwardedRef<HTMLSpanElement>
 }) {
+  const metricNotation = useViewer((state) => state.metricNotation)
+
   return (
     <div className="flex items-center gap-2 whitespace-nowrap rounded-full border border-border/60 bg-background/90 px-4 py-1.5 text-xs tabular-nums shadow-sm backdrop-blur">
       {parts.map((part, index) => {
         const text = part.signed
-          ? `${part.value < 0 ? '-' : '+'}${formatMeasurement(Math.abs(part.value), unit)}`
-          : formatMeasurement(part.value, unit)
+          ? `${part.value < 0 ? '-' : '+'}${formatMeasurement(
+              Math.abs(part.value),
+              unit,
+              metricNotation,
+            )}`
+          : formatMeasurement(part.value, unit, metricNotation)
         return (
           <Fragment key={part.key}>
             {index > 0 ? (

package/src/components/editor/node-action-menu.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { Icon } from '@iconify/react'
-import { Copy, Move, Search, Spline, Trash2 } from 'lucide-react'
+import { Copy, Group, Move, Search, Spline, Trash2, Ungroup } from 'lucide-react'
 import type { MouseEventHandler, PointerEventHandler } from 'react'
 
 type NodeActionMenuProps = {
@@ -11,6 +11,10 @@ type NodeActionMenuProps = {
   onDuplicate?: MouseEventHandler<HTMLButtonElement>
   onMove?: MouseEventHandler<HTMLButtonElement>
   onCurve?: MouseEventHandler<HTMLButtonElement>
+  /** Session group (Ctrl/Cmd+G) — multi-selection floating pill. */
+  onGroup?: MouseEventHandler<HTMLButtonElement>
+  /** Dissolve session group (Ctrl/Cmd+Shift+G). */
+  onUngroup?: MouseEventHandler<HTMLButtonElement>
   onPointerDown?: PointerEventHandler<HTMLDivElement>
   onPointerUp?: PointerEventHandler<HTMLDivElement>
   onPointerEnter?: PointerEventHandler<HTMLDivElement>
@@ -24,6 +28,8 @@ export function NodeActionMenu({
   onDuplicate,
   onMove,
   onCurve,
+  onGroup,
+  onUngroup,
   onPointerDown,
   onPointerUp,
   onPointerEnter,
@@ -59,6 +65,28 @@ export function NodeActionMenu({
           <Move className="h-4 w-4" />
         </button>
       )}
+      {onGroup && (
+        <button
+          aria-label="Group selection"
+          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          onClick={onGroup}
+          title="Group (Ctrl/Cmd+G)"
+          type="button"
+        >
+          <Group className="h-4 w-4" />
+        </button>
+      )}
+      {onUngroup && (
+        <button
+          aria-label="Ungroup selection"
+          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          onClick={onUngroup}
+          title="Ungroup (Ctrl/Cmd+Shift+G)"
+          type="button"
+        >
+          <Ungroup className="h-4 w-4" />
+        </button>
+      )}
       {onCurve && (
         <button
           aria-label="Curve"

package/src/components/editor/opening-guides-3d-layer.tsx

@@ -53,17 +53,26 @@ const mid = (a: OpeningGuideVec3, b: OpeningGuideVec3): OpeningGuideVec3 => [
 export const OpeningGuides3DLayer = memo(function OpeningGuides3DLayer() {
   const guides = useOpeningGuides((s) => s.guides)
   const unit = useViewer((s) => s.unit)
+  const metricNotation = useViewer((s) => s.metricNotation)
   if (guides.length === 0) return null
   return (
     <>
       {guides.map((guide) => (
-        <OpeningGuide guide={guide} key={guide.id} unit={unit} />
+        <OpeningGuide guide={guide} key={guide.id} metricNotation={metricNotation} unit={unit} />
       ))}
     </>
   )
 })
 
-function OpeningGuide({ guide, unit }: { guide: OpeningGuide3D; unit: 'metric' | 'imperial' }) {
+function OpeningGuide({
+  guide,
+  metricNotation,
+  unit,
+}: {
+  guide: OpeningGuide3D
+  metricNotation: 'meters' | 'millimeters'
+  unit: 'metric' | 'imperial'
+}) {
   if (guide.kind === 'badge') {
     return (
       <Html
@@ -76,7 +85,7 @@ function OpeningGuide({ guide, unit }: { guide: OpeningGuide3D; unit: 'metric' |
           className="whitespace-nowrap rounded-[3px] px-[5px] py-[2px] font-sans font-semibold text-[11px] text-white"
           style={{ backgroundColor: BADGE_PILL }}
         >
-          {`= ${formatMeasurement(guide.value, unit)}`}
+          {`= ${formatMeasurement(guide.value, unit, metricNotation)}`}
         </div>
       </Html>
     )
@@ -97,7 +106,7 @@ function OpeningGuide({ guide, unit }: { guide: OpeningGuide3D; unit: 'metric' |
             className="whitespace-nowrap rounded-[3px] px-[5px] py-[2px] font-medium font-sans text-[11px] text-white"
             style={{ backgroundColor: DIMENSION_PILL }}
           >
-            {formatMeasurement(guide.value, unit)}
+            {formatMeasurement(guide.value, unit, metricNotation)}
           </div>
         </Html>
       ) : null}

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

@@ -23,6 +23,7 @@ import {
   type StairSurfaceMaterialRole,
   sceneRegistry,
   useLiveNodeOverrides,
+  useRegistryVersion,
   useScene,
 } from '@pascal-app/core'
 
@@ -77,6 +78,7 @@ import useInteractionScope, {
   useIsCurveReshape,
   useMovingNode,
 } from '../../store/use-interaction-scope'
+import { expandSessionSelectionForNode } from '../../store/use-session-groups'
 import { boxSelectHandled, suppressBoxSelectForPointer } from '../tools/select/box-select-state'
 import { armGroupMove3d } from './group-move-3d'
 import { classifyParticipant } from './group-transform-shared'
@@ -590,6 +592,7 @@ const computeNextIds = (
     currentSelectedIds: selectedIds,
     modifierKeys: selectionModifiersFromEvent(event, modifierKeys),
     nodeId: node.id,
+    expandIdsForNode: expandSessionSelectionForNode,
   })
 }
 
@@ -774,11 +777,18 @@ export const SelectionManager = () => {
     meta: false,
     ctrl: false,
     shift: false,
+    alt: false,
   })
   const clickHandledRef = useRef(false)
 
   const movingNode = useMovingNode()
   const isCurveReshape = useIsCurveReshape()
+  // Plugin kinds register AFTER mount (async dynamic-import discovery), so
+  // every effect below that snapshots `getSelectableKinds()` into an emitter
+  // subscription list depends on this version — a late plugin load re-runs
+  // them and picks up the new kinds (hover / click / double-click / paint /
+  // pointerdown). Without it, plugin nodes select-but-never-hover in prod.
+  const registryVersion = useRegistryVersion()
 
   useEffect(() => {
     const nextHoverMode: HoverHighlightMode = mode === 'delete' ? 'delete' : 'default'
@@ -790,6 +800,8 @@ export const SelectionManager = () => {
   }, [mode, setHoverHighlightMode])
 
   useEffect(() => {
+    // re-subscribe when plugin kinds register after mount (async plugin load)
+    void registryVersion
     if (mode !== 'material-paint') return
     if (movingNode || isCurveReshape) return
 
@@ -1185,25 +1197,28 @@ export const SelectionManager = () => {
       setHoverHighlightMode('default')
       useEditor.getState().setPaintHover(null)
     }
-  }, [isCurveReshape, mode, movingNode, setHoverHighlightMode])
+  }, [isCurveReshape, mode, movingNode, setHoverHighlightMode, registryVersion])
 
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Meta') modifierKeysRef.current.meta = true
       if (event.key === 'Control') modifierKeysRef.current.ctrl = true
       if (event.key === 'Shift') modifierKeysRef.current.shift = true
+      if (event.key === 'Alt') modifierKeysRef.current.alt = true
     }
 
     const onKeyUp = (event: KeyboardEvent) => {
       if (event.key === 'Meta') modifierKeysRef.current.meta = false
       if (event.key === 'Control') modifierKeysRef.current.ctrl = false
       if (event.key === 'Shift') modifierKeysRef.current.shift = false
+      if (event.key === 'Alt') modifierKeysRef.current.alt = false
     }
 
     const clearModifiers = () => {
       modifierKeysRef.current.meta = false
       modifierKeysRef.current.ctrl = false
       modifierKeysRef.current.shift = false
+      modifierKeysRef.current.alt = false
     }
 
     window.addEventListener('keydown', onKeyDown)
@@ -1218,6 +1233,8 @@ export const SelectionManager = () => {
   }, [])
 
   useEffect(() => {
+    // re-subscribe when plugin kinds register after mount (async plugin load)
+    void registryVersion
     if (mode !== 'select') return
     if (movingNode || isCurveReshape) return
 
@@ -1357,7 +1374,7 @@ export const SelectionManager = () => {
         emitter.off(`${type}:pointerdown` as any, onPointerDown as any)
       }
     }
-  }, [isCurveReshape, mode, movingNode, camera, raycaster, glDomElement])
+  }, [isCurveReshape, mode, movingNode, camera, raycaster, glDomElement, registryVersion])
 
   // Move cursor over the selected movable node: the visual cue that clicking it
   // picks it up (replaces the removed move-cross gizmo). Reacts only when the
@@ -1523,6 +1540,8 @@ export const SelectionManager = () => {
   }, [isCurveReshape, mode, movingNode])
 
   useEffect(() => {
+    // re-subscribe when plugin kinds register after mount (async plugin load)
+    void registryVersion
     if (mode !== 'select') return
     if (movingNode || isCurveReshape) return
 
@@ -1775,10 +1794,12 @@ export const SelectionManager = () => {
       })
       emitter.off('grid:click', onGridClick)
     }
-  }, [isCurveReshape, mode, movingNode])
+  }, [isCurveReshape, mode, movingNode, registryVersion])
 
   // Global double-click handler for auto-switching phases and cross-phase hover
   useEffect(() => {
+    // re-subscribe when plugin kinds register after mount (async plugin load)
+    void registryVersion
     if (mode !== 'select') return
     if (movingNode || isCurveReshape) return
 
@@ -1930,10 +1951,12 @@ export const SelectionManager = () => {
         emitter.off(`${type}:double-click` as any, onDoubleClick as any)
       })
     }
-  }, [isCurveReshape, mode, movingNode])
+  }, [isCurveReshape, mode, movingNode, registryVersion])
 
   // Delete mode: click-to-delete (sledgehammer tool)
   useEffect(() => {
+    // re-subscribe when plugin kinds register after mount (async plugin load)
+    void registryVersion
     if (mode !== 'delete') return
 
     const onClick = (event: NodeEvent) => {
@@ -2006,7 +2029,7 @@ export const SelectionManager = () => {
       }
       useViewer.setState({ hoveredId: null })
     }
-  }, [mode])
+  }, [mode, registryVersion])
 
   return (
     <>

package/src/components/editor/site-edge-labels.tsx

@@ -50,6 +50,7 @@ export function SiteEdgeLabels() {
   })
   const activeHandleDrag = useActiveHandleDrag()
   const unit = useViewer((state) => state.unit)
+  const metricNotation = useViewer((state) => state.metricNotation)
   const cameraMode = useViewer((state) => state.cameraMode)
   const isNight = useViewer((state) => getSceneTheme(state.sceneTheme).appearance === 'dark')
   const camera = useThree((state) => state.camera)
@@ -132,7 +133,7 @@ export function SiteEdgeLabels() {
               textShadow: `-1.5px -1.5px 0 ${shadowColor}, 1.5px -1.5px 0 ${shadowColor}, -1.5px 1.5px 0 ${shadowColor}, 1.5px 1.5px 0 ${shadowColor}, 0 0 4px ${shadowColor}, 0 0 4px ${shadowColor}`,
             }}
           >
-            {formatLinearMeasurement(edge.dist, unit)}
+            {formatLinearMeasurement(edge.dist, unit, metricNotation)}
           </div>
         </Html>
       ))}

package/src/components/editor/snapshot-capture-overlay.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { emitter } from '@pascal-app/core'
+import { SNAPSHOT_MAX_EDGE } from '@pascal-app/viewer'
 import { Check, Crop, Loader2, Maximize2, Monitor, X } from 'lucide-react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useIsMobile } from '../../hooks/use-mobile'
@@ -37,6 +38,14 @@ const STANDARD_SIZES: Record<SnapshotStandardAspect, { w: number; h: number }> =
 }
 type StandardAspect = SnapshotStandardAspect
 
+function clampSnapshotSize(width: number, height: number): { w: number; h: number } {
+  const maxEdge = Math.max(width, height)
+  if (maxEdge <= SNAPSHOT_MAX_EDGE) return { w: width, h: height }
+
+  const scale = SNAPSHOT_MAX_EDGE / maxEdge
+  return { w: Math.round(width * scale), h: Math.round(height * scale) }
+}
+
 function getResolution(
   mode: CropMode,
   overlayEl: HTMLDivElement | null,
@@ -50,14 +59,14 @@ function getResolution(
   const dpr = Math.min(window.devicePixelRatio, 1.5)
 
   if (mode === 'viewport') {
-    return { w: Math.round(rect.width * dpr), h: Math.round(rect.height * dpr) }
+    return clampSnapshotSize(Math.round(rect.width * dpr), Math.round(rect.height * dpr))
   }
 
   if (mode === 'area' && drag) {
     const w = Math.abs(drag.end.x - drag.start.x)
     const h = Math.abs(drag.end.y - drag.start.y)
     if (w < 4 || h < 4) return null
-    return { w: Math.round(w * dpr), h: Math.round(h * dpr) }
+    return clampSnapshotSize(Math.round(w * dpr), Math.round(h * dpr))
   }
 
   return null