componentes da celula

Signed-off-by: Rodrigo Bertoldo de Sousa Martins <rodrigo@martinsevieira.adv.br>

frontend/src/routes/CellDivisionPage.tsx

@@ -9,6 +9,7 @@ import {
   MEIOSIS_II_ERROR_STAGES,
 } from "../data/cellDivisionStages.js";
 import { GENETIC_SYNDROMES, ERROR_MECHANISM_LABELS, type ErrorMechanism } from "../data/geneticSyndromes.js";
+import { CELL_COMPONENTS, CELL_COMPONENT_BY_ID, type CellComponentId } from "../data/cellDivisionComponents.js";
 
 type Mode = "mitose" | "meiose" | "erros";
 type ErrorType = "meiose1" | "meiose2";
@@ -69,6 +70,7 @@ export default function CellDivisionPage() {
   const [leftOpen, setLeftOpen] = useState(false);
   const [rightOpen, setRightOpen] = useState(false);
   const [showSyndromeModal, setShowSyndromeModal] = useState(false);
+  const [selectedComponent, setSelectedComponent] = useState<CellComponentId | null>(null);
 
   const stages = useMemo(() => {
     if (mode === "mitose") return MITOSIS_STAGES;
@@ -250,7 +252,7 @@ export default function CellDivisionPage() {
         </button>
 
         <Canvas dpr={[1, 1.5]} camera={{ position: [0, 1.4, 5.4], fov: 42 }}>
-          <CellDivisionScene stage={stage} />
+          <CellDivisionScene stage={stage} selected={selectedComponent} onSelect={setSelectedComponent} />
           <CameraControls makeDefault minDistance={2} maxDistance={12} />
         </Canvas>
 
@@ -320,6 +322,35 @@ export default function CellDivisionPage() {
         <h2 className="text-lg font-semibold text-white leading-snug">{stage.label}</h2>
         <p className="text-sm text-slate-300 leading-relaxed">{stage.description}</p>
 
+        <div className="pt-3 border-t border-white/10 space-y-2">
+          <p className="text-[11px] uppercase tracking-wide text-slate-500">
+            Componentes da célula <span className="normal-case text-slate-600">— clique num deles (na cena ou aqui)</span>
+          </p>
+          <div className="flex flex-wrap gap-1.5">
+            {CELL_COMPONENTS.map((c) => (
+              <button
+                key={c.id}
+                onClick={() => setSelectedComponent(c.id)}
+                className={`text-xs px-2.5 py-1.5 rounded-full border ${
+                  selectedComponent === c.id
+                    ? "bg-accent text-white border-accent"
+                    : "border-white/10 bg-white/5 text-slate-300 hover:bg-white/10"
+                }`}
+              >
+                {c.label}
+              </button>
+            ))}
+          </div>
+          {selectedComponent && (
+            <div className="rounded-lg border border-accent/30 bg-accent/10 p-2.5 mt-1">
+              <p className="text-sm font-medium text-white">{CELL_COMPONENT_BY_ID.get(selectedComponent)?.label}</p>
+              <p className="text-xs text-slate-300 mt-1 leading-relaxed">
+                {CELL_COMPONENT_BY_ID.get(selectedComponent)?.description}
+              </p>
+            </div>
+          )}
+        </div>
+
         {mode === "erros" && (
           <div className="pt-3 border-t border-white/10 space-y-2">
             <p className="text-[11px] uppercase tracking-wide text-slate-500">Síndromes ligadas a este erro</p>