Add material paint mode with scrollable palette

packages/viewer/src/components/viewer/post-processing.tsx

@@ -249,15 +249,33 @@ const PostProcessingPasses = () => {
 
       // Hovered: blue visible, yellow hidden, pulsing
       const hoverVisibleColor = uniform(
-        new Color(hoverHighlightMode === 'delete' ? 0xef_44_44 : 0x00_aa_ff),
+        new Color(
+          hoverHighlightMode === 'delete'
+            ? 0xef_44_44
+            : hoverHighlightMode === 'paint-ready'
+              ? 0xf59e_0b
+              : hoverHighlightMode === 'paint-disabled'
+                ? 0x94_a3_b8
+                : 0x00_aa_ff,
+        ),
       )
       const hoverHiddenColor = uniform(
-        new Color(hoverHighlightMode === 'delete' ? 0x99_1b_1b : 0xf3_ff_47),
+        new Color(
+          hoverHighlightMode === 'delete'
+            ? 0x99_1b_1b
+            : hoverHighlightMode === 'paint-ready'
+              ? 0xfde0_68
+              : hoverHighlightMode === 'paint-disabled'
+                ? 0x47_55_69
+                : 0xf3_ff_47,
+        ),
+      )
+      const hoverStrength = uniform(
+        hoverHighlightMode === 'delete' ? 6 : hoverHighlightMode === 'paint-disabled' ? 4 : 5,
       )
-      const hoverStrength = uniform(hoverHighlightMode === 'delete' ? 6 : 5)
       const pulsePeriod = uniform(3)
       const osc =
-        hoverHighlightMode === 'delete'
+        hoverHighlightMode === 'delete' || hoverHighlightMode === 'paint-disabled'
           ? float(1)
           : oscSine(time.div(pulsePeriod).mul(2)).mul(0.5).add(0.5) // [ 0.5, 1.0 ]
       const hoverOutline = outlineNode.secondaryVisibleEdge

packages/viewer/src/store/use-viewer.ts

@@ -22,8 +22,8 @@ type ViewerState = {
   selection: SelectionPath
   previewSelectedIds: BaseNode['id'][]
   setPreviewSelectedIds: (ids: BaseNode['id'][]) => void
-  hoverHighlightMode: 'default' | 'delete'
-  setHoverHighlightMode: (mode: 'default' | 'delete') => void
+  hoverHighlightMode: 'default' | 'delete' | 'paint-ready' | 'paint-disabled'
+  setHoverHighlightMode: (mode: 'default' | 'delete' | 'paint-ready' | 'paint-disabled') => void
   hoveredId: AnyNode['id'] | ZoneNode['id'] | null
   setHoveredId: (id: AnyNode['id'] | ZoneNode['id'] | null) => void
 
@@ -85,9 +85,10 @@ const useViewer = create<ViewerState>()(
       previewSelectedIds: [],
       setPreviewSelectedIds: (ids) => set({ previewSelectedIds: ids }),
       hoverHighlightMode: 'default',
-      setHoverHighlightMode: (mode) => set({ hoverHighlightMode: mode }),
+      setHoverHighlightMode: (mode) =>
+        set((state) => (state.hoverHighlightMode === mode ? state : { hoverHighlightMode: mode })),
       hoveredId: null,
-      setHoveredId: (id) => set({ hoveredId: id }),
+      setHoveredId: (id) => set((state) => (state.hoveredId === id ? state : { hoveredId: id })),
 
       cameraMode: 'perspective',
       setCameraMode: (mode) => set({ cameraMode: mode }),