@pascal-app/editor 1.0.3 → 1.0.5

package/src/components/tools/item/use-placement-coordinator.tsx

@@ -3,6 +3,7 @@ import {
   type AlignmentAnchor,
   type AnyNode,
   type AnyNodeId,
+  beginSceneHistoryPauseSession,
   type CeilingEvent,
   canHostSurfaceChild,
   collectAlignmentAnchors,
@@ -10,6 +11,8 @@ import {
   findLevelAncestorId,
   type GridEvent,
   getScaledDimensions,
+  getWallBodyCenterOffset,
+  getWallLocalFaceZ,
   type ItemEvent,
   movingFootprintAnchors,
   type NodeEvent,
@@ -25,7 +28,6 @@ import {
   useScene,
   useSpatialQuery,
   type WallEvent,
-  type WallNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Html } from '@react-three/drei'
@@ -55,8 +57,10 @@ import { sfxEmitter } from '../../../lib/sfx-bus'
 import {
   surfaceAttachmentId,
   surfaceFramePose,
-  updateSurfaceNode,
+  updateSurfaceNode as writeSurfaceNode,
 } from '../../../lib/surface-attachment'
+import { isTypingTarget } from '../../../lib/typing-target'
+import { createWallPointerTracker } from '../../../lib/wall-placement-pointer'
 import {
   projectAlignmentGuidesWorldToActiveBuildingLocal,
   resolveAlignmentForActiveBuilding,
@@ -68,6 +72,7 @@ import useEditor, {
   isMagneticSnapActive,
 } from '../../../store/use-editor'
 import useFacingPose from '../../../store/use-facing-pose'
+import { getMovingNode } from '../../../store/use-interaction-scope'
 import usePlacementPreview from '../../../store/use-placement-preview'
 import {
   createItemSurfaceGridDispatch,
@@ -99,6 +104,7 @@ import {
 import {
   getDetachedAttachmentPreviewLift,
   getGridAlignedDimensions,
+  getSideFromNormal,
   snapToGrid,
   snapToHalf,
   snapUpToGridStep,
@@ -116,7 +122,7 @@ import {
 } from './placement-strategies'
 import { resolveItemPlacementSurfaceNormal } from './placement-surface'
 import type { PlacementState, TransitionResult } from './placement-types'
-import type { DraftNodeHandle } from './use-draft-node'
+import { type DraftNodeHandle, type ItemCopy, pausedDraftWrite } from './use-draft-node'
 
 const DEFAULT_DIMENSIONS: [number, number, number] = [1, 1, 1]
 
@@ -262,20 +268,20 @@ basePlaneMaterial.opacityNode = radialOpacity
 
 export interface PlacementCoordinatorConfig {
   asset: AssetInput | null
+  /** Scale to use when lazily creating a draft (e.g. for wall/ceiling duplicates). Defaults to [1,1,1]. */
+  defaultScale?: [number, number, number]
   draftNode: DraftNodeHandle
   initDraft: (gridPosition: Vector3) => void
-  onCommitted: () => boolean
-  onCancel?: () => void
   initialState?: PlacementState
-  /** Scale to use when lazily creating a draft (e.g. for wall/ceiling duplicates). Defaults to [1,1,1]. */
-  defaultScale?: [number, number, number]
-  /** Painted slot overrides to seed onto a lazily-created draft (wall/ceiling
-   *  duplicates) so the duplicate keeps its materials. */
-  slots?: ItemNode['slots']
+  onCancel?: () => void
+  onCommitted: () => boolean
   /** Move-mode sessions keep the grabbed item offset from the first surface hit
    *  (floor / wall / ceiling / item-surface / shelf) instead of snapping the
    *  item's origin under the cursor. */
   preserveDragOffset?: boolean
+  /** The item a duplicate copies, for a lazily-created draft (wall/ceiling
+   *  duplicates) to keep its materials and collections. */
+  copied?: ItemCopy
 }
 
 export function usePlacementCoordinator(config: PlacementCoordinatorConfig): React.ReactNode {
@@ -528,7 +534,14 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
   useEffect(() => {
     if (!asset) return
-    useScene.temporal.getState().pause()
+    // History is paused only around the placement's own writes, never for the whole carry:
+    // the draft stays out of history snapshots (core's history-drafts), so writes others make
+    // mid-carry record as their own steps, with space detection. In split view the 2D move
+    // overlay co-owns the gesture (keyed by the moving node), and the drop's commitStep lifts
+    // its pause too.
+    const movingNodeId = getMovingNode()?.id
+    const updateSurfaceNode: typeof writeSurfaceNode = (...args) =>
+      pausedDraftWrite(() => writeSurfaceNode(...args))
 
     const validators = { canPlaceOnFloor, canPlaceOnWall, canPlaceOnCeiling }
 
@@ -596,6 +609,29 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       if (mesh) reconcileDraftRaycast(mesh)
     }
 
+    // Eat the click the browser fires after a pointer-up that committed, so it
+    // neither commits a second time through a surface `:click` handler nor reaches
+    // the grid, in select mode by then, as a click on empty ground.
+    const swallowNextClick = () => {
+      const swallow = (e: Event) => {
+        e.stopPropagation()
+        e.preventDefault()
+      }
+      window.addEventListener('click', swallow, { capture: true, once: true })
+      setTimeout(() => window.removeEventListener('click', swallow, { capture: true }), 300)
+    }
+    // True between a press's pointer-up and the click the browser fires after it.
+    // Surface `:click` events are synthesized on pointer-up (use-node-events), so a
+    // commit they trigger still has that click to come; a `grid:click` commit is
+    // that click.
+    let releasing = false
+    const onPointerUpCapture = () => {
+      releasing = true
+    }
+    const onClickCapture = () => {
+      releasing = false
+    }
+
     const finishCommittedPlacement = (
       committedId: string | null,
       wasAdopted: boolean,
@@ -608,7 +644,6 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       }
 
       useAlignmentGuides.getState().clear()
-      useScene.temporal.getState().resume()
       if (committedId) {
         useViewer.getState().setSelection({ selectedIds: [committedId as AnyNodeId] })
       }
@@ -619,6 +654,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       // lands on the just-placed (now selected) node instead of a tool-less build
       // limbo. Repeat placements took the early return above and stay armed.
       useEditor.getState().setMode('select')
+      if (releasing) swallowNextClick()
     }
 
     const commitDraft = (
@@ -631,14 +667,22 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     ) => {
       const draftId = draftNode.current?.id ?? null
       const wasAdopted = draftNode.isAdopted
-      const finalId = draftNode.commit(nodeUpdate, {
-        ...options,
-        onReject: (reason) => {
-          feedback.reject(reason)
-          edgeMaterial.color.setHex(0xef_44_44)
-          basePlaneMaterial.color.setHex(0xef_44_44)
-        },
-      })
+      const drop = beginSceneHistoryPauseSession(useScene, { gesture: movingNodeId })
+      let finalId: string | null
+      try {
+        finalId = drop.commitStep(() =>
+          draftNode.commit(nodeUpdate, {
+            ...options,
+            onReject: (reason) => {
+              feedback.reject(reason)
+              edgeMaterial.color.setHex(0xef_44_44)
+              basePlaneMaterial.color.setHex(0xef_44_44)
+            },
+          }),
+        )
+      } finally {
+        drop.end()
+      }
       if (finalId && draftId) {
         useLiveTransforms.getState().clear(draftId)
         useLiveNodeOverrides.getState().clearFields(draftId, faceHostClearFields(draftNode.current))
@@ -780,10 +824,13 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       // Alignment guides are floor-only; clear them when the cursor moves
       // onto a wall / ceiling / item surface (only those paths call this).
       useAlignmentGuides.getState().clear()
-      // Roof faces carry no grab anchor, but landing on one still counts as
-      // anchoring elsewhere — a later return to the grabbed wall must center
-      // under the cursor, not restore the stale grab offset.
-      if (result.stateUpdate.surface === 'roof-wall') grabForgotten = true
+      // A floor transition can be a hit gap; other hosted surfaces are a new anchor.
+      if (
+        result.stateUpdate.surface &&
+        result.stateUpdate.surface !== 'floor' &&
+        result.stateUpdate.surface !== 'wall'
+      )
+        grabForgotten = true
       Object.assign(placementState.current, result.stateUpdate)
       gridPosition.current.set(...result.gridPosition)
 
@@ -832,16 +879,15 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         asset,
         initRotation,
         configRef.current.defaultScale,
-        configRef.current.slots,
+        configRef.current.copied,
       )
 
       const draft = draftNode.current
       if (draft) {
         Object.assign(draft, result.nodeUpdate)
         // One-time setup: put node in the right parent so it renders correctly
-        if (result.surfaceId !== undefined)
-          draftNode.updateSurface(result.nodeUpdate, result.surfaceId)
-        else updateSurfaceNode(draft.id, result.nodeUpdate)
+        if (result.surfaceId === undefined) updateSurfaceNode(draft.id, result.nodeUpdate)
+        else draftNode.updateSurface(result.nodeUpdate, result.surfaceId)
         disableDraftRaycastNow()
       }
 
@@ -908,15 +954,12 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     // for a given host, then offsets every later move by
     // `start + (raw - anchor)` — mirroring the floor path and the door/window
     // move tools so the item tracks the grabbed point instead of teleporting
-    // its origin under the cursor. Reset on host change (re-seeded from the
-    // item's then-current position) by the surface leave handlers.
-    let wallDragAnchor: {
-      wallId: string
-      rawX: number
-      rawY: number
-      startX: number
-      startY: number
-    } | null = null
+    // its origin under the cursor. Changing hosts or faces clears the offset.
+    const wallPointer = createWallPointerTracker(
+      preserveDragOffset && grabStartPosition
+        ? { wallId: grabWallId, side: draftNode.current?.side, position: grabStartPosition }
+        : undefined,
+    )
     let ceilingDragAnchor: {
       ceilingId: string
       rawX: number
@@ -1037,16 +1080,6 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     // replays it. Captured once at setup — a fresh coordinator mounts per move.
     const dragMode = useEditor.getState().placementDragMode
     let releaseCommit: (() => void) | null = null
-    // Eat the click the browser fires after pointer-up so the surface
-    // `:click` handlers don't commit a second time.
-    const swallowNextClick = () => {
-      const swallow = (e: Event) => {
-        e.stopPropagation()
-        e.preventDefault()
-      }
-      window.addEventListener('click', swallow, { capture: true, once: true })
-      setTimeout(() => window.removeEventListener('click', swallow, { capture: true }), 300)
-    }
     const onReleaseCommit = () => {
       gridDispatch.flush()
       if (!releaseCommit) return
@@ -1134,6 +1167,8 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       if (!cursorGroupRef.current) return
       const result = floorStrategy.move(getContext(), floorEvent)
       if (!result) return
+      // Attached items cannot land on the floor; its hit can be a gap in their host.
+      if (!asset.attachTo) grabForgotten = true
 
       // Figma-style alignment snap layered on top of the floor strategy's
       // grid snap: when the draft's edge lines up (on X or Z) with another
@@ -1276,7 +1311,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
           asset,
           currentRotation,
           configRef.current.defaultScale,
-          configRef.current.slots,
+          configRef.current.copied,
         )
         const previewBounds = expandBoundsToGrid(
           getFallbackPreviewBounds(draftNode.current, asset, asset.attachTo),
@@ -1363,28 +1398,13 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
       let wallMoveEvent = event
       if (preserveDragOffset && draftNode.current) {
-        const rawX = event.localPosition[0]
-        const rawY = event.localPosition[1]
-        if (!wallDragAnchor || wallDragAnchor.wallId !== event.node.id) {
-          // Preserve the grab offset only on the wall the item was grabbed
-          // from (no teleport under the pointer at grab time). Any OTHER host
-          // centers the item under the cursor — a host change is already a
-          // jump, so tracking the pointer exactly is the expected feel, while
-          // re-seeding from the carried-over position (the old behavior)
-          // baked an arbitrary along-wall offset into the whole stay on that
-          // wall. Once anchored elsewhere the grab is forgotten for good, so
-          // re-entering the original wall centers under the cursor too.
-          const preserveGrab = preserveGrabOn(event.node.id, grabWallId)
-          wallDragAnchor = {
-            wallId: event.node.id,
-            rawX,
-            rawY,
-            startX: preserveGrab && grabStartPosition ? grabStartPosition[0] : rawX,
-            startY: preserveGrab && grabStartPosition ? grabStartPosition[1] : rawY,
-          }
-        }
-        const correctedX = wallDragAnchor.startX + (rawX - wallDragAnchor.rawX)
-        const correctedY = wallDragAnchor.startY + (rawY - wallDragAnchor.rawY)
+        preserveGrabOn(event.node.id, grabWallId)
+        if (grabForgotten) wallPointer.forget()
+        const [correctedX, correctedY] = wallPointer.resolve(
+          event.node.id,
+          getSideFromNormal(event.normal),
+          [event.localPosition[0], event.localPosition[1]],
+        )
         wallMoveEvent = {
           ...event,
           localPosition: [correctedX, correctedY, event.localPosition[2]],
@@ -1427,12 +1447,13 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
           const rot = result.nodeUpdate?.rotation
           if (rot) mesh.rotation.y = rot[1]
 
-          // Push wall-side items out by half the parent wall's thickness
-          if (asset.attachTo === 'wall-side' && placementState.current.wallId) {
+          if (placementState.current.wallId) {
             const parentWall = useScene.getState().nodes[placementState.current.wallId as AnyNodeId]
             if (parentWall?.type === 'wall') {
-              const wallThickness = (parentWall as WallNode).thickness ?? 0.1
-              mesh.position.z = (wallThickness / 2) * (draft.side === 'front' ? 1 : -1)
+              mesh.position.z =
+                asset.attachTo === 'wall-side'
+                  ? getWallLocalFaceZ(parentWall, draft.side === 'front' ? 'a' : 'b')
+                  : draft.position[2] + getWallBodyCenterOffset(parentWall)
             }
           }
         }
@@ -1486,7 +1507,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     }
 
     const onWallLeave = (event: WallEvent) => {
-      wallDragAnchor = null
+      wallPointer.leave()
       const result = wallStrategy.leave(getContext())
       if (!result) return
 
@@ -1600,7 +1621,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
             const segment =
               useScene.getState().nodes[placementState.current.roofSegmentId as AnyNodeId]
             if (segment?.type === 'roof-segment') {
-              mesh.position.z = (segment.wallThickness ?? 0.1) / 2
+              mesh.position.z = getWallLocalFaceZ({ thickness: segment.wallThickness ?? 0.1 }, 'a')
             }
           }
           const rot = result.nodeUpdate?.rotation
@@ -1640,10 +1661,12 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         applyTransition(result)
         const draft = draftNode.current
         if (draft) {
-          useScene.getState().updateNode(draft.id, {
-            parentId: result.nodeUpdate.parentId as string,
-            roofSegmentId: undefined,
-          })
+          pausedDraftWrite(() =>
+            useScene.getState().updateNode(draft.id, {
+              parentId: result.nodeUpdate.parentId as string,
+              roofSegmentId: undefined,
+            }),
+          )
         }
       } else {
         // Create mode: destroy transient and reset state
@@ -1758,7 +1781,8 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       }
       if (draftNode.isAdopted) {
         applyTransition(result)
-        if (draft) useScene.getState().updateNode(draft.id, result.nodeUpdate)
+        if (draft)
+          pausedDraftWrite(() => useScene.getState().updateNode(draft.id, result.nodeUpdate))
       } else {
         draftNode.destroy()
         gridPosition.current.set(...result.gridPosition)
@@ -1863,6 +1887,8 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       }
       if (event.node.id === draftNode.current?.id) return
       has3DPointerDrivenMoveRef.current = true
+      // An authored object's underside takes ceiling items (a pendant under a vault).
+      if (enterFaceHost(event)) return
       const result = itemSurfaceStrategy.enter(surfaceContext(event, generic), event)
       if (!result) return
       feedback.clear()
@@ -1880,6 +1906,17 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
     const onItemMove = (event: NodeEvent<AnyNode>, generic = false) => {
       if (event.node.id === draftNode.current?.id) return
+      if (
+        placementState.current.surface === 'block-face' &&
+        placementState.current.blockId === event.node.id
+      ) {
+        onFaceHostMove(event)
+        return
+      }
+      if (placementState.current.surface !== 'block-face' && enterFaceHost(event)) {
+        releaseCommit = () => onFaceHostClick(event)
+        return
+      }
       releaseCommit = () => onItemClick(event)
       has3DPointerDrivenMoveRef.current = true
       if (!cursorGroupRef.current) return
@@ -1931,9 +1968,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       }
 
       const surfaceWorld =
-        ctx.state.surfaceItemId !== null
-          ? resolveHostSurfaceWorld(ctx.state.surfaceItemId, event.position)
-          : null
+        ctx.state.surfaceItemId === null
+          ? null
+          : resolveHostSurfaceWorld(ctx.state.surfaceItemId, event.position)
       const itemMoveEvent = surfaceWorld ? { ...event, position: surfaceWorld } : event
       lastRawPos.current.set(
         itemMoveEvent.position[0],
@@ -1980,6 +2017,13 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     const onItemLeave = (event: NodeEvent<AnyNode>) => {
       if (event.node.type === 'cabinet') return
       if (event.node.id === draftNode.current?.id) return
+      if (
+        placementState.current.surface === 'block-face' &&
+        placementState.current.blockId === event.node.id
+      ) {
+        onFaceHostLeave(event)
+        return
+      }
       if (placementState.current.surface !== 'item-surface') return
 
       event.stopPropagation()
@@ -1995,6 +2039,13 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     const onItemClick = (event: NodeEvent<AnyNode>) => {
       gridDispatch.flush()
       if (feedback.reason) return
+      if (
+        placementState.current.surface === 'block-face' &&
+        placementState.current.blockId === event.node.id
+      ) {
+        onFaceHostClick(event)
+        return
+      }
       // Click on the draft item itself. R3F dispatches click events to
       // the closest intersected mesh only — when the draft is hovering
       // on a host (shelf / table / etc.) the draft's mesh is *above*
@@ -2309,9 +2360,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         return
       }
       const shelfWorld =
-        ctx.state.shelfId !== null
-          ? resolveHostSurfaceWorld(ctx.state.shelfId, event.position)
-          : null
+        ctx.state.shelfId === null
+          ? null
+          : resolveHostSurfaceWorld(ctx.state.shelfId, event.position)
       const shelfMoveEvent = shelfWorld ? { ...event, position: shelfWorld } : event
       const result = shelfSurfaceStrategy.move(ctx, shelfMoveEvent)
       if (!result) return
@@ -2385,9 +2436,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       }
 
       // Don't intercept keys when focus is inside a text input
-      if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
-        return
-      }
+      if (isTypingTarget(event.target)) return
 
       const draft = draftNode.current
       if (!draft) return
@@ -2613,7 +2662,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       if (event.button !== 2) return
       const down = rightDown
       rightDown = null
-      if (!down || !configRef.current.onCancel) return
+      if (!(down && configRef.current.onCancel)) return
       const movedSq = (event.clientX - down.x) ** 2 + (event.clientY - down.y) ** 2
       const elapsed = performance.now() - down.t
       if (movedSq <= RIGHT_CLICK_CANCEL_MAX_MOVE_PX ** 2 && elapsed <= RIGHT_CLICK_CANCEL_MAX_MS) {
@@ -2662,8 +2711,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         const draft = draftNode.current
         if (draft === null) return
         if (draft.id in useScene.getState().nodes) return
-        // Temporal is paused during placement, createNode won't be tracked
-        useScene.getState().createNode(draft, draft.parentId as AnyNodeId)
+        pausedDraftWrite(() => useScene.getState().createNode(draft, draft.parentId as AnyNodeId))
       })
     })
 
@@ -2752,11 +2800,15 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     }
     emitter.on('node:click', commitFloorOnSurfaceClick as never)
     if (dragMode) window.addEventListener('pointerup', onReleaseCommit)
+    window.addEventListener('pointerup', onPointerUpCapture, true)
+    window.addEventListener('click', onClickCapture, true)
 
     return () => {
       tearingDown = true
       feedback.clear()
       if (dragMode) window.removeEventListener('pointerup', onReleaseCommit)
+      window.removeEventListener('pointerup', onPointerUpCapture, true)
+      window.removeEventListener('click', onClickCapture, true)
       unsubDraftWatch()
       useAlignmentGuides.getState().clear()
       // Clear every live preview channel before restoring or deleting the draft.
@@ -2765,7 +2817,6 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         useLiveNodeOverrides.getState().clearFields(draftNode.current.id, ['rotation'])
       }
       draftNode.destroy()
-      useScene.temporal.getState().resume()
       gridDispatch.cancel()
       emitter.off('grid:move', gridDispatch.schedule)
       emitter.off('grid:click', onGridClick)
@@ -2862,7 +2913,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     )
       return
     draft.parentId = viewerLevelId
-    useScene.getState().updateNode(draft.id as AnyNodeId, { parentId: viewerLevelId })
+    pausedDraftWrite(() =>
+      useScene.getState().updateNode(draft.id as AnyNodeId, { parentId: viewerLevelId }),
+    )
   }, [viewerLevelId, draftNode, asset])
 
   // Restore the draft mesh's raycast when the coordinator unmounts (tool change).

package/src/components/tools/paint-region/use-paint-tint.ts

@@ -0,0 +1,37 @@
+import {
+  getCatalogMaterialById,
+  parseMaterialRef,
+  type SceneMaterialId,
+  useScene,
+} from '@pascal-app/core'
+import { useMemo } from 'react'
+import { usePaintRegionMode } from '../../../lib/paint-region-mode'
+import useEditor from '../../../store/use-editor'
+
+/**
+ * The paint material's colour for a region preview: a library preset's
+ * preview colour, a scene material's colour, or a plain material colour;
+ * `fallback` for the eraser or a material with no cheap colour.
+ */
+export function usePaintTint(fallback: string): string {
+  const active = useEditor((state) => state.activePaintMaterial)
+  const eraser = usePaintRegionMode((state) => state.mode) === 'erase'
+  const materials = useScene((state) => state.materials)
+  return useMemo(() => {
+    if (eraser) return fallback
+    const parsed = parseMaterialRef(active?.materialPreset)
+    if (parsed?.kind === 'library') {
+      const color = getCatalogMaterialById(parsed.id)?.previewColor
+      if (color) return color
+    }
+    if (parsed?.kind === 'scene') {
+      const color = materials[parsed.id as SceneMaterialId]?.material.properties?.color
+      if (color) return color
+    }
+    return (
+      active?.material?.properties?.color ??
+      getCatalogMaterialById(active?.material?.id)?.previewColor ??
+      fallback
+    )
+  }, [active, eraser, materials, fallback])
+}