From 4411b8ab5f60592657ef0e884fb9510e3daa970e Mon Sep 17 00:00:00 2001
From: Wassim SAMAD <wass08@gmail.com>
Date: Mon, 15 Jun 2026 17:41:38 -0400
Subject: [PATCH] feat(render-modes): add Colored / Monochrome toggle to the
 Render menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The textures axis had no UI control. Add Colored (textures on — show item
materials, textures, vertex colours) / Monochrome (textures off — flat clay
by surface role) options to the Render dropdown, wired to useViewer.textures.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../editor/src/components/viewer-overlay.tsx  | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/packages/editor/src/components/viewer-overlay.tsx b/packages/editor/src/components/viewer-overlay.tsx
index 28f5f876..d89482fb 100644
--- a/packages/editor/src/components/viewer-overlay.tsx
+++ b/packages/editor/src/components/viewer-overlay.tsx
@@ -26,8 +26,10 @@ import {
   ChevronRight,
   Diamond,
   Layers,
+  Palette,
   PenLine,
   Sparkles,
+  Square,
 } from 'lucide-react'
 import Link from 'next/link'
 import { useShallow } from 'zustand/react/shallow'
@@ -37,6 +39,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from './ui/primitives/dropdown-menu'
 import { TooltipProvider } from './ui/primitives/tooltip'
@@ -87,8 +90,14 @@ const SHADING_OPTIONS = [
   { id: 'rendered', name: 'Rendered', detail: 'Full ambient occlusion', icon: Sparkles },
 ] as const
 
+const TEXTURE_OPTIONS = [
+  { id: true, name: 'Colored', detail: 'Show materials, textures & colours', icon: Palette },
+  { id: false, name: 'Monochrome', detail: 'Flat clay surfaces by role', icon: Square },
+] as const
+
 function RenderModeMenu() {
   const shading = useViewer((s) => s.shading)
+  const textures = useViewer((s) => s.textures)
   const active = SHADING_OPTIONS.find((o) => o.id === shading) ?? SHADING_OPTIONS[0]
   const ActiveIcon = active.icon
   return (
@@ -121,6 +130,23 @@ function RenderModeMenu() {
             </DropdownMenuItem>
           )
         })}
+        <DropdownMenuSeparator />
+        {TEXTURE_OPTIONS.map((option) => {
+          const OptionIcon = option.icon
+          return (
+            <DropdownMenuItem
+              key={option.name}
+              onSelect={() => useViewer.getState().setTextures(option.id)}
+            >
+              <OptionIcon />
+              <div className="flex flex-col">
+                <span className="text-foreground">{option.name}</span>
+                <span className="text-muted-foreground text-xs">{option.detail}</span>
+              </div>
+              {textures === option.id ? <Check className="ml-auto text-foreground" /> : null}
+            </DropdownMenuItem>
+          )
+        })}
       </DropdownMenuContent>
     </DropdownMenu>
   )