first commit

frontend/src/components/ClippingControls.tsx

@@ -0,0 +1,53 @@
+import { useAtlasStore, type ClipAxis } from "../store/useAtlasStore.js";
+
+const AXES: { value: ClipAxis; label: string }[] = [
+  { value: "sagittal", label: "Sagital (esq./dir.)" },
+  { value: "coronal", label: "Coronal (ant./post.)" },
+  { value: "transverse", label: "Transversal (sup./inf.)" },
+];
+
+export function ClippingControls() {
+  const clipping = useAtlasStore((s) => s.clipping);
+  const setClippingEnabled = useAtlasStore((s) => s.setClippingEnabled);
+  const setClipAxis = useAtlasStore((s) => s.setClipAxis);
+  const setClipPosition = useAtlasStore((s) => s.setClipPosition);
+
+  return (
+    <div className="space-y-2 border-t border-white/10 pt-3">
+      <label className="flex items-center gap-2 text-sm cursor-pointer">
+        <input
+          type="checkbox"
+          checked={clipping.enabled}
+          onChange={(e) => setClippingEnabled(e.target.checked)}
+          className="accent-accent"
+        />
+        Dissecção virtual (plano de corte)
+      </label>
+
+      {clipping.enabled && (
+        <div className="space-y-2 pl-1">
+          <select
+            value={clipping.axis}
+            onChange={(e) => setClipAxis(e.target.value as ClipAxis)}
+            className="w-full text-sm bg-white/5 border border-white/10 rounded px-2 py-1"
+          >
+            {AXES.map((a) => (
+              <option key={a.value} value={a.value}>
+                {a.label}
+              </option>
+            ))}
+          </select>
+          <input
+            type="range"
+            min={-1}
+            max={1}
+            step={0.01}
+            value={clipping.position}
+            onChange={(e) => setClipPosition(Number(e.target.value))}
+            className="w-full accent-accent"
+          />
+        </div>
+      )}
+    </div>
+  );
+}