@pascal-app/editor 1.0.0 → 1.0.3

package/src/components/editor/node-arrow-handles.tsx

@@ -4,6 +4,7 @@ import {
   type AnyNode,
   type AnyNodeId,
   type ArcResizeHandle,
+  type CornerRadiusHandle,
   type Cursor,
   createSceneApi,
   DEFAULT_ANGLE_STEP,
@@ -46,7 +47,12 @@ import { RESIZE_HANDLE_DRAG_LABEL, ROTATE_HANDLE_DRAG_LABEL } from '../../lib/co
 import { createEditorApi } from '../../lib/editor-api'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import useDirectManipulationFeedback from '../../store/use-direct-manipulation-feedback'
-import useEditor, { isGridSnapActive, isMagneticSnapActive } from '../../store/use-editor'
+import useEditor, {
+  isAngleSnapActive,
+  isGridSnapActive,
+  isMagneticSnapActive,
+} from '../../store/use-editor'
+import { useHandleGroup } from '../../store/use-handle-group'
 import useInteractionScope, {
   useEndpointReshape,
   useIsCurveReshape,
@@ -62,7 +68,12 @@ import {
   HandleArrow,
   NO_RAYCAST,
 } from './handles/handle-arrow'
-import { createLinearResizeDragBinding } from './handles/linear-resize-drag'
+import {
+  computeFreezeOffset,
+  resolveLinearHandlePosition,
+  resolveLinearHandleRotation,
+} from './handles/handle-placement'
+import { createLinearResizeDragBinding, linearResizeFactor } from './handles/linear-resize-drag'
 import { resolveResizeSnapValue } from './handles/resize-snap'
 import { type HandleDragControls, useHandleDrag } from './handles/use-handle-drag'
 
@@ -227,6 +238,9 @@ export function NodeArrowHandles() {
     () => (rawNode && liveOverride ? ({ ...rawNode, ...liveOverride } as AnyNode) : rawNode),
     [rawNode, liveOverride],
   )
+  const activeGroup = useHandleGroup((s) =>
+    s.active && s.active.nodeId === node?.id ? s.active.group : null,
+  )
   const def = node ? nodeRegistry.get(node.type) : null
   const descriptorSceneApi = useMemo(() => createSceneApi(useScene), [])
   const descriptors = useMemo(() => {
@@ -236,6 +250,8 @@ export function NodeArrowHandles() {
         ? def.handles(node as never, descriptorSceneApi)
         : (def.handles as HandleDescriptor[])
     return all.filter((descriptor) => {
+      if (activeGroup)
+        return descriptor.kind === 'linear-resize' && descriptor.latchGroup === activeGroup
       if (descriptor.kind === 'translate') return false
       const visible =
         'visible' in descriptor
@@ -244,7 +260,7 @@ export function NodeArrowHandles() {
       if ('shape' in descriptor && descriptor.shape === 'move-cross') return visible === true
       return visible !== false
     })
-  }, [node, def, descriptorSceneApi])
+  }, [node, def, descriptorSceneApi, activeGroup])
 
   const shouldRender =
     Boolean(node && descriptors?.length) &&
@@ -291,6 +307,9 @@ function NodeArrowHandlesForNode({
   node: AnyNode
   descriptors: HandleDescriptor[]
 }) {
+  const controlledGroup = useHandleGroup((s) =>
+    s.active?.nodeId === node.id ? s.active.group : null,
+  )
   const parentId = node.parentId ?? null
 
   const portalMode: HandlePortal = descriptors.some((d) => d.portal === 'grandparent')
@@ -476,7 +495,8 @@ function NodeArrowHandlesForNode({
     }
     // Arrows tagged with a latch group stay hidden until that group is open.
     const latchGroup = descriptor.kind === 'linear-resize' ? descriptor.latchGroup : undefined
-    if (latchGroup && !openLatchGroups.has(latchGroup)) return null
+    if (latchGroup && latchGroup !== controlledGroup && !openLatchGroups.has(latchGroup))
+      return null
     return (
       <ArrowHandle
         activeIndex={activeIndex}
@@ -502,39 +522,6 @@ function NodeArrowHandlesForNode({
   )
 }
 
-// Offset, in node-local frame, that compensates for `position` drift on
-// the mesh during an asymmetric resize. Width/length L+R recompute
-// `position` so the anchored edge stays world-fixed — the renderer
-// follows that override, the ride object moves, and every arrow under
-// it would drift along with the mesh center. Subtracting this offset
-// from a non-active arrow's local placement undoes that drift so it
-// stays at its pre-drag world position.
-//
-// Rotation drags don't change `position`, so the offset collapses to
-// zero and non-active arrows naturally rotate with the mesh — which is
-// the desired behaviour (the whole rig rotates as a unit).
-function computeFreezeOffset(liveNode: AnyNode, preDragNode: AnyNode): [number, number, number] {
-  // Not every node in the union carries a `position` field (sites are the
-  // notable holdout — they don't have handles anyway, but TypeScript still
-  // requires us to discriminate). Guarded access keeps the freeze logic
-  // safe for the few node kinds that lack the field.
-  const liveP = (liveNode as { position?: readonly [number, number, number] }).position ?? [0, 0, 0]
-  const preP = (preDragNode as { position?: readonly [number, number, number] }).position ?? [
-    0, 0, 0,
-  ]
-  const deltaWorldX = liveP[0] - preP[0]
-  const deltaWorldY = liveP[1] - preP[1]
-  const deltaWorldZ = liveP[2] - preP[2]
-  const rotY = (preDragNode as { rotation?: number }).rotation ?? 0
-  // World → node-local for Y-axis rotation by rotY (THREE.Object3D
-  // rotation-y convention): inverse is rotation by -rotY around +Y.
-  const cosR = Math.cos(rotY)
-  const sinR = Math.sin(rotY)
-  const deltaLocalX = cosR * deltaWorldX - sinR * deltaWorldZ
-  const deltaLocalZ = sinR * deltaWorldX + cosR * deltaWorldZ
-  return [deltaLocalX, deltaWorldY, deltaLocalZ]
-}
-
 function ArrowHandle({
   descriptor,
   liveNode,
@@ -592,6 +579,17 @@ function ArrowHandle({
       />
     )
   }
+  if (descriptor.kind === 'corner-radius') {
+    return (
+      <CornerRadiusKnob
+        descriptor={descriptor}
+        dragControls={dragControls}
+        handleIndex={handleIndex}
+        node={placementNode}
+        rideObject={rideObject}
+      />
+    )
+  }
   if (descriptor.kind === 'tap-action') {
     // Tap-action handles (fence side-move arrows, corner pickers) aren't
     // resize handles, so the freeze-at-pre-drag mechanism — which only
@@ -605,6 +603,119 @@ function ArrowHandle({
   return null
 }
 
+const CORNER_RADIUS_DOT_INSET = 0.2
+const CORNER_RADIUS_POSITION_FACTOR = Math.SQRT2 - 1
+
+function CornerRadiusKnob({
+  descriptor,
+  node,
+  handleIndex,
+  dragControls,
+  rideObject,
+}: {
+  descriptor: CornerRadiusHandle<AnyNode>
+  node: AnyNode
+  handleIndex: number
+  dragControls: HandleDragControls
+  rideObject: Object3D
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
+  const { camera } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const [sx, sy] = descriptor.corner
+  const radius = descriptor.currentValue(node)
+  const inset = CORNER_RADIUS_DOT_INSET + CORNER_RADIUS_POSITION_FACTOR * radius
+  const position: [number, number, number] = [
+    sx * (descriptor.width(node) / 2 - inset / Math.SQRT2),
+    sy * (descriptor.height(node) / 2 - inset / Math.SQRT2),
+    0,
+  ]
+
+  const activate = useHandleDrag({
+    kind: 'drag',
+    cursor: 'grabbing',
+    dragControls,
+    handleIndex,
+    node,
+    rideObject,
+    setIsDragging,
+    onStart: ({ initialNode, nodeId, rideObject: dragRideObject, sceneApi: dragSceneApi }) => {
+      dragRideObject.updateMatrixWorld(true)
+      const worldMatrix = dragRideObject.matrixWorld.clone()
+      const inverseWorldMatrix = worldMatrix.clone().invert()
+      const center = new Vector3().setFromMatrixPosition(worldMatrix)
+      const normal = new Vector3().setFromMatrixColumn(worldMatrix, 2).normalize()
+      const plane = new Plane().setFromNormalAndCoplanarPoint(normal, center)
+      const maxRadius = resolveBound(
+        descriptor.max,
+        Number.POSITIVE_INFINITY,
+        initialNode,
+        dragSceneApi,
+      )
+      const preview = descriptor.createPreview?.(initialNode as never)
+
+      return {
+        markDirty: !preview,
+        commit: preview ? (patch) => preview.commit(patch as never) : undefined,
+        onBegin: () => {
+          useInteractionScope.getState().begin({
+            kind: 'handle-drag',
+            nodeId,
+            handle: 'Corner radius',
+          })
+        },
+        onCancel: () => preview?.cancel(),
+        onEnd: () => {
+          useInteractionScope.getState().endIf((scope) => scope.kind === 'handle-drag')
+        },
+        move: ({ event, modifiers, intersectPlane }) => {
+          const hit = new Vector3()
+          if (!intersectPlane(event.clientX, event.clientY, plane, hit)) return null
+          hit.applyMatrix4(inverseWorldMatrix)
+          const diagonalDistance =
+            (descriptor.width(initialNode) / 2 +
+              descriptor.height(initialNode) / 2 -
+              sx * hit.x -
+              sy * hit.y) /
+            Math.SQRT2
+          const next = Math.min(
+            maxRadius,
+            Math.max(
+              0,
+              (diagonalDistance - CORNER_RADIUS_DOT_INSET) / CORNER_RADIUS_POSITION_FACTOR,
+            ),
+          )
+          const patch = descriptor.apply(initialNode as never, next, dragSceneApi, modifiers)
+          preview?.preview(patch as never)
+          return patch as Partial<AnyNode>
+        },
+      }
+    },
+  })
+
+  return (
+    <HandleArrow
+      activeCursor="grabbing"
+      cursor="grab"
+      hover={isHovered || isDragging}
+      hoverScale={1.3}
+      onHoverChange={setIsHovered}
+      onPointerDown={activate}
+      placement={{ position, rotation: [0, 0, 0], baseScale: zoom * 0.42 }}
+      round
+      shape="corner-picker"
+    >
+      {isHovered || isDragging ? (
+        <DimensionLabel
+          position={[0, 0.22, 0]}
+          text={formatDimension(radius, useViewer.getState().unit)}
+        />
+      ) : null}
+    </HandleArrow>
+  )
+}
+
 function pickCursor(descriptor: LinearResizeHandle<AnyNode> | RadialResizeHandle<AnyNode>): Cursor {
   if (descriptor.kind === 'linear-resize' && descriptor.cursor) return descriptor.cursor
   return descriptor.axis === 'y' ? 'ns-resize' : 'ew-resize'
@@ -666,7 +777,7 @@ function LinearArrow({
   // for the edge being resized); cleared when the drag ends.
   const onDrag = descriptor.kind === 'linear-resize' ? descriptor.onDrag : undefined
   const placementSceneApi = useMemo(() => createSceneApi(useScene), [])
-  const basePosition = descriptor.placement.position(node, placementSceneApi)
+  const basePosition = resolveLinearHandlePosition(descriptor, node, placementSceneApi, baseScale)
   // `freezeOffset` (in node-local frame) cancels the mesh's `position`
   // drift while another arrow is being dragged — `basePosition` is
   // computed against the pre-drag snapshot, then we subtract the offset
@@ -723,21 +834,17 @@ function LinearArrow({
               initialNode,
               nodeId,
               sceneApi,
-              initialModifiers: { altKey: event.nativeEvent.altKey },
+              initialModifiers: {
+                altKey: event.nativeEvent.altKey,
+                shiftKey: event.nativeEvent.shiftKey,
+              },
             })
           : null
       const overrideId = linearBinding?.overrideId ?? nodeId
       const initialValue = descriptor.currentValue(initialNode)
       const minBound = resolveBound(descriptor.min, Number.NEGATIVE_INFINITY, initialNode, sceneApi)
       const maxBound = resolveBound(descriptor.max, Number.POSITIVE_INFINITY, initialNode, sceneApi)
-      const factor =
-        descriptor.kind === 'radial-resize'
-          ? 1
-          : descriptor.anchor === 'center'
-            ? 2
-            : descriptor.anchor === 'min'
-              ? 1
-              : -1
+      const factor = linearResizeFactor(descriptor)
 
       // Last value an emitted resize tick fired at — a new tick fires only
       // when the (snapped + clamped) value actually changes, so the cue
@@ -806,23 +913,7 @@ function LinearArrow({
     },
   })
 
-  // For axis === 'y' (vertical handles), tilt the chevron up via local
-  // X+Z rotation chain matching DoorHeightArrowHandle. When the handle
-  // sits below the node (placement Y < 0, e.g. window bottom arrow),
-  // flip the Z rotation so the chevron points outward (downward).
-  //
-  // For axis === 'x' with `faceNormal` (wall-mounted opening width arrows),
-  // roll the blade 90° about its own pointing (X) axis so it stands up from
-  // the horizontal XZ plane into the node's facing plane (XY = the wall
-  // face) — otherwise the blade is seen edge-on from the front.
-  const faceNormalX =
-    descriptor.kind === 'linear-resize' && descriptor.axis === 'x' && descriptor.faceNormal === true
-  const innerRotation: [number, number, number] =
-    descriptor.axis === 'y'
-      ? [0, Math.PI / 2, position[1] < 0 ? -Math.PI / 2 : Math.PI / 2]
-      : faceNormalX
-        ? [Math.PI / 2, 0, 0]
-        : [0, 0, 0]
+  const innerRotation = resolveLinearHandleRotation(descriptor, position)
 
   // Optional guide decoration — linear handles use it for curved-stair
   // width / inner-radius rings; radial handles use it for the column's
@@ -1260,10 +1351,7 @@ function ArcArrow({
       }
       const initialAngle = angleOf(hitWorld)
 
-      // Advertise the rotate interaction so the contextual HUD can surface the
-      // Shift = free-rotation toggle (the angle-step bypass below). Resize
-      // handles route a measurement label here; rotate gets a sentinel label so
-      // the HUD shows the rotate hint, not a dimension pill.
+      // A distinct label selects rotation snapping instead of resize measurements.
       if (isRotateShape) {
         useInteractionScope
           .getState()
@@ -1285,7 +1373,12 @@ function ArcArrow({
           while (delta > Math.PI) delta -= 2 * Math.PI
           while (delta < -Math.PI) delta += 2 * Math.PI
 
-          if (!moveEvent.shiftKey && descriptor.shape === 'rotate') {
+          if (
+            !descriptor.continuous &&
+            !moveEvent.altKey &&
+            isAngleSnapActive() &&
+            descriptor.shape === 'rotate'
+          ) {
             delta = Math.round(delta / DEFAULT_ANGLE_STEP) * DEFAULT_ANGLE_STEP
           }
 

package/src/components/editor/registry-action-contributions.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { type AnyNodeId, nodeRegistry, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { type ComponentType, lazy, Suspense } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { getFloorplanNodeExtension } from '../../lib/floorplan/floorplan-extension'
+
+type Loader = () => Promise<{ default: ComponentType }>
+const lazyCache = new WeakMap<Loader, ComponentType>()
+
+function contribution(kind: string): ComponentType | null {
+  const loader = getFloorplanNodeExtension(nodeRegistry.get(kind))?.actionMenu?.actions
+  if (!loader) return null
+  const cached = lazyCache.get(loader)
+  if (cached) return cached
+  const component = lazy(loader)
+  lazyCache.set(loader, component)
+  return component
+}
+
+/**
+ * The buttons kinds add to the action menu for selections holding them
+ * (`extensions['pascal:editor/floorplan'].actionMenu.actions`), in 2D and 3D
+ * alike. Each contribution reads the selection and decides its own visibility.
+ */
+export function RegistryActionContributions() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const kinds = useScene(
+    useShallow((s) =>
+      Array.from(
+        new Set(
+          selectedIds.flatMap((id) => {
+            const type = s.nodes[id as AnyNodeId]?.type
+            return type ? [type] : []
+          }),
+        ),
+      ).sort(),
+    ),
+  )
+  return (
+    <>
+      {kinds.map((kind) => {
+        const Contribution = contribution(kind)
+        return Contribution ? (
+          <Suspense fallback={null} key={kind}>
+            <Contribution />
+          </Suspense>
+        ) : null
+      })}
+    </>
+  )
+}

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

@@ -81,6 +81,12 @@ import {
   shouldPreserveSelectedRoofHostTarget,
 } from '../../lib/selection-routing'
 import { emitDeleteSFX, sfxEmitter } from '../../lib/sfx-bus'
+import {
+  cancelPendingZonePaint,
+  paintZoneMembership,
+  zoneAtLevelPoint,
+  zoneAtWorldPoint,
+} from '../../lib/units'
 import useDirectManipulationFeedback from '../../store/use-direct-manipulation-feedback'
 import useEditor, { type MaterialTargetRole } from './../../store/use-editor'
 import useInteractionScope, {
@@ -1609,6 +1615,23 @@ export const SelectionManager = () => {
       // the click falls through to the item underneath.
       if (node.type === 'ceiling' && !event.viaHandle) return
 
+      // Unit focus turns clicks inside a zone into the paint gesture:
+      // membership toggles, the zone stays unselected, focus stays.
+      const focusedUnitId = useViewer.getState().focusedUnitId
+      if (focusedUnitId) {
+        const zone =
+          node.type === 'zone' ? node : zoneAtWorldPoint(event.position[0], event.position[2])
+        if (zone) {
+          event.stopPropagation()
+          clickHandledRef.current = true
+          setTimeout(() => {
+            clickHandledRef.current = false
+          }, 50)
+          paintZoneMembership(focusedUnitId, zone.id)
+          return
+        }
+      }
+
       let currentPhase = useEditor.getState().phase
       let currentStructureLayer = useEditor.getState().structureLayer
       const selectedIdsBeforeRouting = useViewer.getState().selection.selectedIds
@@ -1809,6 +1832,14 @@ export const SelectionManager = () => {
       if (useInteractionScope.getState().scope.kind === 'mesh-editing') return
       const nativeEvent = event.nativeEvent
       if (nativeEvent?.metaKey || nativeEvent?.ctrlKey || nativeEvent?.shiftKey) return
+      // Unit focus: a ground click inside a zone paints it; elsewhere it
+      // leaves focus and the unit selection alone.
+      const focusedUnitId = useViewer.getState().focusedUnitId
+      if (focusedUnitId) {
+        const zone = zoneAtLevelPoint(event.localPosition[0], event.localPosition[2])
+        if (zone) paintZoneMembership(focusedUnitId, zone.id)
+        return
+      }
       const { phase, structureLayer } = useEditor.getState()
       const activeStrategy = SELECTION_STRATEGIES[phase]
       if (activeStrategy) activeStrategy.handleDeselect()
@@ -1919,6 +1950,24 @@ export const SelectionManager = () => {
         }
       }
 
+      // While a unit is focused a double-click inside a zone selects that
+      // zone (focus stays); the two clicks before it cancel each other's paint.
+      if (useViewer.getState().focusedUnitId) {
+        const zone =
+          node.type === 'zone' ? node : zoneAtWorldPoint(event.position[0], event.position[2])
+        if (zone) {
+          event.stopPropagation()
+          cancelPendingZonePaint(zone.id)
+          SELECTION_STRATEGIES.structure?.handleSelect(
+            zone,
+            event.nativeEvent,
+            modifierKeysRef.current,
+            [],
+          )
+          return
+        }
+      }
+
       if (node.type === 'zone') {
         return
       }

package/src/components/editor/thumbnail-generator.tsx

@@ -13,6 +13,7 @@ import {
   GRID_LAYER,
   getVisibleWallMaterials,
   heroCameraPose,
+  refreshIsolation,
   SNAPSHOT_MAX_EDGE,
   SNAPSHOT_MIME,
   SNAPSHOT_QUALITY,
@@ -22,6 +23,7 @@ import {
   THUMBNAIL_WIDTH,
   temporarilyHideNodeTypes,
   temporarilyShowShadowOnly,
+  useSceneAtmosphere,
   useViewer,
 } from '@pascal-app/viewer'
 import type { CameraControls } from '@react-three/drei'
@@ -68,6 +70,7 @@ function clampSnapshotSize(width: number, height: number): { w: number; h: numbe
 export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorProps) => {
   const gl = useThree((state) => state.gl)
   const scene = useThree((state) => state.scene)
+  const atmosphere = useSceneAtmosphere()
   const getThree = useThree((state) => state.get)
   const controls = useThree((state) => state.controls) as CameraControls | null
   const isGenerating = useRef(false)
@@ -82,7 +85,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
     onThumbnailCaptureRef.current = onThumbnailCapture
   }, [onThumbnailCapture])
 
-  // Build the thumbnail camera, SSGI pipeline, and render target once — reused on every capture.
+  // Reuse the camera and snapshot graph until the active atmosphere source changes.
   useEffect(() => {
     captureVersion.current += 1
     const cam = new THREE.PerspectiveCamera(60, THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT, 0.1, 1000)
@@ -97,6 +100,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         renderer: gl as unknown as WebGPURenderer,
         scene,
         camera: cam,
+        atmosphere,
       })
       if (!mounted) {
         pipeline?.dispose()
@@ -114,7 +118,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
       pipelineRef.current?.dispose()
       pipelineRef.current = null
     }
-  }, [gl, scene])
+  }, [gl, scene, atmosphere])
 
   const generate = useCallback(
     async (event: ThumbnailGenerateEvent) => {
@@ -274,6 +278,11 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
               }
             }
 
+            // Geometry and presentation systems may have mounted new meshes
+            // since the viewport's last frame. Apply the same isolation to
+            // those meshes before either snapshot render path submits them,
+            // and restore fog afterwards so the atmosphere never leaks in.
+            restore(refreshIsolation(scene))
             if (pipeline) return pipeline.capture({ captureMode, cropRegion, standardSize })
             gl.render(scene, thumbnailCamera)
             return undefined