@pascal-app/editor 1.0.6 → 1.0.7

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

@@ -78,7 +78,7 @@ import { resolveNodeForDrawingType } from '../../../lib/floorplan/drawing-coordi
 import {
   createFloorplanContextExtensions,
   type FloorplanAnnotationRole,
-  type FloorplanWallDimensionReference,
+  type FloorplanWallDimensionFaces,
   getFloorplanNodeExtension,
   readFloorplanGeometryMetadata,
   withFloorplanGeometryMetadata,
@@ -86,7 +86,6 @@ import {
 import {
   type FloorplanMode,
   resolveFloorplanAnnotationVisibility,
-  resolveFloorplanWallDimensionReference,
 } from '../../../lib/floorplan/floorplan-mode'
 import {
   buildFloorplanContext,
@@ -115,6 +114,11 @@ import { createSessionWrites, type SessionWrites } from '../../../lib/session-wr
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { clearSurfacePlanSnapFeedback } from '../../../lib/surface-plan-snap'
 import { paintZoneMembership } from '../../../lib/units'
+import {
+  startWallPull,
+  WALL_PULL_AFFORDANCE,
+  type WallPullGripPayload,
+} from '../../../lib/wall-pull'
 import useDirectManipulationFeedback from '../../../store/use-direct-manipulation-feedback'
 import useDrawingView from '../../../store/use-drawing-view'
 import useEditor, { isAngleSnapActive, type Mode } from '../../../store/use-editor'
@@ -130,7 +134,12 @@ import { isViewVisible, VIEW_2D } from '../../../store/view-layout'
 import { FloorRegionControls2D } from '../../editor/floor-region-controls'
 import { startGroupPickUp } from '../../editor/group-actions'
 import { classifyParticipant } from '../../editor/group-transform-shared'
-import { RoomHandleDragPreview2D, RoomHandles2D } from '../../editor/room-handles-2d'
+import {
+  RoomHandleDragPreview2D,
+  RoomHandles2D,
+  SelectedWallDimensions2D,
+  useSelectionDimensionNodes,
+} from '../../editor/room-handles-2d'
 import { RoomHighlight2D } from '../../editor/room-highlight'
 import { RoomLabels2D } from '../../editor/room-labels'
 import { suppressBoxSelectForPointer } from '../../tools/select/box-select-state'
@@ -150,7 +159,10 @@ import {
   resolveSvgAnnotationCollisions,
   svgAnnotationLabelId,
 } from './floorplan-annotation-layout'
-import { FloorplanDimensionEditOverlay } from './floorplan-dimension-edit-overlay'
+import {
+  FloorplanDimensionEditOverlay,
+  typeableDimensionAt,
+} from './floorplan-dimension-edit-overlay'
 import { FloorplanDimensionRenderer } from './floorplan-dimension-renderer'
 import { FloorplanGeometryRenderer } from './floorplan-geometry-renderer'
 import {
@@ -199,6 +211,15 @@ const DIRECT_DRAG_THRESHOLD_PX = 4
 const DIRECT_ROTATE_EPSILON = 1e-6
 const DIRECT_ROTATE_RADIANS_PER_PIXEL = Math.PI / 180
 const MAX_HANDLE_UNITS_PER_PIXEL = 0.015
+// A wall end's pull grip, in screen pixels out from the end along the wall:
+// clear of the end's move grip (its hit ring reaches ~17 px), a short dashed
+// leader, then a round button with an outward arrow.
+const PULL_GRIP_LEADER_START_PX = 9
+const PULL_GRIP_CENTER_PX = 30
+const PULL_GRIP_RADIUS_PX = 10
+const PULL_GRIP_HIT_RADIUS_PX = 13
+const PULL_GRIP_FILL = '#10b981' // emerald-500
+const PULL_GRIP_HOVER_FILL = '#059669' // emerald-600
 
 export function resolveFloorplanHandleUnitsPerPixel(unitsPerPixel: number): number {
   return Math.min(unitsPerPixel, MAX_HANDLE_UNITS_PER_PIXEL)
@@ -387,7 +408,7 @@ type NodeDeps = {
   live: LiveTransform | undefined
   unit: 'metric' | 'imperial'
   metricNotation: 'meters' | 'millimeters'
-  wallDimensionReference: FloorplanWallDimensionReference
+  wallDimensionFaces?: FloorplanWallDimensionFaces
   selected: boolean
   highlighted: boolean
   hovered: boolean
@@ -497,6 +518,20 @@ export function floorplanEntryYieldsToTool(state: {
   return state.mode === 'build' || state.openingPlacement
 }
 
+/**
+ * Whether an entry draws its node without edit handles or dimension chrome: a member of a
+ * multi-selection, a ceiling outside its edit session, or anything while a build tool is armed (a
+ * selected roof keeps its selection for a new plane to join it, but a press near its eave must
+ * draw, not resize it).
+ */
+export function floorplanEntryStripsHandles(state: {
+  mode: Mode
+  multiSelected: boolean
+  ceilingWithoutSession: boolean
+}): boolean {
+  return state.multiSelected || state.ceilingWithoutSession || state.mode === 'build'
+}
+
 function floorplanEntryYieldsToToolNow(): boolean {
   const { mode, tool } = useEditor.getState()
   const movingNode = getMovingNode()
@@ -596,6 +631,11 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
   // `handleClickStop` / `handleSelect`, so the tool never sees it. Pass
   // clicks through in that case (`floorplanEntryYieldsToToolNow`).
   const editorMode = useEditor((s) => s.mode)
+  const selectionDimensionNodes = useSelectionDimensionNodes()
+  const selectionDimensionIds = useMemo(
+    () => new Set(selectionDimensionNodes.map((node) => node.id)),
+    [selectionDimensionNodes],
+  )
   const floorplanSelectionTool = useEditor((s) => s.floorplanSelectionTool)
   const endpointReshape = useEndpointReshape()
   const isMarqueeSelectionActive =
@@ -609,12 +649,9 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
   const floorplanVisible = useEditor((s) => isViewVisible(s, VIEW_2D))
   const drawingType = useDrawingView((s) => s.drawingType)
   const annotationVisibility = useFloorplanAnnotationVisibility((s) => s.visibility)
-  const wallDimensionReference = useFloorplanAnnotationVisibility((s) => s.wallDimensionReference)
+  const showDimensions = useFloorplanAnnotationVisibility((s) => s.showDimensions)
+  const wallDimensionFaces = useFloorplanAnnotationVisibility((s) => s.wallDimensionFaces)
   const floorplanMode = useFloorplanMode((s) => s.mode)
-  const effectiveWallDimensionReference = resolveFloorplanWallDimensionReference(
-    floorplanMode,
-    wallDimensionReference,
-  )
   // Elevator builders read runtime state imperatively, so entries include this
   // rare-changing ref in their cache deps.
   const interactiveElevators = useInteractive((s) => s.elevators)
@@ -981,6 +1018,12 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return false
       if (movingNode) return false
       if (useEditor.getState().mode === 'delete') return false
+      // A press on a member's dimension value is the type-a-value box's: its click opens it.
+      if (!immediate && typeableDimensionAt(event.target, event.clientX, event.clientY)) {
+        event.stopPropagation()
+        suppressBoxSelectForPointer(event)
+        return true
+      }
       const started = startFloorplanGroupMove(id, event, {
         immediate,
         onClickFallthrough: immediate ? undefined : () => startGroupPickUp(),
@@ -1299,6 +1342,16 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
         runFloorplanWallPush(payload, event.clientX, event.clientY)
         return
       }
+      // A wall end's pull grip opens the Walls run at that end; the plan's
+      // wall draft then follows the pointer and the release places the wall.
+      if (affordance === WALL_PULL_AFFORDANCE) {
+        event.preventDefault()
+        event.stopPropagation()
+        suppressBoxSelectForPointer(event)
+        const grip = payload as WallPullGripPayload
+        startWallPull({ wallId: grip.wallId, endpoint: grip.endpoint, origin: '2d' })
+        return
+      }
 
       const sceneNodes = useScene.getState().nodes
       const node = sceneNodes[nodeId]
@@ -1590,6 +1643,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       <FloorplanRegistryEntry
         activeDragId={handleIdForNode(activeDragId, entry.id)}
         annotationVisibility={annotationVisibility}
+        showDimensions={showDimensions}
         floorplanMode={floorplanMode}
         floorplanVisible={floorplanVisible}
         geometryCacheRef={geometryCacheRef}
@@ -1597,6 +1651,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
         hoveredHandleId={handleIdForNode(hoveredHandleId, entry.id)}
         interactiveElevators={interactiveElevators}
         isMarqueeSelectionActive={isMarqueeSelectionActive}
+        keepsSelectionDimensions={selectionDimensionIds.has(entry.id)}
         key={`${pass}-${entry.id}`}
         levelDataCacheRef={levelDataCacheRef}
         levelNodeIdsByType={floorplanData.levelNodeIdsByType}
@@ -1619,7 +1674,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
         siblingEpoch={entry.dependsOnSiblingInputs ? (siblingEpochs.get(entry.id) ?? 0) : 0}
         unit={unit}
         metricNotation={metricNotation}
-        wallDimensionReference={effectiveWallDimensionReference}
+        wallDimensionFaces={wallDimensionFaces}
         visibilityRootId={
           entry.visibilityRootId ?? (entry.ctxOverrides ? undefined : (levelId as AnyNodeId))
         }
@@ -1669,6 +1724,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       <g className="floorplan-registry-handles">{renderEntries('handles')}</g>
       <RoomHandles2D levelId={levelId} />
       <RoomHandleDragPreview2D levelId={levelId} />
+      <SelectedWallDimensions2D levelId={levelId} />
       <FloorplanAnnotationLayoutResolver active={floorplanVisible} />
       {/* Click-to-type dimension labels. Portals its HTML input to
           document.body, so mounting it inside the SVG tree is safe. */}
@@ -1707,9 +1763,8 @@ function FloorplanAnnotationLayoutResolver({ active }: { active: boolean }) {
   const drawingType = useDrawingView((state) => state.drawingType)
   const annotationLayoutOverrides = useDrawingView((state) => state.annotationLayoutOverrides)
   const annotationVisibility = useFloorplanAnnotationVisibility((state) => state.visibility)
-  const wallDimensionReference = useFloorplanAnnotationVisibility(
-    (state) => state.wallDimensionReference,
-  )
+  const showDimensions = useFloorplanAnnotationVisibility((state) => state.showDimensions)
+  const wallDimensionFaces = useFloorplanAnnotationVisibility((state) => state.wallDimensionFaces)
   const floorplanMode = useFloorplanMode((state) => state.mode)
   const layoutInputs = useMemo(
     () => ({
@@ -1718,7 +1773,8 @@ function FloorplanAnnotationLayoutResolver({ active }: { active: boolean }) {
       drawingType,
       interactionIdle,
       settledLayoutEpoch,
-      wallDimensionReference,
+      showDimensions,
+      wallDimensionFaces,
       floorplanMode,
     }),
     [
@@ -1727,7 +1783,8 @@ function FloorplanAnnotationLayoutResolver({ active }: { active: boolean }) {
       drawingType,
       interactionIdle,
       settledLayoutEpoch,
-      wallDimensionReference,
+      showDimensions,
+      wallDimensionFaces,
       floorplanMode,
     ],
   )
@@ -1955,6 +2012,7 @@ function readFloorplanAnnotationLayoutOffset(label: SVGGElement) {
 type FloorplanRegistryEntryProps = {
   activeDragId: string | null
   annotationVisibility: FloorplanAnnotationVisibility
+  showDimensions: boolean
   floorplanMode: FloorplanMode
   ctxOverrides: FloorplanContextOverrides | undefined
   floorplanVisible: boolean
@@ -1963,6 +2021,8 @@ type FloorplanRegistryEntryProps = {
   hoveredHandleId: string | null
   interactiveElevators: unknown
   isMarqueeSelectionActive: boolean
+  /** A wall in a multi-selection still shows its own length (`useSelectionDimensionNodes`). */
+  keepsSelectionDimensions: boolean
   levelDataCacheRef: { current: Map<string, LevelDataCacheEntry> }
   levelNodeIdsByType: ReadonlyMap<string, readonly AnyNodeId[]>
   moving: boolean
@@ -1996,13 +2056,14 @@ type FloorplanRegistryEntryProps = {
   siblingEpoch: number
   unit: 'metric' | 'imperial'
   metricNotation: 'meters' | 'millimeters'
-  wallDimensionReference: FloorplanWallDimensionReference
+  wallDimensionFaces: FloorplanWallDimensionFaces
   visibilityRootId: AnyNodeId | undefined
 }
 
 const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
   activeDragId,
   annotationVisibility,
+  showDimensions,
   floorplanMode,
   ctxOverrides,
   floorplanVisible,
@@ -2011,6 +2072,7 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
   hoveredHandleId,
   interactiveElevators,
   isMarqueeSelectionActive,
+  keepsSelectionDimensions,
   levelDataCacheRef,
   levelNodeIdsByType,
   moving,
@@ -2032,7 +2094,7 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
   siblingEpoch,
   unit,
   metricNotation,
-  wallDimensionReference,
+  wallDimensionFaces,
   visibilityRootId,
 }: FloorplanRegistryEntryProps): React.ReactElement | null {
   // A node an agent just built is drawn on its construction-reveal turn, as in 3D.
@@ -2049,7 +2111,12 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
   const ceilingWithoutSession = useCeilingEditSession(
     (state) => node.type === 'ceiling' && state.session?.ceilingId !== nodeId,
   )
-  const suppressHandles = multiSelected || ceilingWithoutSession
+  const mode = useEditor((state) => state.mode)
+  const suppressHandles = floorplanEntryStripsHandles({
+    mode,
+    multiSelected,
+    ceilingWithoutSession,
+  })
   const selectedLevelId = useViewer((state) => state.selection.levelId)
   const selectionProxyId = resolveSelectionProxyId(
     node,
@@ -2089,6 +2156,7 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
       referencedAnnotationRole,
       selected,
       target: 'editor',
+      dimensions: showDimensions,
     },
   )
 
@@ -2220,7 +2288,7 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
     siblingEpoch,
     unit,
     metricNotation,
-    wallDimensionReference,
+    wallDimensionFaces,
     visibilityRootId,
   })
   const rawGeometry = cacheEntry ? cacheEntry[pass] : null
@@ -2229,10 +2297,10 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
     : null
   // Multi-selection shows highlight only: strip this member's edit handles /
   // dimension chrome (all of which live in the overlay pass) while keeping
-  // its highlighted body geometry.
+  // its highlighted body geometry and, for a wall, its own length.
   const geometry =
     visibleGeometry && suppressHandles && pass !== 'base'
-      ? stripHandleChrome(visibleGeometry)
+      ? stripHandleChrome(visibleGeometry, keepsSelectionDimensions)
       : visibleGeometry
   useFloorplanReveal(nodeId, entryRef, cacheEntry, revealWaiting, revealActive)
   if (revealWaiting || !geometry) return null
@@ -2293,7 +2361,7 @@ type BuildFloorplanEntryGeometryArgs = {
   siblingEpoch: number
   unit: 'metric' | 'imperial'
   metricNotation: 'meters' | 'millimeters'
-  wallDimensionReference: FloorplanWallDimensionReference
+  wallDimensionFaces?: FloorplanWallDimensionFaces
   visibilityRootId: AnyNodeId | undefined
 }
 
@@ -2353,7 +2421,7 @@ export function buildFloorplanEntryGeometry({
   siblingEpoch,
   unit,
   metricNotation,
-  wallDimensionReference,
+  wallDimensionFaces,
   visibilityRootId,
 }: BuildFloorplanEntryGeometryArgs): CacheEntry | null {
   const def = nodeRegistry.get(node.type)
@@ -2381,7 +2449,7 @@ export function buildFloorplanEntryGeometry({
     live,
     unit,
     metricNotation,
-    wallDimensionReference,
+    wallDimensionFaces,
     selected,
     highlighted,
     hovered,
@@ -2468,7 +2536,7 @@ export function buildFloorplanEntryGeometry({
     unit,
     metricNotation,
     roomLabelOverlay: true,
-    wallDimensionReference,
+    wallDimensionFaces,
     highlighted,
     hovered,
     moving,
@@ -2494,7 +2562,7 @@ export function buildFloorplanEntryGeometry({
           metricNotation,
           purpose: 'edit',
           roomLabelOverlay: true,
-          wallDimensionReference,
+          wallDimensionFaces,
         }),
         viewState: palette
           ? {
@@ -2642,6 +2710,87 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
 
   return renderInteractive(geometry, 0)
 
+  /**
+   * A wall end's "pull to continue" grip: screen-sized, just past the end
+   * along the wall, emerald so it reads apart from the end's move grip.
+   */
+  function renderPullGrip(
+    g: Extract<FloorplanGeometry, { kind: 'move-arrow' }>,
+    keyHint: number,
+  ): React.ReactElement {
+    const handleId = `${makeHandleId(nodeId, g.payload)}:pull`
+    const isHovered = hoveredHandleId === handleId
+    const k = handleUnitsPerPixel
+    const c = PULL_GRIP_CENTER_PX * k
+    const r = PULL_GRIP_RADIUS_PX * (isHovered ? 1.12 : 1) * k
+    // Outward arrow inside the button: shaft then head, tip along +x.
+    const arrowD = [
+      `M ${c - 5.5 * k},${-1.4 * k}`,
+      `L ${c + 0.5 * k},${-1.4 * k}`,
+      `L ${c + 0.5 * k},${-4.6 * k}`,
+      `L ${c + 6 * k},0`,
+      `L ${c + 0.5 * k},${4.6 * k}`,
+      `L ${c + 0.5 * k},${1.4 * k}`,
+      `L ${c - 5.5 * k},${1.4 * k}`,
+      'Z',
+    ].join(' ')
+    const affordance = g.affordance
+    const payload = g.payload
+    return (
+      <g
+        data-wall-pull-grip={
+          typeof payload === 'object' && payload && 'endpoint' in payload
+            ? String((payload as { endpoint: unknown }).endpoint)
+            : ''
+        }
+        key={keyHint}
+        onClick={(e) => e.stopPropagation()}
+        transform={`translate(${g.point[0]} ${g.point[1]}) rotate(${(g.angle * 180) / Math.PI})`}
+      >
+        <line
+          pointerEvents="none"
+          stroke={PULL_GRIP_FILL}
+          strokeDasharray={`${3 * k} ${2.5 * k}`}
+          strokeLinecap="round"
+          strokeWidth={1.5 * k}
+          x1={PULL_GRIP_LEADER_START_PX * k}
+          x2={c - r}
+          y1={0}
+          y2={0}
+        />
+        <circle
+          cx={c}
+          cy={0}
+          fill={isHovered ? PULL_GRIP_HOVER_FILL : PULL_GRIP_FILL}
+          pointerEvents="none"
+          r={r}
+          stroke="#ffffff"
+          strokeWidth={1.5 * k}
+        />
+        <path d={arrowD} fill="#ffffff" pointerEvents="none" />
+        <circle
+          cx={c}
+          cy={0}
+          fill="transparent"
+          onPointerDown={(e) => {
+            if (affordance) {
+              onHandlePointerDown(affordance, payload, e as ReactPointerEvent<SVGGElement>)
+            }
+          }}
+          onPointerEnter={() => onHandleHoverChange(handleId)}
+          onPointerLeave={() => onHandleHoverChange(null)}
+          // Fill only: the default stroke is a plan metre wide, and would take
+          // the press meant for the end's move grip.
+          pointerEvents="fill"
+          r={PULL_GRIP_HIT_RADIUS_PX * k}
+          style={{ cursor: 'grab' }}
+        >
+          {g.title ? <title>{g.title}</title> : null}
+        </circle>
+      </g>
+    )
+  }
+
   function renderInteractive(g: FloorplanGeometry, keyHint: number): React.ReactElement {
     switch (g.kind) {
       case 'group': {
@@ -2914,7 +3063,8 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
         const head1 = `M ${t1x} ${t1y} L ${b1ax} ${b1ay} L ${b1bx} ${b1by} Z`
         const head2 = `M ${t2x} ${t2y} L ${b2ax} ${b2ay} L ${b2bx} ${b2by} Z`
         const fill = isHovered ? '#a5b4fc' : '#8381ed'
-        const strokeWidthPx = isHovered ? 2.4 : 1.8
+        const scale = g.scale ?? 1
+        const strokeWidthPx = (isHovered ? 2.4 : 1.8) * Math.sqrt(scale)
         const angleDeg = (g.angle * 180) / Math.PI
         const affordance = g.affordance
         const payload = g.payload
@@ -2923,7 +3073,7 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
           <g
             key={keyHint}
             onClick={(e) => e.stopPropagation()}
-            transform={`translate(${g.point[0]} ${g.point[1]}) rotate(${angleDeg})`}
+            transform={`translate(${g.point[0]} ${g.point[1]}) rotate(${angleDeg}) scale(${scale})`}
           >
             <path
               d={arcPath}
@@ -2978,6 +3128,7 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
       }
       case 'move-arrow': {
         if (!palette) return <></>
+        if (g.variant === 'pull') return renderPullGrip(g, keyHint)
         // Affordance-routed arrows (door width-resize) get a per-payload
         // handle id so each side can hover independently; default
         // (move-flow) arrows share the node's :move id like the dot.
@@ -2987,13 +3138,14 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
         // so it shrinks on zoom-out and grows on zoom-in, matching the
         // wall it accompanies. Composed of a rectangular shaft + triangular
         // head, drawn as a single path for a clean fill + stroke outline.
-        const sl = 0.1 // shaft length (shortened body)
-        const hl = 0.12 // head length
-        const sh = 0.04 // shaft half-height
-        const hh = 0.1 // head half-height
+        const k = g.scale ?? 1
+        const sl = 0.1 * k // shaft length (shortened body)
+        const hl = 0.12 * k // head length
+        const sh = 0.04 * k // shaft half-height
+        const hh = 0.1 * k // head half-height
         // Inset the shaft start so the arrow sits a little off the wall
         // body (matches the 3D `HANDLE_OFFSET`).
-        const bi = 0.03 // base inset
+        const bi = 0.03 * k // base inset
         const arrowD = `M ${bi},${-sh} L ${bi + sl},${-sh} L ${bi + sl},${-hh} L ${bi + sl + hl},0 L ${bi + sl},${hh} L ${bi + sl},${sh} L ${bi},${sh} Z`
         // Indigo palette to match the 3D wall push arrows
         // (`ARROW_COLOR` / `ARROW_HOVER_COLOR`) and the corner-sphere
@@ -3642,11 +3794,19 @@ const HANDLE_CHROME_KINDS = new Set<FloorplanGeometry['kind']>([
   'equal-spacing-badge',
 ])
 
-function stripHandleChrome(g: FloorplanGeometry): FloorplanGeometry | null {
+function stripHandleChrome(
+  g: FloorplanGeometry,
+  keepContextualDimensions = false,
+): FloorplanGeometry | null {
+  if (
+    keepContextualDimensions &&
+    readFloorplanGeometryMetadata(g).annotationRole === 'contextual-dimension'
+  )
+    return g
   if (HANDLE_CHROME_KINDS.has(g.kind)) return null
   if (g.kind === 'group') {
     const children = g.children
-      .map(stripHandleChrome)
+      .map((child) => stripHandleChrome(child, keepContextualDimensions))
       .filter((c): c is FloorplanGeometry => c !== null)
     if (children.length === 0) return null
     return { kind: 'group', children, transform: g.transform }
@@ -3763,7 +3923,7 @@ function nodeDepsEqual(a: NodeDeps, b: NodeDeps): boolean {
     'live',
     'unit',
     'metricNotation',
-    'wallDimensionReference',
+    'wallDimensionFaces',
     'selected',
     'highlighted',
     'hovered',

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

@@ -1,5 +1,5 @@
 'use client'
-import { type AnyNodeId, useLiveNodeOverrides, useScene } from '@pascal-app/core'
+import { type AnyNodeId, useLiveNodeOverrides, usePascalI18n, useScene } from '@pascal-app/core'
 import {
   ProceduralItemNode,
   snapParameters,
@@ -22,6 +22,7 @@ export function ProceduralInspector({
   partId: string | null
   onPartChange: (id: string | null) => void
 }) {
+  const i18n = usePascalI18n()
   const committed = useScene((s) => s.nodes[nodeId as AnyNodeId]) as unknown as
     | ProceduralItemNode
     | undefined
@@ -42,14 +43,24 @@ export function ProceduralInspector({
     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')
+      setError(
+        parsed.error.issues[0]?.message ??
+          i18n._({ id: 'editor.proceduralItems.inspector.invalidEdit', 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')
+      setError(
+        e instanceof Error
+          ? e.message
+          : i18n._({
+              id: 'editor.proceduralItems.inspector.invalidAttachment',
+              message: 'Invalid attachment',
+            }),
+      )
       if (commit) useLiveNodeOverrides.getState().clear(nodeId as AnyNodeId)
       return
     }
@@ -64,7 +75,12 @@ export function ProceduralInspector({
     <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'}
+          {partId
+            ? node.recipe.parts.find((p) => p.id === partId)?.label
+            : i18n._({
+                id: 'editor.proceduralItems.inspector.adjustDesign',
+                message: 'Adjust design',
+              })}
         </h2>
         {partId && (
           <button
@@ -72,7 +88,7 @@ export function ProceduralInspector({
             onClick={() => onPartChange(null)}
             type="button"
           >
-            Back
+            {i18n._({ id: 'editor.proceduralItems.inspector.back', message: 'Back' })}
           </button>
         )}
       </div>
@@ -128,11 +144,21 @@ export function ProceduralInspector({
               useScene.getState().updateNode(nodeId as AnyNodeId, { parameters } as never)
               setError('')
             } catch (e) {
-              setError(e instanceof Error ? e.message : 'Invalid reset')
+              setError(
+                e instanceof Error
+                  ? e.message
+                  : i18n._({
+                      id: 'editor.proceduralItems.inspector.invalidReset',
+                      message: 'Invalid reset',
+                    }),
+              )
             }
           }}
         >
-          Reset this part
+          {i18n._({
+            id: 'editor.proceduralItems.inspector.resetThisPart',
+            message: 'Reset this part',
+          })}
         </button>
       )}
       {error && (
@@ -142,7 +168,9 @@ export function ProceduralInspector({
       )}
       {!partId && node.recipe.parameters.some((p) => p.part) && (
         <div>
-          <h3 className="mb-2 font-medium text-sm">Edit parts</h3>
+          <h3 className="mb-2 font-medium text-sm">
+            {i18n._({ id: 'editor.proceduralItems.inspector.editParts', message: 'Edit parts' })}
+          </h3>
           <div className="flex flex-wrap gap-2">
             {node.recipe.parts
               .filter((part) => node.recipe.parameters.some((p) => p.part === part.id))
@@ -188,13 +216,21 @@ function ProceduralPanel({ node }: { node: ProceduralItemNode }) {
 }
 
 function ProceduralPlacementControls({ node }: { node: ProceduralItemNode }) {
+  const i18n = usePascalI18n()
   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')
+      setError(
+        e instanceof Error
+          ? e.message
+          : i18n._({
+              id: 'editor.proceduralItems.inspector.invalidPlacement',
+              message: 'Invalid placement',
+            }),
+      )
     }
   }
   const changePosition = (index: number, value: number, commit: boolean) => {
@@ -213,18 +249,29 @@ function ProceduralPlacementControls({ node }: { node: ProceduralItemNode }) {
       setError('')
     } catch (e) {
       if (commit) useLiveNodeOverrides.getState().clear(node.id as AnyNodeId)
-      setError(e instanceof Error ? e.message : 'Invalid position')
+      setError(
+        e instanceof Error
+          ? e.message
+          : i18n._({
+              id: 'editor.proceduralItems.inspector.invalidPosition',
+              message: 'Invalid position',
+            }),
+      )
     }
   }
   return (
-    <PanelSection title="Position">
+    <PanelSection
+      title={i18n._({ id: 'editor.proceduralItems.inspector.position', message: 'Position' })}
+    >
       {(['X', 'Y', 'Z'] as const).map((axis, index) => (
         <SliderControl
           key={axis}
           label={
             <>
               {axis}
-              <sub className="ml-[1px] text-[11px] opacity-70">pos</sub>
+              <sub className="ml-[1px] text-[11px] opacity-70">
+                {i18n._({ id: 'editor.proceduralItems.inspector.pos', message: 'pos' })}
+              </sub>
             </>
           }
           value={node.position[index]!}

package/src/components/systems/ceiling/ceiling-bracket-batch.test.ts

@@ -29,6 +29,7 @@ import {
 type AttributesBackend = {
   createAttribute(): void
   updateAttribute(attribute: BufferAttribute): void
+  destroyAttribute(attribute: BufferAttribute): void
 }
 const Attributes = UntypedAttributes as new (
   backend: AttributesBackend,
@@ -371,6 +372,7 @@ test('WebGPU attribute updates skip resting frames and upload only written slots
   const attributes = new Attributes(
     {
       createAttribute() {},
+      destroyAttribute() {},
       updateAttribute(attribute: BufferAttribute) {
         uploads.push({ attribute, ranges: attribute.updateRanges.map((range) => ({ ...range })) })
         attribute.clearUpdateRanges()