@pascal-app/editor 1.0.3 → 1.0.5

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

@@ -4,6 +4,7 @@ import {
   type AnyNodeId,
   applyHeightPatch,
   BlockNode,
+  BuildingNode,
   CeilingNode,
   createTerrainField,
   DoorNode as DoorSchema,
@@ -12,6 +13,7 @@ import {
   GROUND_SUPPORT_ID,
   getFloorPlacedElevation,
   initSpaceDetectionSync,
+  LevelNode as LevelSchema,
   nodeRegistry,
   registerNode,
   resolveTerrainWallConstructionOptions,
@@ -22,6 +24,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'
@@ -175,6 +182,116 @@ describe('createWallOnCurrentLevel', () => {
     useScene.temporal.getState().resume()
   })
 
+  describe('on a level below grade', () => {
+    const seedBasement = (thickness?: number) => {
+      const basement = LevelSchema.parse({
+        id: 'level_cellar',
+        parentId: 'building_house',
+        level: -1,
+        baseElevation: -2.5,
+        height: 2.5,
+      })
+      const main = LevelSchema.parse({
+        id: 'level_main',
+        parentId: 'building_house',
+        level: 0,
+        height: 2.5,
+      })
+      const building = BuildingNode.parse({
+        id: 'building_house',
+        children: [basement.id, main.id],
+      })
+      useScene.setState({
+        nodes: Object.fromEntries(
+          [building, basement, main].map((node) => [node.id, node as AnyNode]),
+        ),
+        rootNodeIds: [building.id],
+        dirtyNodes: new Set(),
+        collections: {},
+      } as never)
+      useEditor.setState({
+        toolDefaults: {
+          ...useEditor.getState().toolDefaults,
+          wall: thickness === undefined ? {} : { thickness },
+        },
+      } as never)
+      useScene.temporal.getState().clear()
+      useScene.temporal.getState().resume()
+    }
+    const select = (levelId: string) =>
+      useViewer.setState({
+        selection: { buildingId: 'building_house', levelId, zoneId: null, selectedIds: [] },
+      } as never)
+    let previousDefaults: ReturnType<typeof useEditor.getState>['toolDefaults']
+    beforeEach(() => {
+      previousDefaults = useEditor.getState().toolDefaults
+    })
+    afterEach(() => {
+      useEditor.setState({ toolDefaults: previousDefaults } as never)
+    })
+
+    test('the wall tool draws an 8 in CMU foundation wall with 2x4 furring flat inside, 0.241 m thick', () => {
+      seedBasement()
+      select('level_cellar')
+      const created = createWallOnCurrentLevel([0, 0], [4, 0])
+      expect(created?.thickness).toBe(0.241)
+      expect(created?.assembly?.layers).toMatchObject([
+        { material: 'cmu', core: true, thickness: 0.203 },
+        { role: 'furring', thickness: 0.038 },
+      ])
+      const stored = useScene.getState().nodes[created!.id] as WallNode
+      expect(stored.assembly).toEqual(created?.assembly)
+    })
+
+    test('only the walls against the ground are foundation walls: the perimeter is, a partition and a wall inside are not', () => {
+      seedBasement()
+      select('level_cellar')
+      const sides: Array<[[number, number], [number, number]]> = [
+        [
+          [0, 0],
+          [8, 0],
+        ],
+        [
+          [8, 0],
+          [8, 6],
+        ],
+        [
+          [8, 6],
+          [0, 6],
+        ],
+        [
+          [0, 6],
+          [0, 0],
+        ],
+      ]
+      for (const [start, end] of sides) {
+        expect(createWallOnCurrentLevel(start, end)?.thickness).toBe(0.241)
+      }
+      const partition = createWallOnCurrentLevel([4, 0], [4, 6])
+      expect(partition?.assembly).toBeUndefined()
+      const dangling = createWallOnCurrentLevel([0, 3], [3, 3])
+      expect(dangling?.assembly).toBeUndefined()
+      // a bay on the outside of the east wall is on the outline again
+      const bay = createWallOnCurrentLevel([8, 1], [11, 1])
+      expect(bay?.thickness).toBe(0.241)
+    })
+
+    test('the ground floor over it keeps the plain wall', () => {
+      seedBasement()
+      select('level_main')
+      const created = createWallOnCurrentLevel([0, 0], [4, 0])
+      expect(created?.assembly).toBeUndefined()
+    })
+
+    test('a thickness set in the tool defaults is kept, with no stack', () => {
+      seedBasement(0.3)
+      select('level_cellar')
+      const created = createWallOnCurrentLevel([0, 0], [4, 0])
+      expect(created?.thickness).toBe(0.3)
+      expect(created?.assembly).toBeUndefined()
+    })
+  })
+
   test('endpoint near an existing corner attaches to the corner instead of splitting', () => {
     const created = createWallOnCurrentLevel([2, 2], [3.99, 0])
 
@@ -721,53 +838,64 @@ describe('createWallOnCurrentLevel', () => {
     expect(useScene.temporal.getState().pastStates.length - before).toBe(1)
   })
 
-  test('a room divider splits customized auto slabs and ceilings', () => {
-    const walls = [
-      makeWall([0, 0], [8, 0], 'wall_bottom'),
-      makeWall([8, 0], [8, 6], 'wall_right'),
-      makeWall([8, 6], [0, 6], 'wall_top'),
-      makeWall([0, 6], [0, 0], 'wall_left'),
-    ]
-    const slab = SlabNode.parse({
-      id: 'slab_auto',
-      parentId: LEVEL_ID,
-      polygon: [
-        [0, 0],
-        [8, 0],
-        [8, 6],
-        [0, 6],
-      ],
-      elevation: 0.18,
-      thickness: 0.32,
-      autoFromWalls: true,
-    })
-    const ceiling = CeilingNode.parse({
-      id: 'ceiling_auto',
-      parentId: LEVEL_ID,
-      polygon: slab.polygon,
-      autoFromWalls: true,
-    })
-    seedLevel(walls, [slab, ceiling])
-    const stopDetection = initSpaceDetectionSync(useScene, useEditor)
-
-    try {
-      expect(createWallOnCurrentLevel([4, 0], [4, 6])).not.toBeNull()
-
-      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(ceilings).toHaveLength(2)
-      expect(
-        slabs.every(
-          (node) => node.autoFromWalls && node.elevation === 0.18 && node.thickness === 0.32,
-        ),
-      ).toBe(true)
-      expect(ceilings.every((node) => node.autoFromWalls)).toBe(true)
-    } finally {
-      stopDetection()
-    }
-  })
+  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'),
+        makeWall([8, 6], [0, 6], 'wall_top'),
+        makeWall([0, 6], [0, 0], 'wall_left'),
+      ]
+      const slab = SlabNode.parse({
+        id: 'slab_auto',
+        parentId: LEVEL_ID,
+        polygon: [
+          [0, 0],
+          [8, 0],
+          [8, 6],
+          [0, 6],
+        ],
+        elevation,
+        floorHeight: elevation,
+        thickness: 0.32,
+        autoFromWalls: true,
+      })
+      const ceiling = CeilingNode.parse({
+        id: 'ceiling_auto',
+        parentId: LEVEL_ID,
+        polygon: slab.polygon,
+        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 {
+        expect(createWallOnCurrentLevel([4, 0], [4, 6])).not.toBeNull()
+
+        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(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 === elevation && node.thickness === 0.32,
+          ),
+        ).toBe(true)
+        expect(ceilings.every((node) => node.autoFromWalls)).toBe(true)
+      } finally {
+        stopDetection()
+      }
+    },
+  )
 
   test('close crossings reject the whole insertion without mutating the scene', () => {
     seedLevel([

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

@@ -7,6 +7,7 @@ import {
 } from './../../../components/ui/primitives/tooltip'
 import { triggerSFX } from './../../../lib/sfx-bus'
 import { cn } from './../../../lib/utils'
+import { useActionMenuPopupSide } from './placement'
 
 interface ActionButtonProps extends React.ComponentProps<typeof Button> {
   label: string
@@ -14,6 +15,8 @@ interface ActionButtonProps extends React.ComponentProps<typeof Button> {
   isActive?: boolean
   tooltipContent?: React.ReactNode
   tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
+  /** The tooltip portals to `<body>`, so a button in a themed scope passes the scope here. */
+  tooltipClassName?: string
 }
 
 export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
@@ -26,16 +29,21 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
       isActive,
       tooltipContent,
       tooltipSide,
+      tooltipClassName,
       onClick,
       onMouseEnter,
       ...props
     },
     ref,
   ) => {
+    const popupSide = useActionMenuPopupSide()
     return (
       <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')
@@ -65,7 +73,7 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
             )}
           </Button>
         </TooltipTrigger>
-        <TooltipContent side={tooltipSide}>
+        <TooltipContent className={tooltipClassName} side={tooltipSide ?? popupSide}>
           {tooltipContent || (
             <p>
               {label} {shortcut && `(${shortcut})`}

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

@@ -3,12 +3,14 @@
 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'
+import { FollowPascalToggle } from './follow-pascal-toggle'
 
 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')
@@ -28,7 +30,7 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
         <>
           {/* Orbit CCW */}
           <ActionButton
-            className="group hover:bg-white/5"
+            className="group hover:bg-black/4"
             label="Orbit Left"
             onClick={orbitCCW}
             size="icon"
@@ -45,7 +47,7 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
 
           {/* Orbit CW */}
           <ActionButton
-            className="group hover:bg-white/5"
+            className="group hover:bg-black/4"
             label="Orbit Right"
             onClick={orbitCW}
             size="icon"
@@ -62,10 +64,13 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
         </>
       )}
 
+      {/* Follow Pascal */}
+      {!is2dOnly && <FollowPascalToggle />}
+
       {/* Top View */}
       {!is2dOnly && (
         <ActionButton
-          className="group hover:bg-white/5"
+          className="group hover:bg-black/4"
           label="Top View"
           onClick={goToTopView}
           size="icon"

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

@@ -8,8 +8,9 @@ import { cn } from './../../../lib/utils'
 import useEditor from './../../../store/use-editor'
 import { ActionButton } from './action-button'
 import { MeasurementControl } from './measurement-control'
+import { PointAskButton } from './point-ask-button'
 
-type ControlId = 'select' | 'box-select' | 'zone' | 'delete'
+type ControlId = 'select' | 'box-select' | 'delete'
 
 type ControlConfig = {
   id: ControlId
@@ -29,72 +30,38 @@ const controls: ControlConfig[] = [
     imageSrc: '/icons/select.webp',
     label: 'Select',
     shortcut: 'V',
-    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',
+    color: 'hover:bg-blue-500/20 hover:text-blue-600 dark:hover:text-blue-400',
+    activeColor: 'bg-blue-500/20 text-blue-600 dark:text-blue-400 dark:hover:text-accent-foreground',
   },
   {
     id: 'delete',
     icon: Trash2,
     label: 'Delete',
     shortcut: 'X',
-    color: 'hover:bg-red-500/20 hover:text-red-400',
-    activeColor: 'bg-red-500/20 text-red-400',
+    color: 'hover:bg-red-500/20 hover:text-red-600 dark:hover:text-red-400',
+    activeColor: 'bg-red-500/20 text-red-600 dark:text-red-400 dark:hover:text-accent-foreground',
   },
 ]
 
 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 })
     }
@@ -109,18 +76,24 @@ export function ControlModes() {
 
         return (
           <Fragment key={c.id}>
-            {c.id === 'delete' ? <MeasurementControl /> : null}
+            {c.id === 'delete' ? (
+              <>
+                <PointAskButton />
+                <MeasurementControl />
+              </>
+            ) : null}
             <ActionButton
               className={cn(
                 'group text-muted-foreground',
                 !(isImageMode || isActive) && c.color,
                 !isImageMode && isActive && c.activeColor,
-                isImageMode && isActive && 'bg-white/10 hover:bg-white/10',
-                isImageMode && !isActive && 'hover:bg-white/5',
+                isImageMode && isActive && 'bg-black/6 hover:bg-black/6 dark:bg-white/10',
+                isImageMode && !isActive && 'hover:bg-black/4',
               )}
               // 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/follow-pascal-pill.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { AnimatePresence, motion } from 'motion/react'
+import { useReducedMotion } from '../../../hooks/use-reduced-motion'
+import useFollowPascal from '../../../store/use-follow-pascal'
+
+/**
+ * Offered while a build plays and the person has the camera: one press and the camera goes back to
+ * following. It comes up from where the toolbar is (origin-aware) and goes the same way.
+ */
+export function FollowPascalPill() {
+  const shows = useFollowPascal((state) => state.on && state.paused && state.building)
+  const resume = useFollowPascal((state) => state.resume)
+  const reduced = useReducedMotion()
+  return (
+    <AnimatePresence>
+      {shows ? (
+        <motion.button
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          className="-translate-x-1/2 fixed bottom-24 left-1/2 z-50 rounded-full border border-violet-400/40 bg-background/90 px-4 py-2 font-medium text-sm text-violet-700 shadow-xl dark:text-violet-200 backdrop-blur-md active:scale-[0.97]"
+          exit={{ opacity: 0, y: reduced ? 0 : 8, scale: reduced ? 1 : 0.96 }}
+          initial={{ opacity: 0, y: reduced ? 0 : 8, scale: reduced ? 1 : 0.96 }}
+          onClick={resume}
+          transition={reduced ? { duration: 0.12 } : { type: 'spring', bounce: 0, duration: 0.3 }}
+          type="button"
+        >
+          Resume following
+        </motion.button>
+      ) : null}
+    </AnimatePresence>
+  )
+}

package/src/components/ui/action-menu/follow-pascal-toggle.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { Video } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import useFollowPascal from '../../../store/use-follow-pascal'
+import { ActionButton } from './action-button'
+
+/** The toolbar's switch for Follow Pascal: the camera follows what the agent builds. */
+export function FollowPascalToggle({
+  className,
+  tooltipClassName,
+}: {
+  className?: string
+  tooltipClassName?: string
+}) {
+  const on = useFollowPascal((state) => state.on)
+  const setOn = useFollowPascal((state) => state.setOn)
+  return (
+    <ActionButton
+      aria-pressed={on}
+      className={cn(
+        on
+          ? 'bg-violet-500/20 text-violet-600 dark:text-violet-300 dark:hover:text-accent-foreground'
+          : 'hover:bg-black/4 hover:text-violet-600 dark:hover:text-violet-300',
+        className,
+      )}
+      label={`Follow Pascal: ${on ? 'On' : 'Off'}`}
+      onClick={() => setOn(!on)}
+      size="icon"
+      tooltipClassName={tooltipClassName}
+      variant="ghost"
+    >
+      <Video className="h-6 w-6" />
+    </ActionButton>
+  )
+}