@pascal-app/editor 1.0.1 → 1.0.4

package/src/components/tools/tool-manager.tsx

@@ -9,12 +9,16 @@ import {
   type SlabNode,
   useScene,
   type WallNode,
+  type ZoneNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { type ComponentType, lazy, Suspense, useMemo } from 'react'
 import { useRegisteredToolEnabled } from '../../hooks/use-registered-tool-enabled'
+import { useCeilingEditCeilingId } from '../../lib/ceiling-edit-session'
+import type { ReshapeKind } from '../../lib/interaction/scope'
+import { paintRegionTargets, usePaintRegionMode } from '../../lib/paint-region-mode'
 import { siteBoundaryHandlesEnabled } from '../../lib/site-boundary'
-import useEditor, { type Phase, type Tool } from '../../store/use-editor'
+import useEditor, { type Tool } from '../../store/use-editor'
 import useInteractionScope, {
   useControlPointReshape,
   useEditingHole,
@@ -28,12 +32,19 @@ import useInteractionScope, {
 } from '../../store/use-interaction-scope'
 import { Alignment3DGuideLayer } from '../editor/alignment-3d-guide-layer'
 import { Elevation3DGuideLayer } from '../editor/elevation-3d-guide-layer'
+import { FloorOpeningsOverlay3D } from '../editor/floor-openings-overlay'
+import { FloorRegionControls3D } from '../editor/floor-region-controls'
+import { OpenWallEnds3DLayer } from '../editor/open-wall-ends-3d-layer'
 import { OpeningGuides3DLayer } from '../editor/opening-guides-3d-layer'
 import { WallSnapBeaconLayer } from '../editor/wall-snap-beacon-layer'
 import { ElevatorTool } from './elevator/elevator-tool'
 import { MoveTool } from './item/move-tool'
+import { WallPaintRegionTool } from './paint-region/wall-paint-region-tool'
 import { RegistryToolProvider } from './registry-tool-context'
-import { getRegistryAffordanceTool } from './shared/affordance-dispatch'
+import {
+  getRegistryAffordanceTool,
+  preloadRegistryAffordanceTools,
+} from './shared/affordance-dispatch'
 import { FacingPoseIndicator } from './shared/facing-pose-indicator'
 import { SiteBoundaryEditor } from './site/site-boundary-editor'
 import { TerrainSculptTool } from './site/terrain-sculpt-tool'
@@ -44,6 +55,15 @@ import { ZoneTool } from './zone/zone-tool'
 // Cache lazy tool components keyed by their loader so React.lazy isn't
 // re-invoked across renders.
 const lazyToolCache = new WeakMap<() => Promise<unknown>, ComponentType>()
+// Reshapes with their own arm below; anything else resolves by name.
+const DEDICATED_RESHAPES = new Set<ReshapeKind>([
+  'curve',
+  'hole',
+  'endpoint',
+  'boundary',
+  'control-point',
+  'tangent',
+])
 const registryToolPreloadCache = new WeakMap<AnyNodeDefinition, Promise<void>>()
 
 export function preloadRegistryToolModules(tool: string | null): Promise<void> {
@@ -60,8 +80,7 @@ export function preloadRegistryToolModules(tool: string | null): Promise<void> {
   if (def.system) loaders.push(def.system.module)
   if (def.parametrics?.customPanel) loaders.push(def.parametrics.customPanel)
   if (def.parametrics?.trailingSection) loaders.push(def.parametrics.trailingSection)
-  const moveTool = def.affordanceTools?.move
-  if (moveTool) loaders.push(moveTool)
+  loaders.push(() => preloadRegistryAffordanceTools(tool))
 
   const preload = Promise.allSettled(loaders.map((loader) => loader())).then(() => undefined)
   registryToolPreloadCache.set(def, preload)
@@ -88,21 +107,17 @@ function getRegistryTool(tool: Tool | null): ComponentType | null {
 // Legacy tool fallbacks — kinds whose placement tools haven't migrated
 // to `def.tool` yet. Wall / fence / slab / ceiling / door / window /
 // item / shelf / spawn now go through the registry path above.
-const tools: Record<Phase, Partial<Record<Tool, React.FC>>> = {
-  site: {
-    'property-line': SiteBoundaryEditor,
-  },
-  structure: {
-    stair: StairTool,
-    zone: ZoneTool,
-  },
-  furnish: {},
+const tools: Partial<Record<Tool, React.FC>> = {
+  'property-line': SiteBoundaryEditor,
+  stair: StairTool,
+  zone: ZoneTool,
 }
 
 export const ToolManager: React.FC = () => {
   const phase = useEditor((state) => state.phase)
   const mode = useEditor((state) => state.mode)
   const tool = useEditor((state) => state.tool)
+  const paintsWallRegions = usePaintRegionMode((state) => paintRegionTargets(state.mode).wall)
   const registeredToolEnabled = useRegisteredToolEnabled(tool)
   const movingNode = useMovingNode()
   const registryToolOwnsPlacement = useInteractionScope(
@@ -114,6 +129,11 @@ export const ToolManager: React.FC = () => {
   const tangentReshape = useTangentReshape()
   const isCurveReshape = useIsCurveReshape()
   const isToolDrivenReshape = useIsToolDrivenReshape()
+  const registryReshape = useInteractionScope((state) =>
+    state.scope.kind === 'reshaping' && !DEDICATED_RESHAPES.has(state.scope.reshape)
+      ? state.scope.reshape
+      : null,
+  )
   const isFloorplanDrivenReshape = useIsFloorplanDrivenReshape()
   const reshapingNode = useReshapingNode()
   // The endpoint affordance tool's `target` is kind-specific
@@ -140,7 +160,18 @@ export const ToolManager: React.FC = () => {
     }
   }, [reshapingNode, tangentReshape])
   const editingHole = useEditingHole()
-  const selectedZoneId = useViewer((state) => state.selection.zoneId)
+  const editCeilingId = useCeilingEditCeilingId()
+  // A zone picked as a zone, from the Scene list (zoneId) or its area or pill (sole selection).
+  const zoneSelectionId = useViewer((state) => state.selection.zoneId)
+  const soleSelectedId = useViewer((state) =>
+    state.selection.selectedIds.length === 1 ? state.selection.selectedIds[0] : undefined,
+  )
+  const soleSelectedZone = useScene((state) =>
+    soleSelectedId && state.nodes[soleSelectedId as AnyNodeId]?.type === 'zone'
+      ? (soleSelectedId as ZoneNode['id'])
+      : null,
+  )
+  const selectedZoneId = zoneSelectionId ?? soleSelectedZone
   const selectedIds = useViewer((state) => state.selection.selectedIds)
   const buildingId = useViewer((state) => state.selection.buildingId)
   const activeLevelId = useViewer((state) => state.selection.levelId)
@@ -196,12 +227,14 @@ export const ToolManager: React.FC = () => {
   // edge handles — mounts only for a sole selection.
   const isSoleSelection = selectedIds.length === 1
 
-  // Show slab boundary editor when in structure/select mode with a slab selected (but not editing a hole)
+  // Show slab boundary editor in select mode with a slab selected (but not editing a hole)
   const showSlabBoundaryEditor =
-    phase === 'structure' &&
     mode === 'select' &&
     isSoleSelection &&
     selectedSlabId !== undefined &&
+    // Derived plates (a footprint's floor, a room's raised plate) follow their
+    // rooms; only user-drawn slabs get the outline editor.
+    !selectedSlab?.plateRole &&
     !isFloorplanDrivenReshape &&
     !editingSlabHoleIsManual
 
@@ -213,26 +246,28 @@ export const ToolManager: React.FC = () => {
     !isFloorplanDrivenReshape &&
     editingSlabHoleIsManual
 
-  // Show ceiling boundary editor when in structure/select mode with a ceiling selected (but not editing a hole)
+  // Show ceiling boundary editor only inside the ceiling's Edit ceiling session (not while editing a hole)
   const showCeilingBoundaryEditor =
-    phase === 'structure' &&
     mode === 'select' &&
     isSoleSelection &&
     selectedCeilingId !== undefined &&
+    selectedCeilingId === editCeilingId &&
     !isFloorplanDrivenReshape &&
     (!editingHole || editingHole.nodeId !== selectedCeilingId)
 
-  // Show ceiling hole editor when editing a hole on the selected ceiling
+  // Show ceiling hole editor when editing a manual hole inside the ceiling's Edit ceiling session
   const showCeilingHoleEditor =
     selectedCeilingId !== undefined &&
+    selectedCeilingId === editCeilingId &&
     editingHole !== null &&
     editingHole.nodeId === selectedCeilingId &&
+    ((nodes[selectedCeilingId as AnyNodeId] as CeilingNode).holeMetadata?.[editingHole.holeIndex]
+      ?.source ?? 'manual') === 'manual' &&
     !isFloorplanDrivenReshape
 
-  // Show zone boundary editor when in structure/select mode with a zone selected
+  // Show zone boundary editor in select mode with a zone selected
   // Hide when editing a slab or ceiling to avoid overlapping handles
   const showZoneBoundaryEditor =
-    phase === 'structure' &&
     mode === 'select' &&
     selectedZoneId !== null &&
     !isFloorplanDrivenReshape &&
@@ -257,7 +292,7 @@ export const ToolManager: React.FC = () => {
   const RegistryToolComponent = showBuildTool ? getRegistryTool(tool) : null
   const useRegistryTool = RegistryToolComponent != null
 
-  const BuildToolComponent = showBuildTool && !useRegistryTool ? tools[phase]?.[tool] : null
+  const BuildToolComponent = showBuildTool && !useRegistryTool ? tools[tool] : null
   const handlePlacedNodeSelected = (nodeId: AnyNodeId) => {
     setSelection({ selectedIds: [nodeId] })
   }
@@ -281,10 +316,16 @@ export const ToolManager: React.FC = () => {
     <RegistryToolProvider value={registryToolContext}>
       {/* World-space tools: site boundary and building movement operate in world coordinates */}
       {showSiteBoundaryEditor && <SiteBoundaryEditor />}
-      {/* Terrain sculpting is a mode rather than a `tools[phase][tool]` entry —
+      {/* Terrain sculpting is a mode rather than a `tools[tool]` entry —
           it places no node — so it gets its own gate here. World-space, because
           the ground is not building-local. */}
       {sculpting && <TerrainSculptTool />}
+      {/* "Paint part of the floor": level-space, follows the level matrix itself. */}
+      <FloorRegionControls3D />
+      {/* Floor and ceiling openings: level-space, follows the level matrix itself. */}
+      <FloorOpeningsOverlay3D />
+      {/* "Paint part of the wall": follows the wall mesh's own matrix. */}
+      {mode === 'material-paint' && paintsWallRegions && <WallPaintRegionTool />}
       {showMover && movingNode?.type === 'building' && (
         <MoveTool onNodeMoved={handlePlacedNodeSelected} onSpawnMoved={handlePlacedNodeSelected} />
       )}
@@ -384,6 +425,22 @@ export const ToolManager: React.FC = () => {
               </Suspense>
             ) : null
           })()}
+        {/* Reshape kinds without an arm above mount the kind's own affordance tool
+            under the reshape's name (`def.affordanceTools[reshape]`, e.g. wall 'split'). */}
+        {isToolDrivenReshape &&
+          reshapingNode &&
+          registryReshape &&
+          (() => {
+            const RegistryAffordance = getRegistryAffordanceTool(
+              reshapingNode.type,
+              registryReshape,
+            )
+            return RegistryAffordance ? (
+              <Suspense fallback={null}>
+                <RegistryAffordance node={reshapingNode} />
+              </Suspense>
+            ) : null
+          })()}
         {showMover && movingNode.type !== 'building' && (
           <MoveTool
             onNodeMoved={handlePlacedNodeSelected}
@@ -421,6 +478,8 @@ export const ToolManager: React.FC = () => {
         <Elevation3DGuideLayer />
         {/* "Magnetic" beacon at the active wall-draft snap point. */}
         <WallSnapBeaconLayer />
+        {/* Wall ends that aren't joined, with a one-click join — twin of the floor plan's. */}
+        <OpenWallEnds3DLayer />
       </group>
     </RegistryToolProvider>
   )

package/src/components/tools/wall/wall-drafting.test.ts

@@ -22,6 +22,11 @@ import {
   type WallNode,
   WallNode as WallSchema,
 } from '@pascal-app/core'
+import {
+  migrateCeilingRoomLinks,
+  migrateFloorPlates,
+  migrateRoomZones,
+} from '@pascal-app/core/scene-migrations'
 import { useViewer } from '@pascal-app/viewer'
 import useEditor from '../../../store/use-editor'
 import useInteractionScope from '../../../store/use-interaction-scope'
@@ -721,7 +726,9 @@ describe('createWallOnCurrentLevel', () => {
     expect(useScene.temporal.getState().pastStates.length - before).toBe(1)
   })
 
-  test('a room divider splits customized auto slabs and ceilings', () => {
+  test.each([
+    0.05, 0.18,
+  ])('a room divider preserves the footprint floor at %s and splits ceilings', (elevation) => {
     const walls = [
       makeWall([0, 0], [8, 0], 'wall_bottom'),
       makeWall([8, 0], [8, 6], 'wall_right'),
@@ -737,7 +744,8 @@ describe('createWallOnCurrentLevel', () => {
         [8, 6],
         [0, 6],
       ],
-      elevation: 0.18,
+      elevation,
+      floorHeight: elevation,
       thickness: 0.32,
       autoFromWalls: true,
     })
@@ -748,6 +756,11 @@ describe('createWallOnCurrentLevel', () => {
       autoFromWalls: true,
     })
     seedLevel(walls, [slab, ceiling])
+    useScene.setState({
+      nodes: migrateFloorPlates(
+        migrateCeilingRoomLinks(migrateRoomZones(useScene.getState().nodes).nodes).nodes,
+      ).nodes as Record<AnyNodeId, AnyNode>,
+    })
     const stopDetection = initSpaceDetectionSync(useScene, useEditor)
 
     try {
@@ -756,11 +769,13 @@ describe('createWallOnCurrentLevel', () => {
       const nodes = Object.values(useScene.getState().nodes)
       const slabs = nodes.filter((node) => node.type === 'slab')
       const ceilings = nodes.filter((node) => node.type === 'ceiling')
-      expect(slabs).toHaveLength(2)
+      expect(slabs).toHaveLength(1)
+      expect(slabs[0]).toMatchObject({ plateRole: 'base', floorHeight: elevation })
+      expect(slabs[0]!.zoneIds).toHaveLength(2)
       expect(ceilings).toHaveLength(2)
       expect(
         slabs.every(
-          (node) => node.autoFromWalls && node.elevation === 0.18 && node.thickness === 0.32,
+          (node) => node.autoFromWalls && node.elevation === elevation && node.thickness === 0.32,
         ),
       ).toBe(true)
       expect(ceilings.every((node) => node.autoFromWalls)).toBe(true)

package/src/components/tools/zone/zone-tool.tsx

@@ -3,10 +3,10 @@ import {
   emitter,
   type GridEvent,
   type LevelNode,
+  newZone,
   runAsSingleSceneHistoryStep,
   snapPointAlongAngleRay,
   useScene,
-  ZoneNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useMemo, useRef, useState } from 'react'
@@ -19,6 +19,7 @@ import {
 } from './../../../lib/surface-plan-snap'
 import { focusedUnitNode } from './../../../lib/units'
 import { snapWorldXZForActiveBuilding } from './../../../lib/world-grid-snap'
+import { nextZoneName } from '../../../lib/zone-name'
 import useEditor, { isAngleSnapActive, isGridSnapActive } from './../../../store/use-editor'
 import { useFloorplanDraftPreview } from './../../../store/use-floorplan-draft-preview'
 import { CursorSphere } from '../shared/cursor-sphere'
@@ -31,18 +32,9 @@ const Y_OFFSET = 0.02
 const commitZoneDrawing = (levelId: LevelNode['id'], points: Array<[number, number]>) => {
   const { createNode, updateNode, nodes } = useScene.getState()
 
-  // Count existing zones for naming and color cycling
-  const zoneCount = Object.values(nodes).filter((n) => n.type === 'zone').length
-  const name = `Zone ${zoneCount + 1}`
+  const name = nextZoneName(nodes)
 
-  // Default to blue, cycle through palette for subsequent zones
-  const color = '#3b82f6'
-
-  const zone = ZoneNode.parse({
-    name,
-    polygon: points,
-    color,
-  })
+  const zone = newZone({ name, polygon: points })
 
   const focusedUnit = focusedUnitNode()
 

package/src/components/ui/action-menu/action-button.tsx

@@ -36,6 +36,9 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
       <Tooltip>
         <TooltipTrigger asChild>
           <Button
+            // These are toggles, not commands: the armed/unarmed state has to be
+            // readable without decoding the active-state styling.
+            aria-pressed={isActive}
             className={cn('relative h-11 w-11 transition-all', className)}
             onClick={(event) => {
               triggerSFX('sfx:menu-click')

package/src/components/ui/action-menu/camera-actions.tsx

@@ -3,12 +3,13 @@
 import { emitter } from '@pascal-app/core'
 import Image from 'next/image'
 import useEditor from '../../../store/use-editor'
+import { visibleScene } from '../../../store/view-layout'
 import { ActionButton } from './action-button'
 
 export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
   // Orbit stays useful in 2D-only (it spins the synced floorplan view), but
   // top view only tilts the hidden 3D camera — pointless without the canvas.
-  const is2dOnly = useEditor((s) => s.viewMode === '2d')
+  const is2dOnly = useEditor((s) => visibleScene(s) === '2d')
 
   const goToTopView = () => {
     emitter.emit('camera-controls:top-view')

package/src/components/ui/action-menu/control-modes.tsx

@@ -9,7 +9,7 @@ import useEditor from './../../../store/use-editor'
 import { ActionButton } from './action-button'
 import { MeasurementControl } from './measurement-control'
 
-type ControlId = 'select' | 'box-select' | 'zone' | 'delete'
+type ControlId = 'select' | 'box-select' | 'delete'
 
 type ControlConfig = {
   id: ControlId
@@ -32,14 +32,6 @@ const controls: ControlConfig[] = [
     color: 'hover:bg-blue-500/20 hover:text-blue-400',
     activeColor: 'bg-blue-500/20 text-blue-400',
   },
-  {
-    id: 'zone',
-    imageSrc: '/icons/zone.webp',
-    label: 'Zone',
-    shortcut: 'Z',
-    color: 'hover:bg-green-500/20 hover:text-green-400',
-    activeColor: 'bg-green-500/20 text-green-400',
-  },
   {
     id: 'delete',
     icon: Trash2,
@@ -52,49 +44,23 @@ const controls: ControlConfig[] = [
 
 export function ControlModes() {
   const mode = useEditor((state) => state.mode)
-  const phase = useEditor((state) => state.phase)
   const selectionTool = useEditor((state) => state.floorplanSelectionTool)
   const armToolMode = useEditor((state) => state.armToolMode)
-  const setPhase = useEditor((state) => state.setPhase)
-  const setStructureLayer = useEditor((state) => state.setStructureLayer)
   const setSelectionTool = useEditor((state) => state.setFloorplanSelectionTool)
 
-  const isSiteEditing = phase === 'site'
-
-  const structureLayer = useEditor((state) => state.structureLayer)
-
   const getIsActive = (id: ControlId): boolean => {
     if (id === 'select') return mode === 'select' && selectionTool === 'click'
     if (id === 'box-select') return mode === 'select' && selectionTool === 'marquee'
-    if (id === 'zone')
-      return mode === 'build' && phase === 'structure' && structureLayer === 'zones'
     return mode === id
   }
 
   const handleClick = (id: ControlId) => {
-    // Exit site editing first if needed. Sculpting is a site-phase mode, so
-    // leaving the phase is exactly the right way to leave the brush — but the
-    // order matters: `setPhase` resets the mode, and setting the mode first
-    // would have it overwritten below.
-    if (isSiteEditing) {
-      setPhase('structure')
-      setStructureLayer('elements')
-    }
-
     if (id === 'select') {
       armToolMode({ mode: 'select' })
       setSelectionTool('click')
     } else if (id === 'box-select') {
       armToolMode({ mode: 'select' })
       setSelectionTool('marquee')
-    } else if (id === 'zone') {
-      if (getIsActive('zone')) {
-        armToolMode({ mode: 'select' })
-      } else {
-        setPhase('structure')
-        setStructureLayer('zones')
-        armToolMode({ mode: 'build', tool: 'zone' })
-      }
     } else {
       armToolMode({ mode: id })
     }
@@ -121,6 +87,7 @@ export function ControlModes() {
               // A static hook for a host app that wants to point a first-run
               // tour at this button. Nothing here reads it.
               data-guide-target={c.id === 'select' ? 'mode-select' : undefined}
+              isActive={isActive}
               label={c.label}
               onClick={() => handleClick(c.id)}
               shortcut={c.shortcut}

package/src/components/ui/action-menu/measurement-control.tsx

@@ -22,6 +22,7 @@ import { useState } from 'react'
 import type { CreatableMeasurementKind } from '../../../lib/measurement-kind'
 import { cn } from '../../../lib/utils'
 import useEditor from '../../../store/use-editor'
+import { VIEW_2D } from '../../../store/view-layout'
 import useFloorplanMode from '../../../store/use-floorplan-mode'
 import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
 import { ActionButton } from './action-button'
@@ -74,12 +75,10 @@ export function MeasurementControl() {
     (state) => state.toolDefaults['construction-dimension']?.mode,
   )
   const setMode = useEditor((state) => state.setMode)
-  const setPhase = useEditor((state) => state.setPhase)
   const setLastMeasurementKind = useEditor((state) => state.setLastMeasurementKind)
-  const setStructureLayer = useEditor((state) => state.setStructureLayer)
   const setTool = useEditor((state) => state.setTool)
   const setToolDefaults = useEditor((state) => state.setToolDefaults)
-  const setViewMode = useEditor((state) => state.setViewMode)
+  const showView = useEditor((state) => state.showView)
 
   const selectedOption =
     measurementOptions.find((option) => option.kind === selectedKind) ?? measurementOptions[0]
@@ -104,8 +103,6 @@ export function MeasurementControl() {
       : selectedOption.label
 
   const activateMeasurement = (kind: CreatableMeasurementKind) => {
-    setPhase('structure')
-    setStructureLayer('elements')
     setLastMeasurementKind(kind)
     setToolDefaults('measurement', { kind })
     setMode('build')
@@ -121,8 +118,6 @@ export function MeasurementControl() {
   }
 
   const activateSmartMeasurement = () => {
-    setPhase('structure')
-    setStructureLayer('elements')
     setToolDefaults('measurement', { kind: 'smart' })
     setMode('build')
     setTool('measurement')
@@ -136,9 +131,7 @@ export function MeasurementControl() {
       useFloorplanMode.getState().showExpertModeNotice('Construction Dimension')
       return
     }
-    setPhase('structure')
-    setStructureLayer('elements')
-    setViewMode('2d')
+    showView(VIEW_2D)
     setToolDefaults('construction-dimension', { chainMode, mode: dimensionMode })
     setMode('build')
     setTool('construction-dimension')