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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pascal-app/editor",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "Pascal building editor component",
   "type": "module",
   "exports": {
@@ -8,11 +8,12 @@
     "./catalog": "./src/components/ui/item-catalog/catalog-items.tsx"
   },
   "scripts": {
-    "check-types": "tsgo --noEmit"
+    "check-types": "tsgo --noEmit",
+    "test": "bun test src"
   },
   "peerDependencies": {
-    "@pascal-app/core": "^1.0.0-beta.4",
-    "@pascal-app/viewer": "^1.0.0-beta.4",
+    "@pascal-app/core": "^1.0.0-beta.5",
+    "@pascal-app/viewer": "^1.0.0-beta.5",
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "next": ">=15",
@@ -56,8 +57,8 @@
     "zustand": "^5.0.11"
   },
   "devDependencies": {
-    "@pascal-app/core": "^1.0.0-beta.4",
-    "@pascal-app/viewer": "^1.0.0-beta.4",
+    "@pascal-app/core": "^1.0.0-beta.5",
+    "@pascal-app/viewer": "^1.0.0-beta.5",
     "@pascal/typescript-config": "*",
     "@types/blob-stream": "^0.1.33",
     "@types/bun": "^1.3.0",

package/src/components/editor/alignment-3d-guide-layer.tsx

@@ -66,6 +66,7 @@ export const Alignment3DGuideLayer = memo(function Alignment3DGuideLayer() {
   const guides = useAlignmentGuides((s) => s.guides)
   const levelId = useViewer((s) => s.selection.levelId)
   const unit = useViewer((s) => s.unit)
+  const metricNotation = useViewer((s) => s.metricNotation)
   const groupRef = useRef<Group>(null)
 
   // Guides carry only XZ in WORLD coords; their Y has to track the active
@@ -85,16 +86,24 @@ export const Alignment3DGuideLayer = memo(function Alignment3DGuideLayer() {
   return (
     <group ref={groupRef}>
       {guides.map((guide, i) => (
-        <GuideLine guide={guide} key={i} unit={unit} />
+        <GuideLine guide={guide} key={i} metricNotation={metricNotation} unit={unit} />
       ))}
     </group>
   )
 })
 
-function GuideLine({ guide, unit }: { guide: AlignmentGuide; unit: 'metric' | 'imperial' }) {
+function GuideLine({
+  guide,
+  metricNotation,
+  unit,
+}: {
+  guide: AlignmentGuide
+  metricNotation: 'meters' | 'millimeters'
+  unit: 'metric' | 'imperial'
+}) {
   const { x: fx, z: fz } = guide.from
   const { x: tx, z: tz } = guide.to
-  const distLabel = formatMeasurement(guide.distance, unit)
+  const distLabel = formatMeasurement(guide.distance, unit, metricNotation)
 
   // Lay out the dash centres along the from→to direction. The ribbon
   // stretches the dash period up if the line is long enough to exceed the

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

@@ -77,6 +77,11 @@ function LeftColumn({
   // up to the minimum so the panel always returns to a usable size.
   const handleRailClick = useCallback(
     (id: string) => {
+      // noPanel tabs drive the stage, not the panel — leave collapse state alone.
+      if (tabs.find((t) => t.id === id)?.noPanel) {
+        setActivePanel(id)
+        return
+      }
       if (isCollapsed) {
         setIsCollapsed(false)
         if (width < SIDEBAR_MIN_WIDTH) setWidth(SIDEBAR_MIN_WIDTH)
@@ -89,7 +94,7 @@ function LeftColumn({
       }
       setActivePanel(id)
     },
-    [isCollapsed, width, activePanel, setIsCollapsed, setWidth, setActivePanel],
+    [tabs, isCollapsed, width, activePanel, setIsCollapsed, setWidth, setActivePanel],
   )
 
   useEffect(() => {
@@ -126,7 +131,7 @@ function LeftColumn({
         onIconClick={handleRailClick}
         tabs={tabs}
       />
-      {!isCollapsed && (
+      {!isCollapsed && !tabs.find((t) => t.id === activePanel)?.noPanel && (
         <div
           className="relative flex h-full flex-col"
           style={{
@@ -239,7 +244,7 @@ export function EditorLayoutV2({
         overlays={overlays}
         renderTabContent={renderTabContent}
         sidebarOverlay={sidebarOverlay}
-        sidebarTabs={sidebarTabs}
+        sidebarTabs={sidebarTabs.filter((t) => !t.noPanel)}
         viewerContent={viewerContent}
         viewerToolbarLeft={viewerToolbarLeft}
         viewerToolbarRight={viewerToolbarRight}

package/src/components/editor/elevation-3d-guide-layer.tsx

@@ -44,6 +44,7 @@ type Vec3 = [number, number, number]
 export const Elevation3DGuideLayer = memo(function Elevation3DGuideLayer() {
   const guide = useElevationGuides((state) => state.guide)
   const unit = useViewer((state) => state.unit)
+  const metricNotation = useViewer((state) => state.metricNotation)
   const groupRef = useRef<Group>(null)
 
   useFrame(() => {
@@ -76,8 +77,8 @@ export const Elevation3DGuideLayer = memo(function Elevation3DGuideLayer() {
   ]
   const elevationText =
     Math.abs(guide.elevation) < 1e-6
-      ? formatMeasurement(0, unit)
-      : `${guide.elevation < 0 ? '-' : '+'}${formatMeasurement(Math.abs(guide.elevation), unit)}`
+      ? formatMeasurement(0, unit, metricNotation)
+      : `${guide.elevation < 0 ? '-' : '+'}${formatMeasurement(Math.abs(guide.elevation), unit, metricNotation)}`
 
   return (
     <group ref={groupRef}>

package/src/components/editor/first-person-controls.tsx

@@ -21,9 +21,8 @@ import {
   openElevatorDoor,
   pointInPolygon2D,
   requestElevatorLevel,
-  resolveElevatorBuildingLevels,
   resolveElevatorDispatchTarget,
-  resolveElevatorServiceLevels,
+  resolveElevatorLevels,
   sceneRegistry,
   useInteractive,
   useScene,
@@ -430,45 +429,6 @@ function isInsideElevatorCab(
   )
 }
 
-function resolveElevatorColliderLevels(elevator: ElevatorNode, nodes: Record<string, AnyNode>) {
-  const allLevels = resolveElevatorBuildingLevels(elevator, nodes)
-  const levelElevations = getLevelElevations(nodes as Record<AnyNodeId, AnyNode>)
-
-  const baseYByLevelId = new Map<string, number>()
-  let cumulativeY = 0
-  for (const level of allLevels) {
-    const elevation = levelElevations.get(level.id)
-    const baseY = elevation?.baseY ?? 0
-    baseYByLevelId.set(level.id, baseY)
-    cumulativeY = Math.max(cumulativeY, baseY + (elevation?.height ?? 0))
-  }
-
-  const serviceLevels = resolveElevatorServiceLevels(elevator, nodes)
-  const entries = serviceLevels.map((level) => ({
-    baseY: baseYByLevelId.get(level.id) ?? 0,
-    id: level.id as AnyNodeId,
-  }))
-  const firstServedLevel = serviceLevels[0] ?? null
-  const lastServedLevel = serviceLevels[serviceLevels.length - 1] ?? null
-  const shaftBaseY = firstServedLevel ? (baseYByLevelId.get(firstServedLevel.id) ?? 0) : 0
-  const lastServedIndex = lastServedLevel
-    ? allLevels.findIndex((level) => level.id === lastServedLevel.id)
-    : -1
-  const nextLevel = lastServedIndex >= 0 ? allLevels[lastServedIndex + 1] : null
-  const shaftTopY = nextLevel
-    ? (baseYByLevelId.get(nextLevel.id) ?? cumulativeY)
-    : lastServedLevel
-      ? cumulativeY
-      : elevator.cabHeight + 0.3
-
-  return {
-    entries,
-    shaftBaseY,
-    shaftTopY,
-    totalHeight: Math.max(shaftTopY - shaftBaseY, elevator.cabHeight + 0.3),
-  }
-}
-
 function createElevatorColliderMesh(
   elevatorId: AnyNodeId,
   kind: ElevatorColliderKind,
@@ -519,10 +479,7 @@ function buildElevatorColliderMeshes(): ElevatorColliderMesh[] {
     const node = nodes[typedElevatorId]
     if (node?.type !== 'elevator' || node.visible === false) continue
 
-    const { entries, shaftBaseY, shaftTopY, totalHeight } = resolveElevatorColliderLevels(
-      node,
-      nodes,
-    )
+    const { entries, shaftBaseY, shaftTopY, totalHeight } = resolveElevatorLevels(node, nodes)
     const cabWidth = getElevatorCabWidth(node)
     const cabDepth = getElevatorCabDepth(node)
     const shaftWidth = getElevatorShaftWidth(node, cabWidth)

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

@@ -294,6 +294,7 @@ export function FloatingActionMenu() {
   const setMovingNode = useEditor((s) => s.setMovingNode)
   const setSelection = useViewer((s) => s.setSelection)
   const unit = useViewer((s) => s.unit)
+  const metricNotation = useViewer((s) => s.metricNotation)
   // Drives the height-drag dimension pill below the menu. `activeHandleDrag`
   // flips only at drag start / end, so subscribing here is cheap — the live
   // height value is written imperatively in the useFrame below.
@@ -417,7 +418,7 @@ export function FloatingActionMenu() {
           ? getWallEffectiveHeightForNodes(node, useScene.getState().nodes)
           : FENCE_DEFAULT_HEIGHT
       const liveHeight = override?.height ?? node.height ?? fallbackHeight
-      pillHeightRef.current.textContent = `H ${formatMeasurement(liveHeight, unit)}`
+      pillHeightRef.current.textContent = `H ${formatMeasurement(liveHeight, unit, metricNotation)}`
     }
 
     const obj = sceneRegistry.nodes.get(selectedId)
@@ -884,7 +885,7 @@ export function FloatingActionMenu() {
                 under it for duct fittings. */}
             {node && hasPorts(node.type) ? (
               <div className="-translate-x-1/2 pointer-events-none absolute bottom-full left-1/2 mb-2 flex flex-col items-center gap-1">
-                <SystemSummaryPill nodeId={node.id} unit={unit} />
+                <SystemSummaryPill metricNotation={metricNotation} nodeId={node.id} unit={unit} />
                 {hasAxisCycling(node.type) ? (
                   <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">
                     <span className="font-medium text-foreground">
@@ -918,7 +919,15 @@ export function FloatingActionMenu() {
  * subscription it needs (connectivity changes when ANY joint moves) doesn't
  * re-render the always-mounted parent menu on every unrelated scene tick.
  */
-function SystemSummaryPill({ nodeId, unit }: { nodeId: AnyNodeId; unit: 'metric' | 'imperial' }) {
+function SystemSummaryPill({
+  metricNotation,
+  nodeId,
+  unit,
+}: {
+  metricNotation: 'meters' | 'millimeters'
+  nodeId: AnyNodeId
+  unit: 'metric' | 'imperial'
+}) {
   const allNodes = useScene((s) => s.nodes)
   const summary = useMemo(() => summarizeSystemFor(nodeId, allNodes), [nodeId, allNodes])
   if (!summary) return null
@@ -935,7 +944,7 @@ function SystemSummaryPill({ nodeId, unit }: { nodeId: AnyNodeId; unit: 'metric'
             ·
           </span>
           <span className="text-muted-foreground">
-            {formatMeasurement(summary.runLengthM, unit)} · {summary.runCount}{' '}
+            {formatMeasurement(summary.runLengthM, unit, metricNotation)} · {summary.runCount}{' '}
             {summary.runCount === 1 ? 'run' : 'runs'}
           </span>
         </>

package/src/components/editor/floorplan-background-selection.test.ts

@@ -7,7 +7,7 @@ const baseArgs = {
   currentSelectedIds: ['wall_1'],
   getFloorplanHitIdAtPoint: () => 'door_1',
   isWallBuildActive: false,
-  modifierKeys: { meta: false, ctrl: false, shift: false },
+  modifierKeys: { meta: false, ctrl: false, shift: false, alt: false },
   planPoint: [0, 0] as [number, number],
   structureLayer: 'elements',
 }
@@ -16,7 +16,7 @@ describe('resolveFloorplanBackgroundSelection', () => {
   test('shift-click on a floorplan node toggles into the current selection', () => {
     const result = resolveFloorplanBackgroundSelection({
       ...baseArgs,
-      modifierKeys: { meta: false, ctrl: false, shift: true },
+      modifierKeys: { meta: false, ctrl: false, shift: true, alt: false },
     })
 
     expect(result).toEqual({
@@ -30,7 +30,7 @@ describe('resolveFloorplanBackgroundSelection', () => {
     const result = resolveFloorplanBackgroundSelection({
       ...baseArgs,
       currentSelectedIds: ['wall_1', 'door_1'],
-      modifierKeys: { meta: false, ctrl: false, shift: true },
+      modifierKeys: { meta: false, ctrl: false, shift: true, alt: false },
     })
 
     expect(result).toEqual({
@@ -44,7 +44,7 @@ describe('resolveFloorplanBackgroundSelection', () => {
     const result = resolveFloorplanBackgroundSelection({
       ...baseArgs,
       getFloorplanHitIdAtPoint: () => null,
-      modifierKeys: { meta: false, ctrl: false, shift: true },
+      modifierKeys: { meta: false, ctrl: false, shift: true, alt: false },
     })
 
     expect(result).toEqual({
@@ -54,6 +54,33 @@ describe('resolveFloorplanBackgroundSelection', () => {
     })
   })
 
+  test('plain click expands a session group', () => {
+    const result = resolveFloorplanBackgroundSelection({
+      ...baseArgs,
+      expandIdsForNode: (nodeId) => (nodeId === 'door_1' ? ['door_1', 'wall_2'] : null),
+    })
+
+    expect(result).toEqual({
+      handled: true,
+      kind: 'select-elements',
+      selectedIds: ['door_1', 'wall_2'],
+    })
+  })
+
+  test('alt-click selects one member without expanding', () => {
+    const result = resolveFloorplanBackgroundSelection({
+      ...baseArgs,
+      expandIdsForNode: () => ['door_1', 'wall_2'],
+      modifierKeys: { meta: false, ctrl: false, shift: false, alt: true },
+    })
+
+    expect(result).toEqual({
+      handled: true,
+      kind: 'select-elements',
+      selectedIds: ['door_1'],
+    })
+  })
+
   test('uses the registry hit result for zone selection', () => {
     const result = resolveFloorplanBackgroundSelection({
       ...baseArgs,

package/src/components/editor/floorplan-background-selection.ts

@@ -7,12 +7,16 @@ type ModifierKeys = {
   meta: boolean
   ctrl: boolean
   shift: boolean
+  /** Alt alone: select one session-group member without expanding. */
+  alt: boolean
 }
 
 type ResolveFloorplanBackgroundSelectionArgs = {
   canSelectElementFloorplanGeometry: boolean
   canSelectFloorplanZones: boolean
   currentSelectedIds: string[]
+  /** Session-group expand on plain click (not on modifier/Alt). */
+  expandIdsForNode?: (nodeId: string) => string[] | null
   getFloorplanHitIdAtPoint: (planPoint: WallPlanPoint) => string | null
   isWallBuildActive: boolean
   modifierKeys: ModifierKeys
@@ -20,6 +24,26 @@ type ResolveFloorplanBackgroundSelectionArgs = {
   structureLayer: string
 }
 
+function hasToggleModifier(modifierKeys: ModifierKeys): boolean {
+  return modifierKeys.meta || modifierKeys.ctrl || modifierKeys.shift
+}
+
+function resolveHitSelection(
+  hitId: string,
+  currentSelectedIds: string[],
+  modifierKeys: ModifierKeys,
+  expandIdsForNode?: (nodeId: string) => string[] | null,
+): string[] {
+  if (hasToggleModifier(modifierKeys)) {
+    return currentSelectedIds.includes(hitId)
+      ? currentSelectedIds.filter((selectedId) => selectedId !== hitId)
+      : [...currentSelectedIds, hitId]
+  }
+  if (modifierKeys.alt) return [hitId]
+  const expanded = expandIdsForNode?.(hitId)
+  return expanded && expanded.length > 1 ? expanded : [hitId]
+}
+
 export type FloorplanBackgroundSelectionResult =
   | {
       handled: true
@@ -48,6 +72,7 @@ export function resolveFloorplanBackgroundSelection({
   canSelectElementFloorplanGeometry,
   canSelectFloorplanZones,
   currentSelectedIds,
+  expandIdsForNode,
   getFloorplanHitIdAtPoint,
   isWallBuildActive,
   modifierKeys,
@@ -71,12 +96,7 @@ export function resolveFloorplanBackgroundSelection({
       return {
         handled: true,
         kind: 'select-elements',
-        selectedIds:
-          modifierKeys.meta || modifierKeys.ctrl || modifierKeys.shift
-            ? currentSelectedIds.includes(hitId)
-              ? currentSelectedIds.filter((selectedId) => selectedId !== hitId)
-              : [...currentSelectedIds, hitId]
-            : [hitId],
+        selectedIds: resolveHitSelection(hitId, currentSelectedIds, modifierKeys, expandIdsForNode),
       }
     }
   }
@@ -92,7 +112,7 @@ export function resolveFloorplanBackgroundSelection({
     return {
       handled: true,
       kind: 'clear-elements',
-      preserveSelection: modifierKeys.meta || modifierKeys.ctrl || modifierKeys.shift,
+      preserveSelection: hasToggleModifier(modifierKeys),
     }
   }
 

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

@@ -115,6 +115,7 @@ import useInteractionScope, {
   useReshapingNode,
 } from '../../store/use-interaction-scope'
 import usePlacementPreview from '../../store/use-placement-preview'
+import { expandSessionSelectionForNode } from '../../store/use-session-groups'
 import { useStairBuildPreview } from '../../store/use-stair-build-preview'
 import { FloorplanAlignmentGuideLayer } from '../editor-2d/floorplan-alignment-guide-layer'
 import { FloorplanCursorIndicatorOverlay as Editor2dFloorplanCursorIndicatorOverlay } from '../editor-2d/floorplan-cursor-indicator-overlay'
@@ -193,7 +194,7 @@ import {
 } from '../tools/wall/wall-drafting'
 
 import { PALETTE_COLORS } from '../ui/primitives/color-dot'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/primitives/tooltip'
+import { FloorplanCompassButton } from '../viewer/floorplan-compass-button'
 import { resolveFloorplanBackgroundSelection } from './floorplan-background-selection'
 import {
   subscribeFloorplanCameraNavigation,
@@ -505,50 +506,6 @@ type GuideHandleHintAnchor = {
   directionY: number
 }
 
-function FloorplanCompassButton({
-  northRotationDeg,
-  onAlignNorth,
-  needleRef,
-}: {
-  northRotationDeg: number
-  onAlignNorth: () => void
-  needleRef?: React.RefObject<SVGSVGElement | null>
-}) {
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <button
-          aria-label="Align view to north"
-          className="group absolute bottom-3 left-3 z-30 flex h-8 w-8 items-center justify-center rounded-full border border-black/10 bg-white/85 shadow-sm backdrop-blur-md transition hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-neutral-900/85 dark:hover:bg-neutral-900"
-          onClick={(event) => {
-            event.preventDefault()
-            event.stopPropagation()
-            onAlignNorth()
-          }}
-          onPointerDown={(event) => {
-            event.stopPropagation()
-          }}
-          type="button"
-        >
-          <span className="relative flex h-6 w-6 items-center justify-center rounded-full bg-[#b8b8b8] shadow-inner dark:bg-neutral-700">
-            <svg
-              aria-hidden="true"
-              className="h-6 w-6"
-              ref={needleRef}
-              style={{ transform: `rotate(${northRotationDeg}deg)` }}
-              viewBox="0 0 48 48"
-            >
-              <path d="M24 4.5 31.5 25 24 21.5 16.5 25Z" fill="#f15b5b" />
-              <path d="M24 43.5 16.5 23 24 26.5 31.5 23Z" fill="#ffffff" />
-            </svg>
-          </span>
-        </button>
-      </TooltipTrigger>
-      <TooltipContent side="right">Align view to north</TooltipContent>
-    </Tooltip>
-  )
-}
-
 type GuideInteractionState = {
   pointerId: number
   guideId: GuideNode['id']
@@ -843,11 +800,13 @@ function getSelectionModifierKeys(event?: {
   metaKey?: boolean
   ctrlKey?: boolean
   shiftKey?: boolean
+  altKey?: boolean
 }) {
   return {
     meta: Boolean(event?.metaKey),
     ctrl: Boolean(event?.ctrlKey),
     shift: Boolean(event?.shiftKey),
+    alt: Boolean(event?.altKey),
   }
 }
 
@@ -9978,6 +9937,7 @@ export function FloorplanPanel({
         canSelectElementFloorplanGeometry,
         canSelectFloorplanZones,
         currentSelectedIds: useViewer.getState().selection.selectedIds,
+        expandIdsForNode: expandSessionSelectionForNode,
         getFloorplanHitIdAtPoint,
         isWallBuildActive,
         modifierKeys,

package/src/components/editor/group-floating-action-menu.tsx

@@ -7,28 +7,27 @@ import { useFrame } from '@react-three/fiber'
 import { useCallback, useMemo, useRef } from 'react'
 import * as THREE from 'three'
 import { resolveOverlayPolicy } from '../../lib/interaction/overlay-policy'
+import { canCreateSessionGroup, selectionIntersectsSessionGroup } from '../../lib/session-groups'
 import useEditor from '../../store/use-editor'
 import useInteractionScope, { useMovingNode } from '../../store/use-interaction-scope'
+import useSessionGroups, {
+  groupCurrentSelection,
+  ungroupCurrentSelection,
+} from '../../store/use-session-groups'
 import { deleteSelection, duplicateSelectionAndPickUp, startGroupPickUp } from './group-actions'
 import { classifyParticipant, computeGroupBox, expandToComponent } from './group-transform-shared'
 import { NodeActionMenu } from './node-action-menu'
 import { useMeshSettleEpoch } from './use-mesh-settle-epoch'
 
-// Matches the single-node FloatingActionMenu's zoom-compensation constants.
 const REF_ORTHO_ZOOM = 50
 const REF_CAMERA_DISTANCE = 12
 const MIN_MENU_SCALE = 0.6
 const MAX_MENU_SCALE = 1.4
-// Clearance above the group's bbox top so the pill doesn't sit on the meshes.
 const MENU_Y_OFFSET = 0.42
 
 /**
- * Floating Move / Duplicate / Delete pill for a MULTI-selection in the 3D
- * view — the group sibling of the single-node `FloatingActionMenu` (which is
- * sole-selection only). Anchored above the selection's bounding-box center;
- * every action targets the whole selection: Move picks the group up (it rides
- * the cursor until a click places it), Duplicate clones the selection and
- * picks the clones up, Delete removes everything selected.
+ * Floating pill for MULTI-selection in 3D: Move, Group, Ungroup, Duplicate, Delete.
+ * Group/Ungroup are session-only (Ctrl/Cmd+G / Ctrl/Cmd+Shift+G).
  */
 export function GroupFloatingActionMenu() {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
@@ -37,8 +36,7 @@ export function GroupFloatingActionMenu() {
   const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered)
   const movingNode = useMovingNode()
   const nodes = useScene((s) => s.nodes)
-  // Hard-hidden during any active interaction (drag, pick-up, reshape) so the
-  // pill never competes with the live action — same policy as the 1-node menu.
+  const sessionGroups = useSessionGroups((s) => s.groups)
   const scope = useInteractionScope((s) => s.scope)
   const menuStepBack = resolveOverlayPolicy(scope).conflictingControls === 'hidden'
 
@@ -55,9 +53,18 @@ export function GroupFloatingActionMenu() {
     [selectedIds, levelId, nodes],
   )
 
-  // World anchor above the group bbox. Depends on the scene (post-commit
-  // positions), not the camera, and the menu hides during drags — so a
-  // memo keyed on selection + nodes is enough, no per-frame box traversal.
+  const liveIds = useMemo(() => new Set(Object.keys(nodes)), [nodes])
+  // Always offer Group when multi-select is not already exactly a session group.
+  const showGroup = useMemo(
+    () => canCreateSessionGroup(sessionGroups, selectedIds, liveIds),
+    [sessionGroups, selectedIds, liveIds],
+  )
+  // Ungroup when any selected member is in a session group.
+  const showUngroup = useMemo(
+    () => selectionIntersectsSessionGroup(sessionGroups, selectedIds, liveIds),
+    [sessionGroups, selectedIds, liveIds],
+  )
+
   const meshEpoch = useMeshSettleEpoch(nodes)
   const anchor = useMemo(() => {
     void meshEpoch
@@ -73,8 +80,6 @@ export function GroupFloatingActionMenu() {
   }, [participantIds, nodes, levelId, meshEpoch])
 
   useFrame((state) => {
-    // Scale the HTML pill with camera zoom / distance so it feels anchored to
-    // the world — mirrors the single-node menu.
     if (!(menuScaleRef.current && groupRef.current)) return
     const raw =
       state.camera instanceof THREE.OrthographicCamera
@@ -92,6 +97,14 @@ export function GroupFloatingActionMenu() {
     event.stopPropagation()
     startGroupPickUp()
   }, [])
+  const handleGroup = useCallback((event: React.MouseEvent) => {
+    event.stopPropagation()
+    groupCurrentSelection()
+  }, [])
+  const handleUngroup = useCallback((event: React.MouseEvent) => {
+    event.stopPropagation()
+    ungroupCurrentSelection()
+  }, [])
   const handleDuplicate = useCallback((event: React.MouseEvent) => {
     event.stopPropagation()
     duplicateSelectionAndPickUp()
@@ -119,9 +132,11 @@ export function GroupFloatingActionMenu() {
           <NodeActionMenu
             onDelete={handleDelete}
             onDuplicate={handleDuplicate}
+            onGroup={showGroup ? handleGroup : undefined}
             onMove={handleMove}
             onPointerDown={stopPointer}
             onPointerUp={stopPointer}
+            onUngroup={showUngroup ? handleUngroup : undefined}
           />
         </div>
       </Html>