mudanca de camera

frontend/src/components/QuickRegionNav.tsx

@@ -0,0 +1,33 @@
+import { useAtlasStore, type BodyRegion } from "../store/useAtlasStore.js";
+
+const REGIONS: { region: BodyRegion; label: string }[] = [
+  { region: "cabeca", label: "Cabeça" },
+  { region: "pescoco", label: "Pescoço" },
+  { region: "torax", label: "Tórax" },
+  { region: "abdome", label: "Abdome" },
+  { region: "pelve", label: "Pelve" },
+  { region: "membros_superiores", label: "Membros Sup." },
+  { region: "membros_inferiores", label: "Membros Inf." },
+  { region: "corpo_inteiro", label: "Corpo Inteiro" },
+];
+
+// Navegação rápida por região — em vez de precisar acertar o clique numa
+// estrutura minúscula pra girar/aproximar a câmera manualmente, o usuário
+// pede direto pra "ir" numa região do corpo.
+export function QuickRegionNav() {
+  const focusOnRegion = useAtlasStore((s) => s.focusOnRegion);
+
+  return (
+    <div className="absolute top-3 left-1/2 -translate-x-1/2 flex flex-wrap gap-1.5 justify-center bg-panel/90 border border-white/10 rounded-lg px-3 py-2 shadow-lg max-w-[90%]">
+      {REGIONS.map((r) => (
+        <button
+          key={r.region}
+          onClick={() => focusOnRegion(r.region)}
+          className="text-xs px-2.5 py-1 rounded-full bg-white/5 hover:bg-accent hover:text-white text-slate-300 transition-colors"
+        >
+          {r.label}
+        </button>
+      ))}
+    </div>
+  );
+}