@pascal-app/editor 1.0.0 → 1.0.3

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

@@ -12,6 +12,7 @@ import {
   type FloorplanPoint,
   type FloorplanScope,
   type GeometryContext,
+  hidesDescendants,
   isNodeKindEnabled,
   isRegistryMovable,
   kindsWithFloorplanScope,
@@ -40,6 +41,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,9 +89,10 @@ 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'
+import useEditor, { isAngleSnapActive, type Mode } from '../../../store/use-editor'
 import useFloorplanAnnotationVisibility from '../../../store/use-floorplan-annotation-visibility'
 import useFloorplanMode from '../../../store/use-floorplan-mode'
 import useInteractionScope, {
@@ -343,6 +346,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 +366,7 @@ type NodeDeps = {
   moving: boolean
   liveOverride: LiveNodeOverrides | undefined
   palette: FloorplanPalette | undefined
+  unitFocus: FloorplanUnitFocus | undefined
   siblingEpoch: number
   committedNodes: Record<string, AnyNode> | null
   dependencyNodes: AnyNode[]
@@ -446,15 +457,32 @@ export function isFloorplanOpeningPlacementState({
   )
 }
 
-function isFloorplanOpeningPlacementActiveNow(): boolean {
+/**
+ * Whether a press on an entry belongs to the active tool instead of selecting
+ * the entry. Build tools own the plan the way their 3D tools own the canvas,
+ * where selection only runs in select mode: a wall drawn onto another wall
+ * must place its point (T-junction), not select the wall under the cursor.
+ */
+export function floorplanEntryYieldsToTool(state: {
+  mode: Mode
+  openingPlacement: boolean
+}): boolean {
+  return state.mode === 'build' || state.openingPlacement
+}
+
+function floorplanEntryYieldsToToolNow(): boolean {
   const { phase, mode, tool } = useEditor.getState()
   const movingNode = getMovingNode()
-  return isFloorplanOpeningPlacementState({
-    phase,
+  return floorplanEntryYieldsToTool({
     mode,
-    tool,
-    movingNodeHasWallOpeningPlacement:
-      movingNode != null && !!nodeRegistry.get(movingNode.type)?.capabilities?.wallOpeningPlacement,
+    openingPlacement: isFloorplanOpeningPlacementState({
+      phase,
+      mode,
+      tool,
+      movingNodeHasWallOpeningPlacement:
+        movingNode != null &&
+        !!nodeRegistry.get(movingNode.type)?.capabilities?.wallOpeningPlacement,
+    }),
   })
 }
 
@@ -476,6 +504,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 +513,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
@@ -536,13 +576,13 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
   const sceneRotationDeg = renderCtx?.getSceneRotationDeg() ?? 0
   const setMovingNode = useEditor((s) => s.setMovingNode)
   const setMovingNodeOrigin = useEditor((s) => s.setMovingNodeOrigin)
-  // Door / window placement (both build and move) needs the SVG's
-  // background click handler to run — it finds the closest wall via
-  // `findClosestWallPoint` and emits `wall:click` for the door / window
-  // tool. When the user clicks *on top of* a wall in this mode, the
+  // Build tools and door / window placement (both build and move) need the
+  // SVG's background handlers to run — wall drafting places its point there,
+  // and opening placement finds the closest wall via `findClosestWallPoint`
+  // and emits `wall:click`. When the user clicks *on top of* a wall, the
   // wall's registry entry would otherwise swallow the click via
-  // `handleClickStop` / `handleSelect`, so the placement never fires.
-  // Pass clicks through in that case.
+  // `handleClickStop` / `handleSelect`, so the tool never sees it. Pass
+  // clicks through in that case (`floorplanEntryYieldsToToolNow`).
   const editorMode = useEditor((s) => s.mode)
   const structureLayer = useEditor((s) => s.structureLayer)
   const floorplanSelectionTool = useEditor((s) => s.floorplanSelectionTool)
@@ -650,12 +690,33 @@ 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) {
-        nextSelectedIds = currentSelectedIds.includes(id)
-          ? currentSelectedIds.filter((selectedId) => selectedId !== id)
-          : [...currentSelectedIds, id]
+        if (currentSelectedIds.includes(id)) {
+          // A room's slab and ceiling overlap in the plan and only the slab
+          // takes the click, so removing one removes the other too (a marquee
+          // picks both). 3D keeps single toggles: each is clickable there.
+          const nodes = useScene.getState().nodes
+          const node = nodes[id as AnyNodeId]
+          const counterparts = node
+            ? (getFloorplanNodeExtension(nodeRegistry.get(node.type))?.selectionCounterparts?.({
+                node,
+                nodes,
+              }) ?? [])
+            : []
+          const removed = new Set<string>([id, ...counterparts])
+          nextSelectedIds = currentSelectedIds.filter((selectedId) => !removed.has(selectedId))
+        } else {
+          nextSelectedIds = [...currentSelectedIds, id]
+        }
       } else if (options.isolateMember) {
         nextSelectedIds = [id]
       } else {
@@ -693,7 +754,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
   )
 
   const handleClickStop = useCallback((event: React.MouseEvent<SVGGElement>) => {
-    if (isFloorplanOpeningPlacementActiveNow()) return
+    if (floorplanEntryYieldsToToolNow()) return
     event.stopPropagation()
   }, [])
 
@@ -704,7 +765,10 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       const node = useScene.getState().nodes[id]
       if (!node || !isRegistryMovable(node.type)) return false
       const currentSelectedIds = useViewer.getState().selection.selectedIds
-      const allowPlainDrag = nodeRegistry.get(node.type)?.capabilities?.movable?.directDrag === true
+      const definition = nodeRegistry.get(node.type)
+      const allowPlainDrag =
+        getFloorplanNodeExtension(definition)?.directDrag === true ||
+        definition?.capabilities?.movable?.directDrag === true
       const commandModifier = event.metaKey || event.ctrlKey
       if (
         !shouldStartDirectMoveDrag({
@@ -951,7 +1015,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       // the stores at event time. Commit clears the interaction scope before
       // React paints the next frame; a render-time `undefined` handler leaves
       // a short dead zone where the first post-placement selection is lost.
-      if (isFloorplanOpeningPlacementActiveNow()) return
+      if (floorplanEntryYieldsToToolNow()) return
       if (startDirectMoveDrag(id, event)) return
       if (startDirectRotateDrag(id, event)) return
       if (startGroupMoveDrag(id, event)) return
@@ -1529,6 +1593,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
             onHandleDoubleClick={commitAffordanceAction}
             onHandlePointerDown={startAffordanceDrag}
             palette={palette}
+            unitFocus={unitFocus}
             pass="base"
             sceneRotationDeg={sceneRotationDeg}
             setMovingNode={setMovingNode}
@@ -1577,6 +1642,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
             onHandleDoubleClick={commitAffordanceAction}
             onHandlePointerDown={startAffordanceDrag}
             palette={palette}
+            unitFocus={unitFocus}
             pass="overlay"
             sceneRotationDeg={sceneRotationDeg}
             setMovingNode={setMovingNode}
@@ -1908,6 +1974,7 @@ type FloorplanRegistryEntryProps = {
     rotationPivot?: FloorplanPoint,
   ) => void
   palette: FloorplanPalette | undefined
+  unitFocus: FloorplanUnitFocus | undefined
   pass: FloorplanRenderPass
   sceneRotationDeg: number
   setMovingNode: ReturnType<typeof useEditor.getState>['setMovingNode']
@@ -1943,6 +2010,7 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
   onHandleDoubleClick,
   onHandlePointerDown,
   palette,
+  unitFocus,
   pass,
   sceneRotationDeg,
   setMovingNode,
@@ -1967,7 +2035,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 +2152,7 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
     nodeId,
     nodes,
     palette,
+    unitFocus,
     selected,
     siblingEpoch,
     unit,
@@ -2153,6 +2222,7 @@ type BuildFloorplanEntryGeometryArgs = {
   nodeId: AnyNodeId
   nodes: Record<string, AnyNode>
   palette: FloorplanPalette | undefined
+  unitFocus?: FloorplanUnitFocus
   selected: boolean
   siblingEpoch: number
   unit: 'metric' | 'imperial'
@@ -2167,7 +2237,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 +2254,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 +2282,7 @@ export function buildFloorplanEntryGeometry({
   nodeId,
   nodes,
   palette,
+  unitFocus,
   selected,
   siblingEpoch,
   unit,
@@ -2250,6 +2322,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 +2405,8 @@ export function buildFloorplanEntryGeometry({
     highlighted,
     hovered,
     moving,
+    focusedUnitId: unitFocus?.focusedUnitId,
+    focusedUnitMemberIds: unitFocus?.focusedUnitMemberIds,
     palette,
   }
   const resolveContextNode = <N = AnyNode>(rid: AnyNodeId): N | undefined => {
@@ -2360,6 +2435,8 @@ export function buildFloorplanEntryGeometry({
               highlighted,
               hovered,
               moving,
+              focusedUnitId: unitFocus?.focusedUnitId,
+              focusedUnitMemberIds: unitFocus?.focusedUnitMemberIds,
               palette,
             }
           : undefined,
@@ -3292,15 +3369,26 @@ export function isFloorplanHierarchyVisible(
   liveOverrides: Map<string, LiveNodeOverrides>,
   rootId: AnyNodeId,
 ): boolean {
+  // The root is checked on its own because a site-scoped node can be declared
+  // on the Site without a `parentId` link. A Site's flag never reaches the
+  // nodes on it; see `hidesDescendants`.
   const root = nodes[rootId]
-  if (root && !isFloorplanNodeVisible(root, liveOverrides.get(root.id))) return false
+  if (
+    root &&
+    root.id !== node.id &&
+    hidesDescendants(root) &&
+    !isFloorplanNodeVisible(root, liveOverrides.get(root.id))
+  ) {
+    return false
+  }
 
   let current: AnyNode | undefined = node
   const seen = new Set<AnyNodeId>()
   while (current) {
     if (seen.has(current.id)) return true
     seen.add(current.id)
-    if (!isFloorplanNodeVisible(current, liveOverrides.get(current.id))) return false
+    const reaches = current.id === node.id || hidesDescendants(current)
+    if (reaches && !isFloorplanNodeVisible(current, liveOverrides.get(current.id))) return false
     if (current.id === rootId) return true
     const parentId = current.parentId as AnyNodeId | null
     if (!parentId) return true
@@ -3573,6 +3661,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)

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

@@ -58,9 +58,13 @@ export const ZoneSystem = () => {
       const isDeleteHovered = editorMode === 'delete' && hoveredId === zoneId
 
       // Keep group visible (so <Html> labels stay active), hide/show meshes only.
-      // Show meshes when: in zone mode, selected, or delete-hovered.
-      if (!obj.visible) obj.visible = true
-      const meshVisible = !isCaptureMode && (zoneGeometryVisible || isSelected || isDeleteHovered)
+      // Show meshes when: in zone mode, selected, or delete-hovered. A zone the
+      // author hid (sidebar eye) is the one case where the group itself goes:
+      // otherwise this per-frame write would undo the renderer's `visible` prop.
+      const nodeVisible = zone?.visible !== false
+      if (obj.visible !== nodeVisible) obj.visible = nodeVisible
+      const meshVisible =
+        nodeVisible && !isCaptureMode && (zoneGeometryVisible || isSelected || isDeleteHovered)
       const targetOpacity = isCaptureMode
         ? 0
         : isSelected || isDeleteHovered
@@ -103,7 +107,7 @@ export const ZoneSystem = () => {
       // Labels: visible on the current level (regardless of mode), but never
       // during snapshot capture.
       const showLabel =
-        !isCaptureMode && !zoneLabelsHidden && !!selectedLevelId && isOnSelectedLevel
+        nodeVisible && !isCaptureMode && !zoneLabelsHidden && !!selectedLevelId && isOnSelectedLevel
       const labelOpacity = showLabel ? '1' : '0'
       const labelEl = document.getElementById(`${zoneId}-label`)
       if (labelEl && labelEl.style.opacity !== labelOpacity) {

package/src/components/tools/__fixtures__/hosting.ts

@@ -0,0 +1,10 @@
+import { type AnyNodeDefinition, registerNode } from '@pascal-app/core'
+
+export function registerHostingTestNode(definition: AnyNodeDefinition) {
+  registerNode({
+    ...definition,
+    geometry: () => {
+      throw new Error('Unit-test host geometry must not be rendered')
+    },
+  })
+}