Changes

src/components/ViewerControls.tsx

@@ -1,4 +1,4 @@
-import { Eye, Grid3X3, Ruler, Trash2, Camera, LayoutGrid, Palette } from 'lucide-react';
+import { Eye, Grid3X3, Ruler, Trash2, Camera, LayoutGrid, Palette, Box } from 'lucide-react';
 import { Slider } from '@/components/ui/slider';
 import { Button } from '@/components/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
@@ -24,6 +24,7 @@ export function ViewerControls() {
     showGrid, setShowGrid,
     wireframeColor, setWireframeColor,
     wireframeThickness, setWireframeThickness,
+    edgeThresholdAngle, setEdgeThresholdAngle,
   } = useModelStore();
 
   const handleScreenshot = useCallback(() => {
@@ -68,21 +69,24 @@ export function ViewerControls() {
         <span className="font-mono text-xs">Grid</span>
       </Button>
 
-      {/* Render mode toggle */}
+      {/* Render mode cycle: solid -> wireframe -> edges */}
       <Button
-        variant={renderMode === 'wireframe' ? 'default' : 'outline'}
+        variant={renderMode !== 'solid' ? 'default' : 'outline'}
         size="sm"
         className="gap-2 h-9"
-        onClick={() => setRenderMode(renderMode === 'solid' ? 'wireframe' : 'solid')}
+        onClick={() => {
+          const next = renderMode === 'solid' ? 'wireframe' : renderMode === 'wireframe' ? 'edges' : 'solid';
+          setRenderMode(next);
+        }}
       >
-        <Grid3X3 className="h-3.5 w-3.5" />
+        {renderMode === 'edges' ? <Box className="h-3.5 w-3.5" /> : <Grid3X3 className="h-3.5 w-3.5" />}
         <span className="font-mono text-xs">
-          {renderMode === 'wireframe' ? 'Wireframe' : 'Sólido'}
+          {renderMode === 'solid' ? 'Sólido' : renderMode === 'wireframe' ? 'Wireframe' : 'Bordas'}
         </span>
       </Button>
 
-      {/* Wireframe settings popover */}
-      {renderMode === 'wireframe' && (
+      {/* Wireframe/Edges settings popover */}
+      {renderMode !== 'solid' && (
         <Popover>
           <PopoverTrigger asChild>
             <Button variant="outline" size="sm" className="gap-2 h-9">
@@ -92,7 +96,7 @@ export function ViewerControls() {
           </PopoverTrigger>
           <PopoverContent className="w-56 space-y-3" side="top" align="start">
             <div>
-              <span className="font-mono text-xs text-muted-foreground">Cor do Wireframe</span>
+              <span className="font-mono text-xs text-muted-foreground">Cor das Linhas</span>
               <div className="mt-2 flex flex-wrap gap-2">
                 {WIRE_COLORS.map((c) => (
                   <button
@@ -118,10 +122,24 @@ export function ViewerControls() {
                 onValueChange={([v]) => setWireframeThickness(v)}
               />
             </div>
+            {renderMode === 'edges' && (
+              <div>
+                <div className="flex items-center justify-between mb-1">
+                  <span className="font-mono text-xs text-muted-foreground">Ângulo Limite</span>
+                  <span className="font-mono text-xs text-foreground">{edgeThresholdAngle}°</span>
+                </div>
+                <Slider
+                  value={[edgeThresholdAngle]}
+                  min={1}
+                  max={45}
+                  step={1}
+                  onValueChange={([v]) => setEdgeThresholdAngle(v)}
+                />
+              </div>
+            )}
           </PopoverContent>
         </Popover>
       )}
-
       {/* Measure tool */}
       <div className="flex items-end gap-1.5">
         <Button