@pascal-app/editor 1.0.0 → 1.0.1

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

package/src/components/editor-2d/floorplan-registry-action-menu.tsx

@@ -27,6 +27,7 @@ import {
   prepareFreshPlacementRootDuplicate,
 } from '../../lib/fresh-planar-placement'
 import { curveReshapeScope } from '../../lib/interaction/scope'
+import { duplicateWithoutMove, registryMoveDisabled } from '../../lib/node-action-movement'
 import { playBlockedQuickActionFeedback } from '../../lib/quick-action-feedback'
 import { collectQuickActionNodeScope } from '../../lib/quick-action-nodes'
 import { sfxEmitter } from '../../lib/sfx-bus'
@@ -250,7 +251,8 @@ export function FloorplanRegistryActionMenu() {
   // walls land on their bespoke `MoveWallTool` (perpendicular slide
   // with linked-wall cascade) via `affordanceTools.move`.
   const canMove =
-    !!def.capabilities.movable || !!def.floorplanMoveTarget || !!def.affordanceTools?.move
+    !registryMoveDisabled(node) &&
+    (!!def.capabilities.movable || !!def.floorplanMoveTarget || !!def.affordanceTools?.move)
   const canDuplicate = def.capabilities.duplicable !== false
   const canDelete = def.capabilities.deletable !== false
   const canAddHole = node.type === 'slab' || node.type === 'ceiling'
@@ -320,6 +322,15 @@ export function FloorplanRegistryActionMenu() {
   const handleDuplicate = () => {
     if (!node.parentId) return
     sfxEmitter.emit('sfx:item-pick')
+    if (registryMoveDisabled(node)) {
+      try {
+        const id = duplicateWithoutMove(node)
+        if (id) useViewer.getState().setSelection({ selectedIds: [id] })
+      } catch (error) {
+        console.error('Failed to duplicate node', error)
+      }
+      return
+    }
     useScene.temporal.getState().pause()
     let draftId: AnyNodeId | null = null
     try {

package/src/components/editor-2d/renderers/floorplan-registry-layer.tsx

@@ -40,6 +40,7 @@ import {
   useRef,
   useState,
 } from 'react'
+import { useShallow } from 'zustand/react/shallow'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { ROTATE_HANDLE_DRAG_LABEL } from '../../../lib/contextual-help'
 import {
@@ -87,6 +88,7 @@ import {
 import { emitCanvasNodeSelection } from '../../../lib/selection-routing'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { clearSurfacePlanSnapFeedback } from '../../../lib/surface-plan-snap'
+import { paintZoneMembership } from '../../../lib/units'
 import useDirectManipulationFeedback from '../../../store/use-direct-manipulation-feedback'
 import useDrawingView from '../../../store/use-drawing-view'
 import useEditor, { isAngleSnapActive } from '../../../store/use-editor'
@@ -343,6 +345,13 @@ type FloorplanEntryDescriptor = {
   visibilityRootId?: AnyNodeId
 }
 
+/** The focused unit and its members; one stable object per focus change so
+ * cached zone geometry invalidates exactly when the focus does. */
+export type FloorplanUnitFocus = {
+  focusedUnitId: string
+  focusedUnitMemberIds: readonly string[]
+}
+
 type NodeDeps = {
   automaticDimensions: boolean
   node: AnyNode
@@ -356,6 +365,7 @@ type NodeDeps = {
   moving: boolean
   liveOverride: LiveNodeOverrides | undefined
   palette: FloorplanPalette | undefined
+  unitFocus: FloorplanUnitFocus | undefined
   siblingEpoch: number
   committedNodes: Record<string, AnyNode> | null
   dependencyNodes: AnyNode[]
@@ -476,6 +486,7 @@ function snapshotsToUpdates(snapshots: NodeSnapshot[]) {
 // Stable empty sentinel used by per-entry builders while the floor plan is
 // hidden; committed scene edits still flow through `useScene`.
 const EMPTY_LIVE_OVERRIDES: Map<string, LiveNodeOverrides> = new Map()
+const NO_MEMBER_IDS: readonly string[] = []
 
 export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
   const selectedLevelId = useViewer((s) => s.selection.levelId)
@@ -484,6 +495,17 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
   const metricNotation = useViewer((s) => s.metricNotation)
   const setSelection = useViewer((s) => s.setSelection)
   const nodes = useScene((s) => s.nodes)
+  const focusedUnitId = useViewer((s) => s.focusedUnitId)
+  const focusedUnitMemberIds = useScene(
+    useShallow((s) => {
+      const focusedUnit = focusedUnitId ? s.nodes[focusedUnitId] : undefined
+      return focusedUnit?.type === 'unit' ? focusedUnit.members : NO_MEMBER_IDS
+    }),
+  )
+  const unitFocus = useMemo<FloorplanUnitFocus | undefined>(
+    () => (focusedUnitId ? { focusedUnitId, focusedUnitMemberIds } : undefined),
+    [focusedUnitId, focusedUnitMemberIds],
+  )
   const installedPlugins = useScene((s) => s.installedPlugins)
   const movingNode = useMovingNode()
   // When a building is being moved, its explicit selection may be
@@ -650,6 +672,13 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
 
   const applyEntrySelection = useCallback(
     (id: AnyNodeId, options: { shouldToggle: boolean; isolateMember: boolean }) => {
+      const focusedUnitId = useViewer.getState().focusedUnitId
+      const clickedNode = useScene.getState().nodes[id]
+      if (focusedUnitId && clickedNode?.type === 'zone') {
+        paintZoneMembership(focusedUnitId, clickedNode.id)
+        swallowNextClick(200)
+        return
+      }
       const currentSelectedIds = useViewer.getState().selection.selectedIds
       let nextSelectedIds: string[]
       if (options.shouldToggle) {
@@ -1529,6 +1558,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
             onHandleDoubleClick={commitAffordanceAction}
             onHandlePointerDown={startAffordanceDrag}
             palette={palette}
+            unitFocus={unitFocus}
             pass="base"
             sceneRotationDeg={sceneRotationDeg}
             setMovingNode={setMovingNode}
@@ -1577,6 +1607,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
             onHandleDoubleClick={commitAffordanceAction}
             onHandlePointerDown={startAffordanceDrag}
             palette={palette}
+            unitFocus={unitFocus}
             pass="overlay"
             sceneRotationDeg={sceneRotationDeg}
             setMovingNode={setMovingNode}
@@ -1908,6 +1939,7 @@ type FloorplanRegistryEntryProps = {
     rotationPivot?: FloorplanPoint,
   ) => void
   palette: FloorplanPalette | undefined
+  unitFocus: FloorplanUnitFocus | undefined
   pass: FloorplanRenderPass
   sceneRotationDeg: number
   setMovingNode: ReturnType<typeof useEditor.getState>['setMovingNode']
@@ -1943,6 +1975,7 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
   onHandleDoubleClick,
   onHandlePointerDown,
   palette,
+  unitFocus,
   pass,
   sceneRotationDeg,
   setMovingNode,
@@ -1967,7 +2000,7 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
   const hovered = useViewer((state) => state.hoveredId === selectionProxyId)
   const setHoveredId = useViewer((state) => state.setHoveredId)
   const referencedAnnotationRole = useViewer((state) =>
-    floorplanEntryReferencedAnnotationRole(node, new Set(state.selection.selectedIds)),
+    floorplanEntryReferencedAnnotationRole(node, nodes, new Set(state.selection.selectedIds)),
   )
   const activeRotateNodeId = useDirectManipulationFeedback((state) =>
     state.activeRotateNodeId === nodeId ? nodeId : null,
@@ -2084,6 +2117,7 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
     nodeId,
     nodes,
     palette,
+    unitFocus,
     selected,
     siblingEpoch,
     unit,
@@ -2153,6 +2187,7 @@ type BuildFloorplanEntryGeometryArgs = {
   nodeId: AnyNodeId
   nodes: Record<string, AnyNode>
   palette: FloorplanPalette | undefined
+  unitFocus?: FloorplanUnitFocus
   selected: boolean
   siblingEpoch: number
   unit: 'metric' | 'imperial'
@@ -2167,7 +2202,7 @@ export function collectFloorplanDependencyNodes(
   nodes: Record<string, AnyNode>,
   liveOverrides?: Map<string, LiveNodeOverrides>,
 ): AnyNode[] {
-  return (def.floorplanDependencies?.(node) ?? []).flatMap((id) => {
+  return (def.floorplanDependencies?.(node, nodes) ?? []).flatMap((id) => {
     const dependency = nodes[id]
     if (!dependency) return []
     const dependencyOverride = liveOverrides?.get(dependency.id)
@@ -2184,13 +2219,14 @@ export function collectFloorplanDependencyNodes(
 
 function floorplanEntryReferencedAnnotationRole(
   node: AnyNode,
+  nodes: Record<string, AnyNode>,
   selectedIds: ReadonlySet<string>,
 ): FloorplanAnnotationRole | undefined {
   if (selectedIds.size === 0) return undefined
   const definition = nodeRegistry.get(node.type)
   const role = getFloorplanNodeExtension(definition)?.referencedSelectionAnnotationRole
   if (!role) return undefined
-  const dependencyIds = definition?.floorplanDependencies?.(node) ?? []
+  const dependencyIds = definition?.floorplanDependencies?.(node, nodes) ?? []
   return dependencyIds.some((id) => selectedIds.has(id)) ? role : undefined
 }
 
@@ -2211,6 +2247,7 @@ export function buildFloorplanEntryGeometry({
   nodeId,
   nodes,
   palette,
+  unitFocus,
   selected,
   siblingEpoch,
   unit,
@@ -2250,6 +2287,7 @@ export function buildFloorplanEntryGeometry({
     moving,
     liveOverride,
     palette,
+    unitFocus,
     siblingEpoch: dependsOnSiblingInputs ? siblingEpoch : 0,
     // Sibling-dependent kinds (wall miters, opening cuts) read other nodes'
     // committed state via `ctx`, so committed sibling edits still invalidate.
@@ -2332,6 +2370,8 @@ export function buildFloorplanEntryGeometry({
     highlighted,
     hovered,
     moving,
+    focusedUnitId: unitFocus?.focusedUnitId,
+    focusedUnitMemberIds: unitFocus?.focusedUnitMemberIds,
     palette,
   }
   const resolveContextNode = <N = AnyNode>(rid: AnyNodeId): N | undefined => {
@@ -2360,6 +2400,8 @@ export function buildFloorplanEntryGeometry({
               highlighted,
               hovered,
               moving,
+              focusedUnitId: unitFocus?.focusedUnitId,
+              focusedUnitMemberIds: unitFocus?.focusedUnitMemberIds,
               palette,
             }
           : undefined,
@@ -3573,6 +3615,7 @@ function nodeDepsEqual(a: NodeDeps, b: NodeDeps): boolean {
     'moving',
     'liveOverride',
     'palette',
+    'unitFocus',
     'siblingEpoch',
     'ctxOverrides',
     'committedNodes',

package/src/components/procedural-items/inspector.tsx

@@ -0,0 +1,223 @@
+'use client'
+import { type AnyNodeId, useLiveNodeOverrides, useScene } from '@pascal-app/core'
+import {
+  ProceduralItemNode,
+  snapParameters,
+  validateProceduralRelations,
+} from '@pascal-app/core/procedural-items'
+import { useViewer } from '@pascal-app/viewer'
+import { useEffect, useState } from 'react'
+import { useHandleGroup } from '../../store/use-handle-group'
+import { PanelSection } from '../ui/controls/panel-section'
+import { SliderControl } from '../ui/controls/slider-control'
+import { PanelWrapper } from '../ui/panels/panel-wrapper'
+export function ProceduralInspector({
+  nodeId,
+  partId,
+  onPartChange,
+}: {
+  nodeId: string
+  partId: string | null
+  onPartChange: (id: string | null) => void
+}) {
+  const committed = useScene((s) => s.nodes[nodeId as AnyNodeId]) as unknown as
+    | ProceduralItemNode
+    | undefined
+  const override = useLiveNodeOverrides((s) => s.overrides.get(nodeId))
+  const node = committed ? ({ ...committed, ...override } as ProceduralItemNode) : null
+  useEffect(() => {
+    useHandleGroup.setState({ active: partId ? { nodeId, group: partId } : null })
+    return () => {
+      if (useHandleGroup.getState().active?.nodeId === nodeId)
+        useHandleGroup.setState({ active: null })
+    }
+  }, [nodeId, partId])
+  const [error, setError] = useState('')
+  useEffect(() => () => useLiveNodeOverrides.getState().clear(nodeId as AnyNodeId), [nodeId])
+  if (!node || !committed) return null
+  const change = (id: string, value: number, commit: boolean) => {
+    const values = { ...node.parameters, [id]: value }
+    const parameters = commit ? snapParameters(node.recipe, values) : values
+    const parsed = ProceduralItemNode.safeParse({ ...node, parameters })
+    if (!parsed.success) {
+      setError(parsed.error.issues[0]?.message ?? 'Invalid edit')
+      if (commit) useLiveNodeOverrides.getState().clear(nodeId as AnyNodeId)
+      return
+    }
+    try {
+      validateProceduralRelations({ ...node, parameters }, useScene.getState().nodes)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Invalid attachment')
+      if (commit) useLiveNodeOverrides.getState().clear(nodeId as AnyNodeId)
+      return
+    }
+    setError('')
+    if (commit) {
+      useLiveNodeOverrides.getState().clear(nodeId as AnyNodeId)
+      useScene.getState().updateNode(nodeId as AnyNodeId, { parameters } as never)
+    } else useLiveNodeOverrides.getState().set(nodeId as AnyNodeId, { parameters } as never)
+  }
+  const fields = node.recipe.parameters.filter((p) => (partId ? p.part === partId : !p.part))
+  return (
+    <div className="space-y-5">
+      <div className="flex items-center justify-between">
+        <h2 className="font-semibold text-lg">
+          {partId ? node.recipe.parts.find((p) => p.id === partId)?.label : 'Adjust design'}
+        </h2>
+        {partId && (
+          <button
+            className="rounded-full border px-3 py-1 text-xs"
+            onClick={() => onPartChange(null)}
+            type="button"
+          >
+            Back
+          </button>
+        )}
+      </div>
+      <div className="space-y-3">
+        {fields.map((p) => (
+          <SliderControl
+            key={p.id}
+            label={p.label}
+            value={node.parameters[p.id] ?? p.default}
+            min={p.min}
+            max={p.max}
+            step={p.step}
+            precision={3}
+            unit={p.unit === 'm' ? 'm' : ''}
+            onChange={(v) => change(p.id, v, false)}
+            onCommit={(v) => change(p.id, v, true)}
+            restoreOnCommit={false}
+          />
+        ))}
+      </div>
+      {partId && (
+        <button
+          type="button"
+          className="rounded-full border px-3 py-1 text-xs"
+          onClick={() => {
+            const parameters = { ...committed.parameters }
+            for (const p of fields) delete parameters[p.id]
+            try {
+              ProceduralItemNode.parse({ ...committed, parameters })
+              useScene.getState().updateNode(nodeId as AnyNodeId, { parameters } as never)
+              setError('')
+            } catch (e) {
+              setError(e instanceof Error ? e.message : 'Invalid reset')
+            }
+          }}
+        >
+          Reset this part
+        </button>
+      )}
+      {error && (
+        <p role="alert" className="text-red-600 text-sm">
+          {error}
+        </p>
+      )}
+      {!partId && node.recipe.parameters.some((p) => p.part) && (
+        <div>
+          <h3 className="mb-2 font-medium text-sm">Edit parts</h3>
+          <div className="flex flex-wrap gap-2">
+            {node.recipe.parts
+              .filter((part) => node.recipe.parameters.some((p) => p.part === part.id))
+              .map((p) => (
+                <button
+                  key={p.id}
+                  type="button"
+                  className="rounded-full border px-3 py-1.5 text-sm text-foreground hover:bg-muted hover:text-foreground"
+                  onClick={() => onPartChange(p.id)}
+                >
+                  {p.label}
+                </button>
+              ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function ProceduralItemPanel({ node }: { node: ProceduralItemNode }) {
+  return <ProceduralPanel key={node.id} node={node} />
+}
+
+function ProceduralPanel({ node }: { node: ProceduralItemNode }) {
+  const [partId, setPartId] = useState<string | null>(null)
+  return (
+    <PanelWrapper
+      title={node.name ?? node.recipe.name}
+      onClose={() => useViewer.getState().setSelection({ selectedIds: [] })}
+    >
+      <div className="space-y-5 p-3">
+        <ProceduralInspector
+          key={node.id}
+          nodeId={node.id}
+          partId={partId}
+          onPartChange={setPartId}
+        />
+        <ProceduralPlacementControls node={node} />
+      </div>
+    </PanelWrapper>
+  )
+}
+
+function ProceduralPlacementControls({ node }: { node: ProceduralItemNode }) {
+  const [error, setError] = useState('')
+  const update = (patch: Partial<ProceduralItemNode>) => {
+    try {
+      useScene.getState().updateNode(node.id as AnyNodeId, patch as never)
+      setError('')
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Invalid placement')
+    }
+  }
+  const changePosition = (index: number, value: number, commit: boolean) => {
+    const live = useLiveNodeOverrides.getState().overrides.get(node.id)
+    const position = [
+      ...((live?.position as typeof node.position | undefined) ?? node.position),
+    ] as typeof node.position
+    position[index] = Number(value.toFixed(3))
+    const patch = { position }
+    try {
+      validateProceduralRelations({ ...node, ...patch }, useScene.getState().nodes)
+      if (commit) {
+        useLiveNodeOverrides.getState().clear(node.id as AnyNodeId)
+        update(patch)
+      } else useLiveNodeOverrides.getState().set(node.id as AnyNodeId, patch)
+      setError('')
+    } catch (e) {
+      if (commit) useLiveNodeOverrides.getState().clear(node.id as AnyNodeId)
+      setError(e instanceof Error ? e.message : 'Invalid position')
+    }
+  }
+  return (
+    <PanelSection title="Position">
+      {(['X', 'Y', 'Z'] as const).map((axis, index) => (
+        <SliderControl
+          key={axis}
+          label={
+            <>
+              {axis}
+              <sub className="ml-[1px] text-[11px] opacity-70">pos</sub>
+            </>
+          }
+          value={node.position[index]!}
+          min={node.position[index]! - 2}
+          max={node.position[index]! + 2}
+          precision={2}
+          step={0.01}
+          unit="m"
+          onChange={(value) => changePosition(index, value, false)}
+          onCommit={(value) => changePosition(index, value, true)}
+          restoreOnCommit={false}
+        />
+      ))}
+      {error && (
+        <p role="alert" className="text-destructive text-xs">
+          {error}
+        </p>
+      )}
+    </PanelSection>
+  )
+}

package/src/components/systems/ceiling/ceiling-system.tsx

@@ -1,4 +1,5 @@
 import { type AnyNodeId, sceneRegistry, useScene } from '@pascal-app/core'
+import { isProceduralItem } from '@pascal-app/core/procedural-items'
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect } from 'react'
 import { Color, type Material, type Mesh } from 'three'
@@ -98,7 +99,8 @@ export const CeilingSystem = () => {
     const isCeilingToolActive =
       tool === 'ceiling' ||
       selectedItem?.attachTo === 'ceiling' ||
-      (movingNode?.type === 'item' && movingNode?.asset?.attachTo === 'ceiling')
+      (movingNode?.type === 'item' && movingNode?.asset?.attachTo === 'ceiling') ||
+      (isProceduralItem(movingNode) && movingNode.recipe.mounting?.attachTo === 'ceiling')
 
     if (isCeilingToolActive && activeLevelId) {
       levelsToShowCeilings.add(activeLevelId)