@pascal-app/editor 1.0.3 → 1.0.4

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

@@ -9,13 +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,
@@ -29,10 +32,14 @@ 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,
@@ -100,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(
@@ -157,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)
@@ -213,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
 
@@ -230,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 &&
@@ -274,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] })
   }
@@ -298,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} />
       )}
@@ -454,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')

package/src/components/ui/build-panel/build-panel.tsx

@@ -0,0 +1,235 @@
+'use client'
+
+import { ChevronRight } from 'lucide-react'
+import { type ComponentPropsWithoutRef, type ReactNode, useEffect, useState } from 'react'
+import { cn } from '../../../lib/utils'
+import {
+  WALL_DRAW_IDLE_CAPTION,
+  WALL_DRAW_VARIANTS,
+  type WallDrawVariant,
+} from '../../../lib/wall-draw-variant'
+
+/**
+ * The Build panel's grouped layout (Rooms / Add to rooms / Outdoor / Advanced),
+ * shared by the community and standalone editor Build tabs so both read the
+ * same. Hosts own what each tile arms; these only lay the groups out.
+ */
+export function BuildPanelSection({
+  children,
+  hint,
+  id,
+  title,
+}: {
+  children: ReactNode
+  hint?: string
+  id: string
+  title: string
+}) {
+  return (
+    <section className="flex flex-col" data-build-group={id}>
+      <div className="mb-2 flex items-baseline justify-between gap-2 px-0.5">
+        <h3 className="font-medium text-foreground text-xs">{title}</h3>
+        {hint ? <span className="truncate text-[11px] text-muted-foreground">{hint}</span> : null}
+      </div>
+      {children}
+    </section>
+  )
+}
+
+const ADVANCED_OPEN_KEY = 'pascal-build-advanced-open'
+
+function readAdvancedOpen(): boolean {
+  try {
+    return window.localStorage.getItem(ADVANCED_OPEN_KEY) === '1'
+  } catch {
+    return false
+  }
+}
+
+function writeAdvancedOpen(open: boolean) {
+  try {
+    window.localStorage.setItem(ADVANCED_OPEN_KEY, open ? '1' : '0')
+  } catch {
+    // Storage blocked (private window, preview): the section just starts closed.
+  }
+}
+
+/**
+ * The collapsible Advanced group. Remembers its open state per viewer, and
+ * opens itself when one of its tools becomes the armed one (e.g. by shortcut)
+ * so the lit tile is never hidden.
+ */
+export function BuildPanelAdvancedSection({
+  children,
+  containsActiveTool,
+  description,
+  hint,
+}: {
+  children: ReactNode
+  containsActiveTool: boolean
+  description?: string
+  hint?: string
+}) {
+  const [open, setOpen] = useState(false)
+  useEffect(() => setOpen(readAdvancedOpen()), [])
+  useEffect(() => {
+    if (containsActiveTool) setOpen(true)
+  }, [containsActiveTool])
+
+  return (
+    <section className="flex flex-col" data-build-group="advanced">
+      <button
+        aria-expanded={open}
+        className="-mx-1.5 flex items-center gap-2 rounded-lg px-1.5 py-1.5 text-left transition-colors hover:bg-muted/60"
+        onClick={() => {
+          const next = !open
+          setOpen(next)
+          writeAdvancedOpen(next)
+        }}
+        type="button"
+      >
+        <ChevronRight
+          className={cn(
+            'size-3 shrink-0 text-muted-foreground transition-transform duration-150',
+            open && 'rotate-90',
+          )}
+        />
+        <h3 className="font-medium text-foreground text-xs">Advanced</h3>
+        {hint ? (
+          <span className="ml-auto truncate text-[11px] text-muted-foreground">{hint}</span>
+        ) : null}
+      </button>
+      {open ? (
+        <div className="flex flex-col gap-2.5 pt-1.5">
+          {description ? (
+            <p className="px-0.5 text-[11px] text-muted-foreground leading-relaxed">
+              {description}
+            </p>
+          ) : null}
+          {children}
+        </div>
+      ) : null}
+    </section>
+  )
+}
+
+export function BuildToolGrid({ children, columns }: { children: ReactNode; columns: 3 | 4 }) {
+  return (
+    <div className={cn('grid gap-1.5', columns === 3 ? 'grid-cols-3' : 'grid-cols-4')}>
+      {children}
+    </div>
+  )
+}
+
+type BuildToolTileProps = Omit<ComponentPropsWithoutRef<'button'>, 'children' | 'type'> & {
+  active: boolean
+  /** Corner mark, e.g. the snap-target badge of wall-hosted tools. */
+  badge?: ReactNode
+  iconSrc: string
+  label: string
+  size?: 'lg' | 'sm'
+}
+
+/**
+ * One tool tile: the isometric icon over its name. Inactive icons stay grey and
+ * take their colour on hover; the armed tool keeps it, on the primary tint.
+ */
+export function BuildToolTile({
+  active,
+  badge,
+  className,
+  iconSrc,
+  label,
+  size = 'sm',
+  ...buttonProps
+}: BuildToolTileProps) {
+  return (
+    <button
+      aria-pressed={active}
+      className={cn(
+        'group relative flex min-w-0 flex-col items-center justify-end rounded-xl transition-all duration-200',
+        // Small tiles grow to two label lines ("Spawn point"); a grid row's
+        // tiles stretch together, so a row keeps one height.
+        size === 'lg' ? 'h-[104px] gap-1.5 px-1.5 pt-2 pb-2.5' : 'min-h-[74px] gap-1 px-1 pt-1.5 pb-2',
+        active ? 'bg-primary/10 ring-1 ring-primary/50' : 'bg-muted/40 hover:bg-muted',
+        className,
+      )}
+      type="button"
+      {...buttonProps}
+    >
+      <img
+        alt=""
+        className={cn(
+          'min-h-0 object-contain transition duration-200 group-hover:scale-110',
+          size === 'lg' ? 'size-14' : 'size-9',
+          !active && 'opacity-70 grayscale group-hover:opacity-100 group-hover:grayscale-0',
+        )}
+        draggable={false}
+        src={iconSrc}
+      />
+      <span
+        className={cn(
+          'line-clamp-2 max-w-full text-center font-medium leading-tight',
+          size === 'lg' ? 'text-xs' : 'text-[11px]',
+          active ? 'text-foreground' : 'text-muted-foreground group-hover:text-foreground',
+        )}
+      >
+        {label}
+      </span>
+      {badge ? <span className="absolute top-1 right-1">{badge}</span> : null}
+    </button>
+  )
+}
+
+/** The line under the Rooms tiles: what the armed shape does, lead in bold. */
+export function BuildPanelCaption({ lead, rest }: { lead?: string; rest: string }) {
+  return (
+    <p className="mt-2 min-h-[2lh] px-0.5 text-[11px] text-muted-foreground leading-relaxed">
+      {lead ? <span className="font-medium text-foreground">{lead} </span> : null}
+      {rest}
+    </p>
+  )
+}
+
+/**
+ * The Rooms group: one large tile per wall drawing variant, and the armed
+ * variant's caption. `activeVariant` is null while the wall tool is not armed.
+ */
+export function BuildPanelRoomsSection({
+  activeVariant,
+  onHover,
+  onSelect,
+  tileProps,
+}: {
+  activeVariant: WallDrawVariant | null
+  onHover?: (variant: WallDrawVariant) => void
+  onSelect: (variant: WallDrawVariant) => void
+  /** Extra attributes per tile (e.g. a host's guide-target hook). */
+  tileProps?: (variant: WallDrawVariant) => Record<string, string | undefined>
+}) {
+  const active = WALL_DRAW_VARIANTS.find((variant) => variant.id === activeVariant)
+  return (
+    <BuildPanelSection hint="walls · floor · ceiling" id="rooms" title="Rooms">
+      <BuildToolGrid columns={3}>
+        {WALL_DRAW_VARIANTS.map((variant) => (
+          <BuildToolTile
+            active={variant.id === activeVariant}
+            data-build-tool={`room-${variant.id}`}
+            iconSrc={variant.iconSrc}
+            key={variant.id}
+            label={variant.label}
+            onClick={() => onSelect(variant.id)}
+            onMouseEnter={() => onHover?.(variant.id)}
+            size="lg"
+            title={variant.title}
+            {...tileProps?.(variant.id)}
+          />
+        ))}
+      </BuildToolGrid>
+      <BuildPanelCaption
+        lead={active?.caption.lead}
+        rest={active ? active.caption.rest : WALL_DRAW_IDLE_CAPTION}
+      />
+    </BuildPanelSection>
+  )
+}