🚀 Auto-deploy: BrainWind atualizado em 30/07/2026 11:01:30

app/src/components/three/ResizableBox3D.tsx

@@ -7,6 +7,7 @@ interface ResizableBox3DProps {
   l1: number;
   l2: number;
   h: number;
+  viewMode?: 'solid' | 'airflow';
 }
 
 function WindParticles({ l1, l2, h }: { l1: number, l2: number, h: number }) {
@@ -79,7 +80,7 @@ function WindParticles({ l1, l2, h }: { l1: number, l2: number, h: number }) {
   );
 }
 
-export function ResizableBox3D({ l1, l2, h }: ResizableBox3DProps) {
+export function ResizableBox3D({ l1, l2, h, viewMode = 'solid' }: ResizableBox3DProps) {
   const meshRef = useRef<THREE.Mesh>(null);
   
   // Create target scale and position based on inputs
@@ -109,12 +110,12 @@ export function ResizableBox3D({ l1, l2, h }: ResizableBox3DProps) {
       {/* The Animated Box */}
       <mesh ref={meshRef} castShadow receiveShadow>
         <boxGeometry args={[1, 1, 1]} />
-        <meshStandardMaterial color="#4f46e5" transparent opacity={0.7} roughness={0.2} metalness={0.8} />
+        <meshStandardMaterial color="#4f46e5" transparent opacity={viewMode === 'airflow' ? 0.3 : 0.7} roughness={0.2} metalness={0.8} />
         <Edges scale={1} threshold={15} color="#818cf8" />
       </mesh>
 
       {/* Wind Flow Animation */}
-      <WindParticles l1={l1} l2={l2} h={h} />
+      {viewMode === 'airflow' && <WindParticles l1={l1} l2={l2} h={h} />}
     </group>
   );
 }

app/src/pages/CalcCaModule.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { getDragCoefficient } from '@/lib/drag';
 import { useI18n } from '@/store/i18nStore';
 import { DragCoefficientChart } from '@/components/DragCoefficientChart';
@@ -7,8 +7,8 @@ import SceneCanvas from '@/components/SceneCanvas';
 import { Environment } from '@react-three/drei';
 import { ViewerOrbitControls as OrbitControls } from '@/components/three/ViewerOrbitControls';
 import { EducationalManual } from '@/components/EducationalManual';
-import { Calculator, Info } from 'lucide-react';
-import { Input } from '@/components/ui/input';
+import { Wind, Box } from 'lucide-react';
+import { Slider } from '@/components/ui/slider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 
 export default function CalcCaModule() {
@@ -16,6 +16,7 @@ export default function CalcCaModule() {
   const [l1, setL1] = useState<number>(20);
   const [l2, setL2] = useState<number>(40);
   const [h, setH] = useState<number>(10);
+  const [viewMode, setViewMode] = useState<'solid' | 'airflow'>('solid');
 
   // Clamp inputs to avoid Infinity or negative values breaking the UI
   const safeL1 = Math.max(0.1, l1 || 1);
@@ -26,73 +27,94 @@ export default function CalcCaModule() {
   const caHigh = getDragCoefficient(safeL1, safeL2, safeH, 'high');
 
   return (
-    <div className="p-6 max-w-7xl mx-auto space-y-6">
-      <header className="flex items-center gap-4 mb-8">
-        <div className="p-3 bg-primary/10 rounded-xl">
-          <Calculator className="w-8 h-8 text-primary" />
-        </div>
+    <div className="flex flex-col lg:flex-row h-full w-full gap-4 p-4 lg:p-6 bg-muted/30">
+      {/* Coluna Esquerda: Controles */}
+      <div className="w-full lg:w-80 shrink-0 flex flex-col gap-4 overflow-y-auto pb-8 lg:pb-0">
+        <Card className="shadow-sm border-border">
+          <CardHeader className="pb-3 flex flex-row items-start justify-between space-y-0 pr-6">
             <div>
-          <h1 className="text-3xl font-bold tracking-tight">{t('nav_calc_ca')}</h1>
-          <p className="text-muted-foreground">
-            Cálculo rápido de Coeficiente de Arrasto (Ca) - NBR 6123:2023, Fig. 4 e 5.
-          </p>
+              <CardTitle className="text-lg">Calc_Ca</CardTitle>
+              <CardDescription>Cálculo rápido de Coeficiente de Arrasto (Ca)</CardDescription>
             </div>
-      </header>
-
-      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
-        {/* Left Column: Inputs & Results */}
-        <div className="lg:col-span-4 space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-lg">Entrada de Dados</CardTitle>
-              <CardDescription>Dimensões da edificação retangular</CardDescription>
           </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <label htmlFor="l1" className="text-sm font-medium leading-none">L₁ (Largura perpendicular ao vento - m)</label>
-                <Input
-                  id="l1"
-                  type="number"
-                  min="0.1"
-                  step="0.1"
-                  value={l1}
-                  onChange={(e) => setL1(parseFloat(e.target.value))}
-                />
+          <CardContent className="space-y-6">
+            <div className="space-y-3">
+              <div className="flex justify-between">
+                <label className="text-sm font-medium">L₁ (Largura)</label>
+                <span className="font-mono text-sm">{l1} m</span>
               </div>
-              <div className="space-y-2">
-                <label htmlFor="l2" className="text-sm font-medium leading-none">L₂ (Profundidade paralela ao vento - m)</label>
-                <Input
-                  id="l2"
-                  type="number"
-                  min="0.1"
-                  step="0.1"
-                  value={l2}
-                  onChange={(e) => setL2(parseFloat(e.target.value))}
-                />
+              <Slider min={1} max={100} step={1} value={[l1]} onValueChange={(v) => setL1(v[0])} />
             </div>
-              <div className="space-y-2">
-                <label htmlFor="h" className="text-sm font-medium leading-none">H (Altura - m)</label>
-                <Input
-                  id="h"
-                  type="number"
-                  min="0.1"
-                  step="0.1"
-                  value={h}
-                  onChange={(e) => setH(parseFloat(e.target.value))}
-                />
+            
+            <div className="space-y-3">
+              <div className="flex justify-between">
+                <label className="text-sm font-medium">L₂ (Profundidade)</label>
+                <span className="font-mono text-sm">{l2} m</span>
+              </div>
+              <Slider min={1} max={100} step={1} value={[l2]} onValueChange={(v) => setL2(v[0])} />
+            </div>
+            
+            <div className="space-y-3">
+              <div className="flex justify-between">
+                <label className="text-sm font-medium">H (Altura)</label>
+                <span className="font-mono text-sm">{h} m</span>
+              </div>
+              <Slider min={1} max={100} step={1} value={[h]} onValueChange={(v) => setH(v[0])} />
             </div>
           </CardContent>
         </Card>
+      </div>
 
-          <Card className="border-primary/50 shadow-sm bg-primary/5">
-            <CardHeader className="pb-2">
-              <CardTitle className="text-lg flex items-center gap-2">
-                <Info className="w-5 h-5 text-primary" />
-                Resultados (Ca)
-              </CardTitle>
+      {/* Coluna Central: 3D */}
+      <div className="flex-1 flex flex-col min-h-[500px] lg:min-h-0 bg-background rounded-xl border border-border shadow-sm overflow-hidden relative">
+        <div className="absolute top-4 right-16 z-10">
+          <div className="flex bg-background/80 backdrop-blur-sm border border-border/80 rounded-md shadow-sm p-1">
+            <button
+              onClick={() => setViewMode('solid')}
+              className={`px-3 py-1 text-xs font-medium rounded-sm transition-colors ${viewMode === 'solid' ? 'bg-primary/20 text-primary' : 'text-muted-foreground hover:bg-muted/50'}`}
+            >
+              <Box className="w-3.5 h-3.5 inline-block mr-1.5" />
+              Sólido
+            </button>
+            <button
+              onClick={() => setViewMode('airflow')}
+              className={`px-3 py-1 text-xs font-medium rounded-sm transition-colors ${viewMode === 'airflow' ? 'bg-primary/20 text-primary' : 'text-muted-foreground hover:bg-muted/50'}`}
+            >
+              <Wind className="w-3.5 h-3.5 inline-block mr-1.5" />
+              Fluxo
+            </button>
+          </div>
+        </div>
+        <div className="absolute top-4 right-4 z-10">
+          <EducationalManual type="calc_ca" params={{ l1: safeL1, l2: safeL2, h: safeH }} />
+        </div>
+        
+        <SceneCanvas 
+          moduleId="calc_ca" 
+          camera={{ position: [50, 40, 50], fov: 45 }} 
+          fallback={<div />} 
+          frameloop={viewMode === 'airflow' ? 'always' : 'demand'}
+        >
+          <ambientLight intensity={0.5} />
+          <directionalLight position={[10, 20, 10]} intensity={1} castShadow />
+          <Environment preset="city" />
+          <ResizableBox3D l1={safeL1} l2={safeL2} h={safeH} viewMode={viewMode} />
+          <OrbitControls makeDefault minPolarAngle={0} maxPolarAngle={Math.PI / 2 - 0.1} />
+        </SceneCanvas>
+        
+        <div className="absolute bottom-4 left-4 right-20 text-center text-xs text-muted-foreground pointer-events-none">
+          Arraste para rotacionar, role para aproximar
+        </div>
+      </div>
+
+      {/* Coluna Direita: Resultados */}
+      <div className="w-full lg:w-96 shrink-0 flex flex-col gap-4 overflow-y-auto pb-8 lg:pb-0">
+        <Card className="shadow-sm border-border">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-lg">Resultados (Ca)</CardTitle>
+            <CardDescription>Valores baseados nas tabelas 4 e 5</CardDescription>
           </CardHeader>
-            <CardContent>
-              <div className="space-y-4 mt-2">
+          <CardContent className="space-y-4">
             <div className="flex justify-between items-center p-3 bg-background rounded-lg border">
               <span className="font-medium text-muted-foreground">Baixa Turbulência</span>
               <span className="text-2xl font-bold text-primary">{caLow.toFixed(2)}</span>
@@ -105,49 +127,20 @@ export default function CalcCaModule() {
               <span>H/L₁ = {(safeH / safeL1).toFixed(2)}</span>
               <span>L₁/L₂ = {(safeL1 / safeL2).toFixed(2)}</span>
             </div>
-              </div>
           </CardContent>
         </Card>
-        </div>
 
-        {/* Center Column: 3D Visualization */}
-        <div className="lg:col-span-4">
-          <Card className="h-full flex flex-col">
-            <CardHeader className="pb-2 shrink-0">
-              <CardTitle className="text-lg">Visualização 3D</CardTitle>
-              <CardDescription>Proporções dinâmicas</CardDescription>
-            </CardHeader>
-            <CardContent className="flex-1 p-0 min-h-[400px] relative rounded-b-xl overflow-hidden bg-gradient-to-b from-muted/30 to-muted/10">
-              <div className="absolute top-4 right-4 z-10">
-                <EducationalManual type="calc_ca" params={{ l1: safeL1, l2: safeL2, h: safeH }} />
-              </div>
-              <SceneCanvas moduleId="calc_ca" camera={{ position: [50, 40, 50], fov: 45 }} fallback={<div />} frameloop="always">
-                <ambientLight intensity={0.5} />
-                <directionalLight position={[10, 20, 10]} intensity={1} castShadow />
-                <Environment preset="city" />
-                <ResizableBox3D l1={safeL1} l2={safeL2} h={safeH} />
-                <OrbitControls makeDefault minPolarAngle={0} maxPolarAngle={Math.PI / 2 - 0.1} />
-              </SceneCanvas>
-              <div className="absolute bottom-4 left-4 right-20 text-center text-xs text-muted-foreground pointer-events-none">
-                Arraste para rotacionar, role para aproximar
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Right Column: Chart */}
-        <div className="lg:col-span-4">
-          <Card className="h-full">
+        {/* Ábaco */}
+        <Card className="shadow-sm border-border flex-1 min-h-[300px]">
           <CardHeader className="pb-2">
             <CardTitle className="text-lg">Ábaco NBR 6123</CardTitle>
             <CardDescription>Curvas isotermas aproximadas</CardDescription>
           </CardHeader>
-            <CardContent className="flex items-center justify-center h-[calc(100%-80px)]">
+          <CardContent className="flex items-center justify-center h-[calc(100%-80px)] min-h-[250px]">
             <DragCoefficientChart l1={safeL1} l2={safeL2} h={safeH} caLow={caLow} caHigh={caHigh} />
           </CardContent>
         </Card>
       </div>
     </div>
-    </div>
   );
 }