@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/editor/room-labels.tsx

@@ -7,15 +7,22 @@ import {
   containsPoint,
   DEFAULT_LEVEL_HEIGHT,
   emitter,
+  formatNumber,
+  getAreaUnitLabel,
+  type LinearUnit,
+  type PascalI18n,
   type Polygon,
   polygonInteriorPoint,
   type Ring,
+  roomFloorElevation,
   sceneRegistry,
+  squareMetersToAreaUnit,
+  useLocale,
+  usePascalI18n,
   useScene,
   type ZoneNode,
 } from '@pascal-app/core'
 import { timeSpan, useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
 import { useFrame, useThree } from '@react-three/fiber'
 import {
   createContext,
@@ -45,19 +52,14 @@ import {
 } from 'three'
 import { useShallow } from 'zustand/react/shallow'
 import { useRoomRecords } from '../../hooks/use-selected-room'
-import { getAreaUnitLabel, type LinearUnit, squareMetersToAreaUnit } from '../../lib/measurements'
-import { roomFloorElevation } from '../../lib/room-handle-drag'
+import { displayRoomName } from '../../lib/room-name-messages'
 import type { RoomSelectionRecord } from '../../lib/room-selection'
-import {
-  clickZoneArea,
-  hoverZoneArea,
-  leaveZoneArea,
-  zoneKindLabel,
-} from '../../lib/room-zone-routing'
+import { clickZoneArea, hoverZoneArea, leaveZoneArea } from '../../lib/room-zone-routing'
 import { selectionModifiersFromEvent } from '../../lib/selection-routing'
 import useEditor from '../../store/use-editor'
 import useInteractionScope from '../../store/use-interaction-scope'
 import { isViewVisible, VIEW_2D, VIEW_3D } from '../../store/view-layout'
+import { Html } from './localized-html'
 
 const CONTEXT_TYPES = new Set(['site', 'building', 'level'])
 
@@ -92,8 +94,12 @@ export function roomLabelsVisible(state: RoomLabelVisibilityState): boolean {
   )
 }
 
-export function formatRoomArea(squareMeters: number, unit: LinearUnit): string {
-  return `${squareMetersToAreaUnit(squareMeters, unit).toFixed(1)} ${getAreaUnitLabel(unit)}`
+export function formatRoomArea(squareMeters: number, unit: LinearUnit, locale?: string): string {
+  return `${formatNumber(squareMetersToAreaUnit(squareMeters, unit), {
+    min: 1,
+    max: 1,
+    locale,
+  })} ${getAreaUnitLabel(unit)}`
 }
 
 function useRoomLabelsVisible() {
@@ -1169,11 +1175,12 @@ export function RoomPillChip({
   onLeave: () => void
 }) {
   const unit = useViewer((s) => s.unit)
-  const areaLabel = formatRoomArea(areaM2, unit)
+  const locale = useLocale()
+  const areaLabel = formatRoomArea(areaM2, unit, locale)
   // biome-ignore lint/correctness/useExhaustiveDependencies: A dot's border box does not resize when its hidden text changes.
   useLayoutEffect(() => {
     if (elements instanceof PillElements) elements.measure(zoneId)
-  }, [areaM2, elements, name, unit, zoneId])
+  }, [areaM2, elements, locale, name, unit, zoneId])
   const register = useCallback(
     (element: HTMLElement | null) => {
       if (element) elements.set(zoneId, element)
@@ -1227,6 +1234,7 @@ export function RoomPillDetail({
   areaM2: number
 }) {
   const unit = useViewer((s) => s.unit)
+  const locale = useLocale()
   return (
     <div
       aria-hidden
@@ -1234,7 +1242,7 @@ export function RoomPillDetail({
       data-room-label-detail={zoneId}
       data-room-label-view={view}
     >
-      <LabelParts areaLabel={formatRoomArea(areaM2, unit)} color={color} full name={name} />
+      <LabelParts areaLabel={formatRoomArea(areaM2, unit, locale)} color={color} full name={name} />
     </div>
   )
 }
@@ -1244,7 +1252,13 @@ function useLabelZone(zoneId: string) {
   return zone && zone.visible !== false ? zone : null
 }
 
-const labelName = (zone: ZoneNode) => zone.name?.trim() || zoneKindLabel(zone)
+const labelName = (zone: ZoneNode, i18n: PascalI18n) => {
+  const name = zone.name?.trim()
+  if (name) return displayRoomName(name, i18n)
+  return zone.spaceRole === 'room'
+    ? i18n._({ id: 'editor.roomLabel.room', message: 'Room' })
+    : i18n._({ id: 'editor.roomLabel.zone', message: 'Zone' })
+}
 
 /**
  * One room's pill in the editor. Hover and click take the same rule as the
@@ -1260,6 +1274,7 @@ function RoomPill({
   view: '2d' | '3d'
   elements: Map<string, HTMLElement>
 }) {
+  const i18n = usePascalI18n()
   const zone = useLabelZone(entry.zoneId)
   // A pill that disappears under the cursor (its click selected something)
   // fires no leave: end the hover it set.
@@ -1270,7 +1285,7 @@ function RoomPill({
       areaM2={entry.area}
       color={zone.color}
       elements={elements}
-      name={labelName(zone)}
+      name={labelName(zone, i18n)}
       onClick={(event) => clickZoneArea(entry.zoneId, selectionModifiersFromEvent(event))}
       onHover={(event) => hoverZoneArea(entry.zoneId, selectionModifiersFromEvent(event))}
       onLeave={() => leaveZoneArea(entry.zoneId)}
@@ -1281,13 +1296,14 @@ function RoomPill({
 }
 
 function RoomDetail({ entry, view }: { entry: LabelEntry; view: '2d' | '3d' }) {
+  const i18n = usePascalI18n()
   const zone = useLabelZone(entry.zoneId)
   if (!zone) return null
   return (
     <RoomPillDetail
       areaM2={entry.area}
       color={zone.color}
-      name={labelName(zone)}
+      name={labelName(zone, i18n)}
       view={view}
       zoneId={entry.zoneId}
     />

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

@@ -15,7 +15,6 @@ import {
   type NodeEvent,
   nodeRegistry,
   type RoofEvent,
-  type RoofNode,
   type RoofSegmentEvent,
   type RoofSegmentNode,
   resolveLevelId,
@@ -29,7 +28,13 @@ import {
   useScene,
   wallFaceScriptPaintRefusal,
 } from '@pascal-app/core'
-import { getRoofMaterialArray, registerMaterialCacheCleanup, useViewer } from '@pascal-app/viewer'
+import {
+  markHighlight,
+  ROOF_HEEL_MATERIAL_INDEX,
+  registerMaterialCacheCleanup,
+  tintEmissive,
+  useViewer,
+} from '@pascal-app/viewer'
 import { useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useRef } from 'react'
 import { type BufferGeometry, Color, type Material, type Mesh, type Object3D, Vector3 } from 'three'
@@ -57,7 +62,6 @@ import {
 import { selectionEnabled } from '../../lib/interaction/scope'
 import {
   type ActivePaintMaterial,
-  buildRoofSurfaceMaterialPatch,
   hasActivePaintMaterial,
   resolveActivePaintMaterialFromSelection,
 } from '../../lib/material-paint'
@@ -90,7 +94,6 @@ import {
   paintScopeRole,
   paintSurfaceLabel,
   resolvePaintScopeTargets,
-  slotDisplayLabel,
   type WallPaintHit,
 } from '../../lib/paint-scope'
 import {
@@ -248,9 +251,10 @@ function resolveStairMaterialTarget(
 
 function resolveRoofMaterialTarget(
   event: RoofEvent | RoofSegmentEvent,
-): 'top' | 'edge' | 'wall' | null {
+): 'top' | 'edge' | 'wall' | 'heel' | null {
   const materialIndex = getIntersectionMaterialIndex(getEventObject(event), event.faceIndex)
   if (materialIndex === 3) return 'top'
+  if (materialIndex === ROOF_HEEL_MATERIAL_INDEX) return 'heel'
   if (materialIndex === 0) return 'edge'
   if (materialIndex === 1 || materialIndex === 2) return 'wall'
 
@@ -451,14 +455,6 @@ function resolveSelectModeNodeTarget(event: NodeEvent, drill = false): AnyNode {
   return event.node
 }
 
-function previewMeshMaterial(mesh: Mesh, material: Material | Material[]): PaintPreviewCleanup {
-  const previousMaterial = mesh.material
-  mesh.material = material
-  return () => {
-    mesh.material = previousMaterial
-  }
-}
-
 function previewCursor(cursor: string): PaintPreviewCleanup {
   const previousCursor = document.body.style.cursor
   document.body.style.cursor = cursor
@@ -467,33 +463,6 @@ function previewCursor(cursor: string): PaintPreviewCleanup {
   }
 }
 
-function applyRoofPaintPreview(
-  node: RoofNode,
-  role: 'top' | 'edge' | 'wall',
-  material: ActivePaintMaterial,
-): PaintPreviewCleanup | null {
-  const root = getRegisteredNodeObject(node.id)
-  const mesh = root?.getObjectByName('merged-roof') as Mesh | undefined
-  if (!mesh) return null
-
-  const previewNode = {
-    ...node,
-    ...buildRoofSurfaceMaterialPatch(node, role, material.material, material.materialPreset),
-  }
-  const previewMaterial = getRoofMaterialArray(
-    previewNode,
-    useViewer.getState().shading,
-    useViewer.getState().textures,
-    useViewer.getState().colorPreset,
-    useViewer.getState().sceneTheme,
-    null,
-    useScene.getState().materials,
-  )
-  if (!previewMaterial) return null
-
-  return previewMeshMaterial(mesh, previewMaterial)
-}
-
 // Chimney + dormer paint dispatch lives on their NodeDefinition's
 // `capabilities.paint` (see packages/nodes/src/{chimney,dormer}/
 // paint.ts). The generic registry-driven arm in this file consults
@@ -518,16 +487,14 @@ const HIGHLIGHT_PROFILES = {
   delete: {
     color: new Color('#dc2626'),
     blend: 0.76,
-    emissiveBlend: 0.92,
-    emissiveIntensity: 0.46,
+    emissive: 0.92,
   },
   selection: {
     // Keep the real material/texture readable: no albedo tint, just a gentle
     // indigo emissive glow so it reads as selected.
     color: new Color('#818cf8'),
     blend: 0,
-    emissiveBlend: 0.4,
-    emissiveIntensity: 0.12,
+    emissive: 0.12,
   },
 } as const
 
@@ -582,15 +549,7 @@ function createHighlightedMaterial(material: Material, kind: HighlightKind): Mat
     highlightedMaterial.color = highlightedMaterial.color.clone().lerp(profile.color, profile.blend)
   }
 
-  if (highlightedMaterial.emissive instanceof Color) {
-    highlightedMaterial.emissive = highlightedMaterial.emissive
-      .clone()
-      .lerp(profile.color, profile.emissiveBlend)
-    highlightedMaterial.emissiveIntensity = Math.max(
-      highlightedMaterial.emissiveIntensity ?? 0,
-      profile.emissiveIntensity,
-    )
-  }
+  tintEmissive(highlightedMaterial, profile.color, profile.emissive)
 
   if (typeof highlightedMaterial.opacity === 'number' && highlightedMaterial.opacity < 1) {
     highlightedMaterial.transparent = true
@@ -598,7 +557,7 @@ function createHighlightedMaterial(material: Material, kind: HighlightKind): Mat
   }
 
   highlightedMaterial.needsUpdate = true
-  return highlightedMaterial
+  return markHighlight(highlightedMaterial)
 }
 
 function createHighlightedMaterials(
@@ -892,9 +851,7 @@ export const SelectionManager = () => {
 
       // Registry-driven paint dispatch — kinds that declare
       // `capabilities.paint` route hover / click / preview through
-      // their definition. Wall, chimney, and dormer use this; legacy
-      // roof / stair / single-surface arms below stay until they
-      // migrate too.
+      // their definition (wall, chimney, dormer, roof, …).
       const paintCap = nodeRegistry.get(node.type)?.capabilities?.paint
       if (paintCap) {
         const materialIndex = getIntersectionMaterialIndex(getEventObject(event), event.faceIndex)
@@ -1063,51 +1020,7 @@ export const SelectionManager = () => {
         }
       }
 
-      // A segment paints through its definition's `capabilities.paint`; the merged shell's hit is
-      // the roof's, and fans to it.
-      if (node.type === 'roof') {
-        const role = resolveRoofMaterialTarget(event as RoofEvent)
-        if (isPaintPicking()) return pickInteraction(node, role, event, null)
-        const compatible = role !== null && paintEnabled
-        return {
-          key: `roof:${node.id}:${role ?? 'unsupported'}:${eraser ? 'erase' : 'paint'}`,
-          hoveredId: node.id as AnyNodeId,
-          hoverMode: compatible ? (eraser ? 'erase-ready' : 'paint-ready') : 'paint-disabled',
-          // Roof isn't on the slot model (role-specific fields, custom commit),
-          // so it offers only the single surface — but still labels it.
-          paintHover:
-            compatible && role
-              ? {
-                  scopes: ['single'],
-                  slotLabel: slotDisplayLabel(node, role),
-                  nodeNoun: 'roof',
-                }
-              : null,
-          apply:
-            compatible && role
-              ? () => {
-                  useScene
-                    .getState()
-                    .updateNode(
-                      node.id as AnyNodeId,
-                      buildRoofSurfaceMaterialPatch(
-                        node,
-                        role,
-                        paintSpec.material,
-                        paintSpec.materialPreset,
-                      ),
-                    )
-                }
-              : null,
-          preview:
-            compatible && role
-              ? () => applyRoofPaintPreview(node, role, paintSpec)
-              : () => previewCursor('not-allowed'),
-        }
-      }
-
-      // Only `roof` reaches a legacy paint arm (above) — every
-      // other paintable kind declares `capabilities.paint` and returns from the
+      // Every paintable kind declares `capabilities.paint` and returns from the
       // registry-driven dispatch at the top of this function.
 
       const disabledNodeTypes = ['zone']

package/src/components/editor/separator-end-grip.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { type SeparatorNode, sceneRegistry } from '@pascal-app/core'
+import { type ThreeEvent, useThree } from '@react-three/fiber'
+import { useState } from 'react'
+import { OrthographicCamera, Plane, Vector2, Vector3 } from 'three'
+import { runSeparatorEndDrag } from '../../lib/separator-edit'
+import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
+import { HandleArrow } from './handles/handle-arrow'
+
+/**
+ * An invisible wall's 3D end grip, the twin of its end handle on the plan: a
+ * cube at the end, on the floor at `height`. Dragging it moves the end across
+ * that floor (`runSeparatorEndDrag`), the invisible walls joined there
+ * following. Rendered in the level frame.
+ */
+export function SeparatorEndGrip({
+  separator,
+  endpoint,
+  height,
+  levelId,
+}: {
+  separator: SeparatorNode
+  endpoint: 'start' | 'end'
+  height: number
+  levelId: string
+}) {
+  const [hover, setHover] = useState(false)
+  const { camera, raycaster, gl } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const [x, z] = separator[endpoint]
+  const onPointerDown = (event: ThreeEvent<PointerEvent>) => {
+    if (event.button !== 0) return
+    event.stopPropagation()
+    suppressBoxSelectForPointer(event)
+    const level = sceneRegistry.nodes.get(levelId)
+    if (!level) return
+    level.updateWorldMatrix(true, false)
+    const toLocal = level.matrixWorld.clone().invert()
+    const floor = new Plane().setFromNormalAndCoplanarPoint(
+      new Vector3(0, 1, 0).transformDirection(level.matrixWorld),
+      new Vector3(x, height, z).applyMatrix4(level.matrixWorld),
+    )
+    runSeparatorEndDrag({
+      separatorId: separator.id,
+      endpoint,
+      levelId,
+      toPlan: (clientX, clientY) => {
+        const rect = gl.domElement.getBoundingClientRect()
+        raycaster.setFromCamera(
+          new Vector2(
+            ((clientX - rect.left) / rect.width) * 2 - 1,
+            -((clientY - rect.top) / rect.height) * 2 + 1,
+          ),
+          camera,
+        )
+        const hit = raycaster.ray.intersectPlane(floor, new Vector3())
+        if (!hit) return null
+        const local = hit.applyMatrix4(toLocal)
+        return [local.x, local.z]
+      },
+    })
+  }
+  return (
+    <HandleArrow
+      cursor="grab"
+      hover={hover}
+      onHoverChange={setHover}
+      onPointerDown={onPointerDown}
+      placement={{ position: [x, height, z], baseScale: zoom }}
+      shape="tracker"
+    />
+  )
+}

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

@@ -1,16 +1,20 @@
 'use client'
 
 import type { SiteNode } from '@pascal-app/core'
-import { sceneRegistry, useLiveNodeOverrides, useScene } from '@pascal-app/core'
+import {
+  formatLinearMeasurement,
+  sceneRegistry,
+  useLiveNodeOverrides,
+  useScene,
+} from '@pascal-app/core'
 import { getSceneTheme, useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
 import { createPortal, useFrame, useThree } from '@react-three/fiber'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { type Camera, type Object3D, Vector3 } from 'three'
 import { groundHeightAt } from '../../lib/ground-surface'
-import { formatLinearMeasurement } from '../../lib/measurements'
 import { SITE_BOUNDARY_DRAG_LABEL } from '../../lib/site-boundary'
 import { useActiveHandleDrag } from '../../store/use-interaction-scope'
+import { Html } from './localized-html'
 
 type ViewportSize = {
   width: number

package/src/components/editor/thumbnail-generator.test.ts

@@ -205,31 +205,38 @@ describe('a sheet capture session', () => {
     const viewer = useViewer.getState()
     viewer.setWallMode('down')
     viewer.setLevelMode('exploded')
-    viewer.setShading('solid')
+    viewer.setRenderQuality('low')
     viewer.setTextures(false)
     viewer.setColorPreset('white')
+    viewer.setTimeOfDay('night')
+    viewer.setWeather('overcast')
     const view = () => {
-      const { wallMode, levelMode, shading, textures, colorPreset } = useViewer.getState()
-      return { wallMode, levelMode, shading, textures, colorPreset }
+      const { wallMode, levelMode, renderQuality, textures, colorPreset, timeOfDay, weather } =
+        useViewer.getState()
+      return { wallMode, levelMode, renderQuality, textures, colorPreset, timeOfDay, weather }
     }
-    // the shading stays the user's: the capture brings its own AO
+    // the quality stays the user's: the capture brings its own AO
 
     const restore = presentFinished()
     expect(view()).toEqual({
       wallMode: 'up',
       levelMode: 'stacked',
-      shading: 'solid',
+      renderQuality: 'low',
       textures: true,
       colorPreset: 'clay',
+      timeOfDay: 'midday',
+      weather: 'fair',
     })
 
     restore()
     expect(view()).toEqual({
       wallMode: 'down',
       levelMode: 'exploded',
-      shading: 'solid',
+      renderQuality: 'low',
       textures: false,
       colorPreset: 'white',
+      timeOfDay: 'night',
+      weather: 'overcast',
     })
   })
 
@@ -239,6 +246,8 @@ describe('a sheet capture session', () => {
     viewer.setLevelMode('stacked')
     viewer.setTextures(true)
     viewer.setColorPreset('clay')
+    viewer.setTimeOfDay('midday')
+    viewer.setWeather('fair')
     let writes = 0
     const unsubscribe = useViewer.subscribe(() => {
       writes++

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

@@ -16,6 +16,7 @@ import {
   GRID_LAYER,
   heroCameraPose,
   holdLiveFrame,
+  itemLightsForCapture,
   pendingSceneBuildCount,
   presentLevelsForCapture,
   refreshIsolation,
@@ -437,13 +438,15 @@ const HOLD_MAX_MS = 300_000
  * What the sheets' pictures are drawn in, whatever the user's view: full-
  * height walls, the storeys stacked at their true heights, the materials'
  * own textures and colours (a white or blueprint palette is a view, not the
- * house). The shading stays the user's: the capture brings its own AO.
+ * house), lit by a fair midday. The shading stays the user's: the capture brings its own AO.
  */
 const FINISHED_PRESENTATION = {
   wallMode: 'up',
   levelMode: 'stacked',
   textures: true,
   colorPreset: 'clay',
+  timeOfDay: 'midday',
+  weather: 'fair',
 } as const
 
 /** The viewer switched to FINISHED_PRESENTATION; the returned function puts the user's view back. */
@@ -470,6 +473,25 @@ export function presentFinished(): () => void {
     viewer.setColorPreset(FINISHED_PRESENTATION.colorPreset)
     restores.push(() => useViewer.getState().setColorPreset(colorPreset))
   }
+  if (
+    viewer.timeOfDay !== FINISHED_PRESENTATION.timeOfDay ||
+    viewer.timeOfDayMinutes !== null ||
+    viewer.skyLive
+  ) {
+    const { timeOfDay, timeOfDayMinutes, skyLive } = viewer
+    viewer.setTimeOfDay(FINISHED_PRESENTATION.timeOfDay)
+    restores.push(() => {
+      const next = useViewer.getState()
+      next.setTimeOfDay(timeOfDay)
+      if (timeOfDayMinutes !== null) next.setTimeOfDayMinutes(timeOfDayMinutes)
+      if (skyLive) next.setSkyLive(true)
+    })
+  }
+  if (viewer.weather !== FINISHED_PRESENTATION.weather) {
+    const weather = viewer.weather
+    viewer.setWeather(FINISHED_PRESENTATION.weather)
+    restores.push(() => useViewer.getState().setWeather(weather))
+  }
   return () => {
     for (const restore of restores.reverse()) restore()
   }
@@ -995,6 +1017,9 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
               } else if (snapLevels || pose || cameraPose) {
                 exteriorGroundForCapture(restore, Boolean(cameraPose || pose), thumbnailCamera)
               }
+              // Last, with the camera where the picture is taken from: the item lights that
+              // matter to it, at full strength.
+              restore(itemLightsForCapture(scene, thumbnailCamera))
             }
             // The scene pass is a FRAME-updated node: it renders once per node
             // frame, and only the animation loop advances that frame. With the